顺德区地理信息公共服务平台

地图类API 修改标绘图层

拖动图层上要素，以改变要素位置

如何修改标绘图层？

下面是修改标绘图层的示例代码。

                                                            <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                                                            <html xmlns="http://www.w3.org/1999/xhtml">
                                                                <head>
                                                                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                                                                    <title>二次开发Demo </title>
                                                                    <!--引入地图框架-->
                                                                    <script src="https://tianditu.shunde.gov.cn/portalsys/DCIMapMiddleware.initapi" type="text/javascript">
                                                                    </script>
                                                                    <!--地图边框样式-->
                                                                    <style type="text/css">
                                                                        .content {
                                                                            height: 380px;
                                                                            width: 741px;
                                                                            text-align: left;
                                                                            border: 1px solid #000000;
                                                                        }

                                                                        #map_div {
                                                                            position: absolute;
                                                                        }

                                                                        .Button {
                                                                            position: absolute;
                                                                            bottom: 10px;
                                                                            left: 20px;
                                                                            z-index: 2;
                                                                            margin-left: 5px;
                                                                            float: left;
                                                                        }
                                                                    </style>
                                                                </head>
                                                                <body>
                                                                    <div id="map_div" class="content">
                                                                        <div class="Button" style="background-color: white;">拖动图层上要素，以改变要素位置</div>
                                                                    </div>
                                                                </body>
                                                            </html>
                                                            <!--创建地图实例代码-->
                                                            <script type="text/javascript">
                                                                var map = null;
                                                                var plotLayer = null;
                                                                var editObj = null;
                                                                function showMap() {
                                                                    map = new DCIMap("map_div", DCIMapConfig.mapInitParams);
                                                                    switch (DCIMapConfig.vecMap.type) {
                                                                        case 0://WMTS
                                                                            var layers = new DCIWMTSLayer(DCIMapConfig.vecMap.Url);
                                                                            map.addLayer(layers, 0);
                                                                            map.showSlider(map.initExtent, DCIMapConfig.sliderConfig);
                                                                            break;
                                                                        case 1://1为mapserver切片
                                                                            var layers = new esri.layers.ArcGISTiledMapServiceLayer(DCIMapConfig.vecMap.Url);
                                                                            map.addLayer(layers, 0);
                                                                            dojo.connect(layers, "onLoad", function () {
                                                                                map.showSlider(map.initExtent, DCIMapConfig.sliderConfig);
                                                                            })
                                                                            break;
                                                                    }
                                                                    //标绘图层
                                                                    plotLayer = new esri.layers.GraphicsLayer();
                                                                    map.addLayer(plotLayer, 1);

                                                                    var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
                                                                    var geometry = new esri.geometry.Point([426699.98869475815, 2583118.604640635], new esri.SpatialReference({ wkid: 4547 }));
                                                                    var graphic = new esri.Graphic(geometry, symbol);
                                                                    plotLayer.add(graphic);

                                                                    editObj = new esri.toolbars.Edit(map.esriMap);
                                                                    editObj.activate(esri.toolbars.Edit.MOVE, graphic);
                                                                }
                                                                dojo.addOnLoad(showMap);
                                                            </script>

下面我们分步向您介绍：

加载地图浏览API

将下载的地图浏览API包解压后拷入网页所在的工程文件夹，将如下列代码所示的相对路径加入网页head节内引用。

1.	< !--引入地图框架-->
2.	< script src="http://服务器IP/地图API名称/" type="text/javascript" />< /script>

创建地图容器元素

创建地图浏览应用程序需要在页面中创建一块区域用于显示地图内容，这个区域我们叫做地图容器，即在body中加入的一个div容器，其页面代码为：

1.	<div id="map_div" class="content"> </div>

参数初始化设置

地图实例通过下列代码创建，其中，DCIMapConfig.mapInitParams是地图初始化参数。

1.	var map = new DCIMap("map_div", DCIMapConfig.mapInitParams);

加载图层到地图

根据底图类型，创建底图，添加到地图中。

1.	switch (DCIMapConfig.vecMap.type) {
2.	case 0://WMTS
3.	var layers = new DCIWMTSLayer(DCIMapConfig.vecMap.Url);
4.	map.addLayer(layers, 0);
5.	map.showSlider(map.initExtent, DCIMapConfig.sliderConfig);
6.	break;
7.	case 1://1为mapserver切片
8.	var layers = new esri.layers.ArcGISTiledMapServiceLayer(DCIMapConfig.vecMap.Url);
9.	map.addLayer(layers, 0);
10.	dojo.connect(layers, "onLoad", function () {
11.	map.showSlider(map.initExtent, DCIMapConfig.sliderConfig);
12.	})
13.	break;
14.	}
15.	}

添加标绘图层

新建标绘图层GraphicsLayer，添加到地图上

1.	var plotLayer = new esri.layers.GraphicsLayer();
2.	map.addLayer(plotLayer, 1);

创建一个标绘

创建一个标绘，并将标绘加到地图中

1.	var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 255, 0.8]));
2.	var geometry = new esri.geometry.Point([426699.98869475815, 2583118.604640635], new esri.SpatialReference({ wkid: 4547 }));
3.	var graphic = new esri.Graphic(geometry, symbol);
4.	plotLayer.add(graphic);

创建一个编辑工具以修改标绘

创建一个编辑工具，用于修改标绘图层上要素的位置

1.	var editObj = new esri.toolbars.Edit(map.esriMap);
2.	editObj.activate(esri.toolbars.Edit.MOVE, graphic);
3.	var graphic = new esri.Graphic(geometry, symbol);
4.	plotLayer.add(graphic);