当前位置：服务支持 > 软件文章 > ArcGIS API for JS地图符号使用：利用Draw绘制图形

ArcGIS API for JS地图符号使用：利用Draw绘制图形

阅读数 4

api里面用来在地图上绘制图形的工具位于 esri/toolbars/draw模块，同时还需要搭配esri/graphic模块以及点、线、面的样式相关的模块。

draw 模块用来绘图，之所以还要用到graphic模块是因为，所有绘制的图形都是以Graphic类的形式添加到地图的graphi c图层的，所以我们需要将绘制的图形构造成Graphic对象（这个过程中可以设置绘制图形的样式）才能加到地图里面。

步骤

首先创建地图。
接着在地图的load事件中添加创建工具条对象toolbar的操作
设置toolbar对象的draw-end事件，也就是说绘图完成后应该进行什么操作，在这里，我们需要将绘制的几何形状搭配上样式构造成Graphic对象，并且添加到地图的graphic图层中
然后设置相关按钮的单击事件，实现单击按钮激活toolbar（绘图工具）的功能

示例代码如下：

<html>
<head>
    <meta charset="utf-8">
    <title>符号与图形</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
       
    <style type="text/css">
        html, body, #main, #mapDiv{   /* mapDiv必须设置样式，否则可能无法正常显示，dijit布局也要有相应的样式 */
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
        var toolbar, map;      
        var sms, sls, sfs;      // 点、线、面样式
        require(["esri/map", 
                "esri/layers/ArcGISTiledMapServiceLayer", 
                "esri/toolbars/draw",
                "esri/graphic",

				// 样式相关的模块
                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",
				
				// 解析页面中dojo元素
                "dojo/parser",

                "dijit/layout/BorderContainer",
                "dijit/layout/ContentPane",
                "dojo/domReady!"], 
            function(Map, TiledLayer, Draw, Graphic, MarkerSymbol, LineSymbol, FillSymbol, parser) {
                parser.parse();   // 解析页面

                map = new Map("mapDiv");
                var url = "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer";
                var layer = new TiledLayer(url);
                map.addLayer(layer);
				
				// 在地图的加载事件中创建绘图工具
                map.on("load", create_toolbar); 
                // 绑定相应的按钮   
                activate_tool();

                // 绑定按钮的单击事件
                function activate_tool() {
                    var btns = document.getElementsByClassName('btn-info');
                    for(var i = 0; i < btns.length; ++ i) {
                        var type = btns[i].getAttribute('aria-label');
    
                        // 清除按钮
                        if(type == "clear") {
                            btns[i].onclick = function() {
                                map.graphics.clear();
                            }
                            continue;
                        }
    
                        // 其他按钮
                        btns[i].onclick = function() {
                            var tool = this.getAttribute('aria-label');
                            toolbar.activate(Draw[tool]);
                            map.hideZoomSlider();
                        }
                    }
                }

                // 创建绘图工具条
                function create_toolbar(themap) {
                    toolbar = new Draw(map);
                    // 绘图完毕之后，由add_to_map函数将图形显示在地图上
                    toolbar.on('draw-end', add_to_map);
                }

                // 添加至地图
                function add_to_map(evt) {
                    toolbar.deactivate();
                    var symbol = null;
                    switch(evt.geometry.type) {
                        case 'multipoint':
                        case 'point':
                            symbol = new MarkerSymbol();
                            break;
                        case 'polyline':
                            symbol = new LineSymbol();
                            break;
                        default:
                            symbol = new FillSymbol();
                            break;
                    }
                    // 构造Graphic对象
                    var graphic = new Graphic(evt.geometry, symbol);
                    map.graphics.add(graphic);
                    map.showZoomSlider();     // 恢复可缩放状态
                }
        });
    </script>
</head>
<body class="tundra">
    <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
      <div id="top" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'" style="width: 100%; height: 40px;">
        <button class="btn btn-info" type="button" aria-label="POINT">点</button>
        <button class="btn btn-info" type="button" aria-label="MULTI_POINT">多点</button>
        <button class="btn btn-info" type="button" aria-label="LINE">线</button>
        <button class="btn btn-info" type="button" aria-label="POLYGON">多边形</button>
        <button class="btn btn-info" type="button" aria-label="RECTANGLE">矩形</button>
        <button class="btn btn-info" type="button" aria-label="CIRCLE">圆</button>
        <button class="btn btn-info" type="button" aria-label="ELLIPSE">椭圆</button>
        <button class="btn btn-info" type="button" aria-label="TRIANGLE">三角形</button>
        <button class="btn btn-info" type="button" aria-label="clear">清空</button>
      </div>
      <div id="left" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left', splitter: true" style="width: 80px;">
          左侧菜单
      </div>
      <div id="center" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
          <div id="mapDiv"></div>
      </div>
    </div>
</body>
</html>



免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删

返回上级列表