ArcGIS API for Javascript 3.21地图开发实例（一、图形绘制和删除及popup弹出层）

来源：互联网发布：c语言中左移编辑：程序博客网时间：2024/06/06 03:35

前言

Arcgis是一个地理系统的平台，可用来进行数据数据展示或二次开发。这里我们所使用的是Arcgis对于JavaScript的api，也就是web端的api进行开发。我们使用的版本是3.21，这个版本包含了完整的2D地图的api。如果想对3D地图进行开发，可以使用4.4版本的api。在这个demo中，我们要完成如下的几个功能:

基本地图展示
搜索功能
图形绘制
图形点击显示详情
图形删除

在本篇博客的结尾可以看到本例的下载链接。

先来看程序的截图:
首先是页面打开时:

接下来是使用搜索功能时：

绘制的图形：

左键点击图形产生popup：

在右键点击图形的时候弹出删除按钮：

代码

接下来是程序的完整代码。除了引入arcGIS包之外，也引入了jquery包，jqeury在本例中并非必需，主要是用于后面实例的开发。

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">    <title>Arcgis Demo</title>    <link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">    <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">    <style>        html, body, #map {            height: 100%; width: 100%; margin: 0; padding: 0;        }        #search {            z-index: 20;            margin: auto;            height: 95px;            width: 400px;            margin: auto;            position: absolute;            top: 20px;            left: 0;            right: 0;        }        #info {            top: 200px;            color: #444;            height: auto;            font-family: arial;            left: 16px;            margin: 2px;            padding: 3px;            position: absolute;            width: 40px;            z-index: 40;            border: solid 1px #666;            border-radius: 4px;            background-color: #fff;        }        html, body, #mapDiv {            padding:0;            margin:0;            height:100%;        }        #info button {            background-color: white;            padding: 2px;            text-align: center;            margin: 4px 4px;            cursor: pointer;            border-radius: 4px;            width: 30px;            border: 1px solid        }        #info button:hover {            padding: 2px;            text-align: center;            margin: 4px 4px;            cursor: pointer;            border-radius: 4px;            width: 30px;            border: 1px solid #1e90ff;            color: #1e90ff;        }    </style>    <script src="https://js.arcgis.com/3.21/"></script>    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>    <script>        var map, tb, ctxMenuForGraphics;        var selected;        require([            "esri/map",            "esri/layers/ArcGISTiledMapServiceLayer",            "esri/layers/ArcGISDynamicMapServiceLayer",            "dojo/_base/connect",            "esri/dijit/BasemapToggle",            "esri/toolbars/draw",            "esri/geometry/Polygon",            "esri/geometry/Polyline",            "esri/dijit/Search",            "dijit/registry",            "esri/dijit/Scalebar",            "esri/symbols/SimpleMarkerSymbol",            "esri/symbols/SimpleFillSymbol",            "esri/symbols/PictureFillSymbol",            "esri/symbols/CartographicLineSymbol",            "esri/symbols/PictureMarkerSymbol",            "esri/geometry/Extent",            "esri/SpatialReference",            "esri/geometry/Point",            "esri/geometry/mathUtils",            "esri/geometry/ScreenPoint",            "esri/toolbars/edit",            "dijit/Menu",            "dijit/MenuItem",            "dijit/MenuSeparator",            "esri/graphic",            "esri/layers/GraphicsLayer",            "esri/Color",            "esri/dijit/Popup",            "esri/dijit/PopupTemplate",            "esri/InfoTemplate",            "esri/symbols/SimpleLineSymbol",            "dojo/dom-construct",            "dojo/dom",            "dojo/on",            "dojo/domReady!"        ], function(            Map,  ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,            connect, BasemapToggle, Draw, Polygon, Polyline, Search, registry, Scalebar, SimpleMarkerSymbol, SimpleFillSymbol,            PictureFillSymbol, CartographicLineSymbol, PictureMarkerSymbol,            Extent, SpatialReference, Point, mathUtils, ScreenPoint, Edit, Menu, MenuItem, MenuSeparator,            Graphic, GraphicsLayer, Color, Popup, PopupTemplate, InfoTemplate, SimpleLineSymbol, domConstruct,            dom, on, domAttr        ) {            //创建popup弹出层            var popup = new Popup(null, domConstruct.create("div"));            //地图            map = new Map("map", {                center: [121.47003707885744, 31.24853148977224],                zoom: 7,                infoWindow: popup,                extent: new Extent(-122.68,45.53,-122.45,45.60, new SpatialReference({ wkid:4326 }))            });            //添加地图图层            var mapServiceURL = "https://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";            map.addLayer(new ArcGISTiledMapServiceLayer(mapServiceURL));            //初始化比例尺            var scalebar = new Scalebar({                map: map,                attachTo: "bottom-left",                scalebarUnit: "dual",            });            //显示比例尺            scalebar.show();            //创建图层            var gl = new GraphicsLayer({ id: "draw" });            map.addLayer(gl);            map.on("load", initToolbar);            createGraphicsMenu();            //创建右键菜单            function createGraphicsMenu() {                ctxMenuForGraphics = new Menu({});                ctxMenuForGraphics.addChild(new MenuItem({                    label: "删除",                    onClick: function () {                        gl.remove(selected)                    }                }));                //当鼠标在gl图层的图形上方时绑定该图形的点击事件                gl.on("mouse-over", function(evt) {                    selected = evt.graphic;                    ctxMenuForGraphics.bindDomNode(evt.graphic.getDojoShape().getNode());                });                //当鼠标移出gl图层的图形上方时取消绑定该图形的点击事件                gl.on("mouse-out", function(evt) {                    ctxMenuForGraphics.unBindDomNode(evt.graphic.getDojoShape().getNode());                });            }            //启动右键菜单            ctxMenuForGraphics.startup();            //点击地图响应            map.on("click", function(e) {                //点击空白处隐藏popup                if(e.graphic == undefined){                    popup.hide();                }            });            //搜索框            var search = new Search({                map: map,                graphicsLayer: gl,            }, "search");            search.startup();            //弹出框信息            gl.on("click",  function(e) {                var detailInfo = '图形: '  + e.graphic.geometry.cache.geoShape + '<br>'                popup.setTitle('图形信息');                popup.setContent(detailInfo);                popup.show(e.mapPoint);            });            //用来展示点的symbol            var markerSymbol = new SimpleMarkerSymbol();            markerSymbol.setColor(new Color("#00FFFF"));            // 用来展示线的symbol            var lineSymbol = new CartographicLineSymbol(                CartographicLineSymbol.STYLE_SOLID,                new Color([255,0,0]), 2,                CartographicLineSymbol.CAP_ROUND,                CartographicLineSymbol.JOIN_MITER, 5            );            //用来展示面的symbol            var fillSymbol = new SimpleFillSymbol(                SimpleFillSymbol.STYLE_SOLID,                new SimpleLineSymbol(                    SimpleLineSymbol.STYLE_SOLID,                    new Color('#000'),                    1                ),                new Color([255, 0, 0, 0.1])            );            //初始化工具栏            function initToolbar() {                tb = new Draw(map);                tb.on("draw-end", addGraphic);                on(dom.byId("info"), "click", function(evt) {                    if ( evt.target.id === "info" ) {                        return;                    }                    var tool = evt.target.id.toLowerCase();                    map.disableMapNavigation();                    tb.activate(tool);                });            }            //添加图形            function addGraphic(evt) {                tb.deactivate();                map.enableMapNavigation();                var symbol;                if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {                    symbol = markerSymbol;                } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {                    symbol = lineSymbol;                }                else {                    symbol = fillSymbol;                }                evt.geometry.setCacheValue("geoShape", evt.geometry.type);                gl.add(new Graphic(evt.geometry, symbol));            }        });    </script></head><body  class="claro" style="font-size: 0.75em;">    <div id="info">        <div align="center">绘制</div>        <button id="Multipoint"><image id="Multipoint" src = "../images/point.png"></image></button>        <button id="Line"><image id="Line" src = "../images/line.png"></image></button>        <button id="Polyline"><image id="Polyline" src = "../images/line_chart.png"></image></button>        <button id="FreehandPolyline"><image id="FreehandPolyline" src = "../images/draw.png"></image></button>        <button id="Triangle"><image id="Triangle" src = "../images/triangle.png"></image></button>        <button id="Extent"><image id="Extent" src = "../images/rectangle.png"></image></button>        <button id="Circle"><image id="Circle" src = "../images/circle.png"></image></button>        <button id="Ellipse"><image id="Ellipse" src = "../images/ellipse.png"></image></button>        <button id="Polygon"><image id="Polygon" src = "../images/polygon.png"></image></button>        <button id="FreehandPolygon"><image id="FreehandPolygon" src = "../images/free_polygon.png"></image></button>    </div>    <div id="search"></div>    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">    </div></body></html>

简单的说一下流程：首先创建popup实例，接着创建map实例，将map的弹出层指定为刚创建的popup实例。然后创建地图图层和绘制图层，将地图图层和绘制图层加入到map实例中去。在地图载入时初始化绘制工具栏和右键菜单，并且把工具栏和右键菜单的事件与绘图的图层绑定，这样之后对图形的绘制和删除都会在绘制的图层上进行。接着初始化搜索框即可。
具体的函数说明都写到注释里了。

结束语

本例中基本都是对arcGIS api的调用，也是一些基本的操作。本例中的代码已经上传至我的github。下载完成后解压，并使用浏览器打开html文件夹下的ArcgisDemo.html即可查看效果。如果对代码有疑问，可以在博客下留言。

阅读全文

1 0