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

前言

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

  1. 基本地图展示
  2. 搜索功能
  3. 图形绘制
  4. 图形点击显示详情
  5. 图形删除

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

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

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

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

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

绘制的图形:

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

左键点击图形产生popup:

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

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

ArcGIS API for Javascript 3.21地图开发实例(一、图形绘制和删除及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即可查看效果。如果对代码有疑问,可以在博客下留言。

上一篇:分享8款精美的jQuery图片播放插件


下一篇:源代码安装GIT