ArcGIS API for JavaScript开发环境搭建与发布以及基本功能实现

@{

    ViewBag.Title = "GIS地图";

    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css" />

    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css" />

    <script type="text/javascript" src="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/init.js"></script>

}

<div style="padding-left: 1px; padding-top: 1px;">

    <div id="mapDiv" style="width: 1180px; min-height: 800px; "></div>

    <div id="controls">

        <a id="ctrl-waring-info">预警信息</a>

    </div>

</div>

<script type="text/javascript">

    require(["esri/map",

        "dojo/dom",

        "dojo/on",

        "dojo/colors",

        "esri/layers/ArcGISTiledMapServiceLayer",

        "esri/layers/GraphicsLayer",

        "esri/geometry/Point",

        "esri/SpatialReference",

        "esri/symbols/SimpleMarkerSymbol",

        "dojo/domReady!"],

        function (Map, dom, on, Color,

            ArcGISTiledMapServiceLayer,

            GraphicsLayer,

            Point, SpatialReference,

            SimpleMarkerSymbol

            ) {

            var map = new Map("mapDiv", {

                logo: false,

                //basemap: "streets",

                center: [120.6168, 31.42],

                slider: false,

                zoom: 9,

                showLabels: true,

            });

            //定位中心点

            var centerPnt = new Point(120.6168, 31.42, new SpatialReference({ wkid: 4490 }));

            map.centerAndZoom(centerPnt, 9);

            //==========以下为加载江苏水利地图与相城区边界============

            var bgLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://218.94.6.92:6080/arcgis/rest/services/jssl_vector_L3_L17/MapServer");

            map.addLayer(bgLayer);

            //======== 地图中添加绘制层 =======

            var gl = new GraphicsLayer({ id: "bound" });

            map.addLayer(gl);

            var gl_pnt = new GraphicsLayer({ id: "gl_point" });

            map.addLayer(gl_pnt);

            //======== 添加边界线 =======

            var line = new esri.geometry.Polyline({

                "paths": [[

                    [120.614, 31.553],

                    [120.623, 31.5407],

                    [120.7507, 31.531],

                    [120.8113, 31.436]

                ]],

                "spatialReference": { "wkid": 4490 }

            });

            var lineSymbol = new esri.symbol.CartographicLineSymbol(

              esri.symbol.CartographicLineSymbol.STYLE_SOLID,

              new dojo.Color("#0000FF"), 2,

              esri.symbol.CartographicLineSymbol.CAP_ROUND,

              esri.symbol.CartographicLineSymbol.JOIN_MITER, 5

            );

            var polyline = new esri.Graphic(line, lineSymbol);

            gl.add(polyline);

            //给按钮绑定click事件

            on(dom.byId("ctrl-waring-info"), "click", function () {

                console.log("点击了预警按钮了！");

                //========= 添加 点 ========

                //定义点符号l

                var pSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 20, lineSymbol, new Color([255, 0, 0]));

                var pnt1 = new Point(120.6168, 31.42, new SpatialReference({ wkid: 4490 }));

                var polypoint = new esri.Graphic(pnt1, pSymbol);

                gl_pnt.add(polypoint);

            })

            //给按钮绑定click事件

            on(dom.byId("ctrl-rain-info"), "click", function () {

                console.log("点击了雨情按钮！");

                //========= 清除 点 ========

                gl_pnt.clear();

            })

        })

</script>

@using Drision.Framework.Mvc;

@{

    ViewBag.Title = "GIS地图";

    <link rel="stylesheet" type="text/css" href="http://222.95.237.125:10001/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css" />

    <link rel="stylesheet" type="text/css" href="http://222.95.237.125:10001/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css" />

    <script type="text/javascript" src="http://222.95.237.125:10001/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/init.js"></script>

}