arcgis api for javascript graphiclayer dojo框架下画图图层的显示与清除

本文链接：https://blog.youkuaiyun.com/qq_36735409/article/details/78424089

本文介绍了如何在ArcGIS API for JavaScript中，结合Dojo框架，实现图层的显示与清除。通过设置地图的初始范围，添加添加和清除按钮，实现在地图上添加标记并显示信息，以及清除标记的功能。代码示例中详细展示了实现这一过程的关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，我们借用上一篇文章中搭建的arcgis地图服务来做例子，并且对其进行一些少许更改。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Resizable Map</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/tundra/tundra.css"/>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis?v=2.0"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <script>
        //地图div的宽高
        var wid;
        var hei;
        var map;
        dojo.require("esri.map");
        function init(){
            var initExtent = new esri.geometry.Extent({"xmin": 76252, "ymin": 295635, "xmax": 135783, "ymax": 305322, "spatialReference": { "wkid": 106000 }  });
            map = new esri.Map("map",{//加载地图
                logo:false,//不显示logo
                extent: initExtent
            });
            var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://192.168.0.181/ArcGIS/rest/services/GISBaseMap/MapServer");
            map.addLayer(myTiledMapServiceLayer);
        }
        dojo.addOnLoad(init);
        window.onload=function(){
            /*事件监听，div宽高变化*/
            /*首先获取div当前宽高，然后每隔一秒钟获取一次div当前宽高，然后同上一次获取到的宽高进行比较，如果改变，则触发事件，重新加载地图*/
            wid=$('#map').width();
            hei=$('#map').height();
            setInterval("changed()",100);
        }
        //监听地图宽高改变事件
        function changed(){
            var wid1=$('#map').width();
            var hei1=$('#map').height();
            if(wid1!=wid || hei1!=hei){
                wid=wid1;
                hei=hei1;
                window.map.resize();
            }
        }
    </script>
</head>
<body>
<div id="map" style="width: 50%;height: 50%;border: 1px solid red"></div>
</body>
</html>

运行效果图：

对比上一篇文章的代码，我这里添加了两行代码：

var initExtent = new esri.geometry.Extent({"xmin": 76252, "ymin": 295635, "xmax": 135783, "ymax": 305322, "spatialReference": { "wkid": 106000 } });

和

extent: initExtent

这两行代码是控制地图在第一次加载时展示的初始范围的，这样做的目的是为了在之后添加画图图层时能更好的找到所添加的点的位置。

接下来我们向这个地图上添加两个按钮，一个添加，一个清除。当点击添加按钮时，向地图上添加一个标记，点击这个标记时显示信息。

当点击清除按钮时，将图中的标记清除。完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Resizable Map</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/tundra/tundra.css"/>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis?v=2.0"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <script>
        //地图div的宽高
        var wid;
        var hei;
        var map;
        var graphicLayer;
        dojo.require("esri.map");
        function init(){
            var initExtent = new esri.geometry.Extent({"xmin": 76252, "ymin": 295635, "xmax": 135783, "ymax": 305322, "spatialReference": { "wkid": 106000 }  });
            map = new esri.Map("map",{//加载地图
                logo:false,//不显示logo
                extent: initExtent
            });
            var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://192.168.0.181/ArcGIS/rest/services/GISBaseMap/MapServer");
            map.addLayer(myTiledMapServiceLayer);
        }

        window.onload=function(){
            /*事件监听，div宽高变化*/
            /*首先获取div当前宽高，然后每隔一秒钟获取一次div当前宽高，然后同上一次获取到的宽高进行比较，如果改变，则触发事件，重新加载地图*/
            wid=$('#map').width();
            hei=$('#map').height();
            setInterval("changed()",100);
        }
        //监听地图宽高改变事件
        function changed(){
            var wid1=$('#map').width();
            var hei1=$('#map').height();
            if(wid1!=wid || hei1!=hei){
                wid=wid1;
                hei=hei1;
                window.map.resize();
            }
        }
        //添加点
        function mapGraphicAdd(x,y){
            graphicLayer = new esri.layers.GraphicsLayer();
            map.addLayer(graphicLayer);
            var point = new esri.geometry.Point(x,y);
            var infoTemplate = new esri.InfoTemplate("point","this is the new point");
            var simpleMarkerSymbol = new esri.symbol.SimpleMarkerSymbol();
            var graphic = new esri.Graphic(point,simpleMarkerSymbol);
            graphicLayer.add(graphic.setInfoTemplate(infoTemplate));
        }
        //清除点
        function mapClear(){
            graphicLayer.clear();
        }
        dojo.addOnLoad(init);
    </script>
</head>
<body>
<div id="map" style="width: 50%;height: 50%;border: 1px solid red"></div>
<div onclick="mapGraphicAdd(95353.359,304542.613)">添加</div>
<div onclick="mapClear()">清除</div>
</body>
</html>

需要注意的是，代码中 (95353.359,304542.613)代表的是所需要添加的点的gis坐标。由于不同地图的坐标并不相同，所以应根据实际情况来改变。当然前面的

"xmin": 76252, "ymin": 295635, "xmax": 135783, "ymax": 305322, "spatialReference": { "wkid": 106000 }，也需要根据实际地图的坐标轴来填写。效果图：