arcgis api for js地图符号的使用(使用Draw绘制图形)

api里面用来在地图上绘制图形的工具位于 esri/toolbars/draw模块,同时还需要搭配esri/graphic模块以及点、线、面的样式相关的模块。
draw 模块用来绘图,之所以还要用到graphic模块是因为,所有绘制的图形都是以Graphic类的形式添加到地图的graphic图层的,所以我们需要将绘制的图形构造成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>

你可能感兴趣的:(WebGIS)