arcgis api forJavaScript学习-Draw和graphic

---

前言

Draw可以用来绘制客户端的图形，具体的图形有，点、多点、线、手绘线、面、手绘面等。而graphic则是绘制完成后需要根据绘制得到的geometry，和自定义的symbol来对绘制的图形进行添加和渲染。

---

一、Draw：

官方api中给出了Draw的具体用法：方法一：
1. 创建Draw对象：var draw = new Draw(map);
2. 激活Draw：draw.activate(Draw.POINT);
3. 使用绘制完成事件"draw-complete"返回的geometry将图像添加到地图并取消激活Draw：draw.deactivate();
map.graphics.add(new Graphic(geometry, symbol));
方法二：(在官方的api没有说明，但是在官方给的示例中却用到了)：
1. 创建Draw对象：var draw = new Draw(map);
2. 激活Draw: draw.activate(“point”);（就是这种激活方式）
3. 使用绘制结束事件（draw-end官方说明被弃用，请改用draw-complete）:Draw：draw.deactivate();
map.graphics.add(new Graphic(geometry, symbol));

二、graphic

1.使用方式一：

通过new的时候给定josn对象（这种方式便于从数据库中获取得到数据，来生成图形）：添加图形使用map.graphics.add(graphic).

//创建一个点
require([
  "esri/graphic", ... 
], function(Graphic, ... ) {
  var myLine ={geometry:{"paths":[[[-91.40625,6.328125],[6.328125,19.3359375]]],
    "spatialReference":{"wkid":4326}},
    "symbol":{"color":[0,0,0,255],"width":1,"type":"esriSLS","style":"esriSLSSolid"}};
  var gra= new Graphic(myLine);
  ...
});

//创建一条线：
require([
  "esri/graphic", ... 
], function(Graphic, ... ) {
  var myLine ={geometry:{"paths":[[[-91.40625,6.328125],[6.328125,19.3359375]]],
    "spatialReference":{"wkid":4326}},
    "symbol":{"color":[0,0,0,255],"width":1,"type":"esriSLS","style":"esriSLSSolid"}};
  var gra= new Graphic(myLine);
  ...
});
//创建一个面
require([
  "esri/graphic", ... 
], function(Graphic, ... ) {
  var myPolygon = {"geometry":{"rings":[[[-115.3125,37.96875],[-111.4453125,37.96875],
    [-99.84375,36.2109375],[-99.84375,23.90625],[-116.015625,24.609375],
    [-115.3125,37.96875]]],"spatialReference":{"wkid":4326}},
    "symbol":{"color":[0,0,0,64],"outline":{"color":[0,0,0,255],
    "width":1,"type":"esriSLS","style":"esriSLSSolid"},
    "type":"esriSFS","style":"esriSFSSolid"}};
  var gra = new Graphic(myPolygon);
  ...
});

2.使用方式二：

通过传参geometry参数来进行new对象：构造函数为：new Graphic(geometry, symbol);

require([
  "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol",
  "esri/Color", "esri/InfoTemplate", "esri/graphic", ... 
], function(Point, SimpleMarkerSymbol, Color, InfoTemplate, Graphic, ... ) {
  var pt = new Point(xloc,yloc,map.spatialReference)
  var sms = new SimpleMarkerSymbol().setStyle(
    SimpleMarkerSymbol.STYLE_SQUARE).setColor(
    new Color([255,0,0,0.5]));
  var attr = {"Xcoord":evt.mapPoint.x,"Ycoord":evt.mapPoint.y,"Plant":"Mesa Mint"};
  var infoTemplate = new InfoTemplate("Vernal Pool Locations","Latitude: ${Ycoord} <br/>
    Longitude: ${Xcoord} <br/>
    Plant Name:${Plant}");
  var graphic = new Graphic(pt,sms,attr,infoTemplate);
  ...
});

三、官方demo解析

3.1、先上结果

官方给出了一个示例：示例功能为，点击需要画的图形画出对应图形，结果如下图：

3.2、代码解析

创建渲染符号：点、线、面符号（symbol）。

			var markerSymbol = new SimpleMarkerSymbol();
            markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
            markerSymbol.setColor(new Color("#00FFFF"));

            // lineSymbol used for freehand polyline, polyline and line.
            var lineSymbol = new CartographicLineSymbol(
                CartographicLineSymbol.STYLE_SOLID,
                new Color([255,0,0]), 10,
                CartographicLineSymbol.CAP_ROUND,
                CartographicLineSymbol.JOIN_MITER, 5
            );

            // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
            // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
            var fillSymbol = new PictureFillSymbol(
                "images/mangrove.png",
                new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_SOLID,
                    new Color('#000'),
                    1
                ),
                42,
                42
            );

地图加载，创建Draw对象，创建按钮点击事件（这里的点击事件很巧妙，第一次见到：首先使用div的click事件，通过事件返回的值获取到div中点击的element的id–>evt.target.id，使用获得的id激活相应的draw工具。）：

map.on("load", initToolbar);
function initToolbar() {
                tb = new Draw(map);
                tb.on("draw-end", addGraphic);

                // event delegation so a click handler is not
                // needed for each individual button
                on(dom.byId("info"), "click", function(evt) {
                    console.log(evt);
                    if ( evt.target.id === "info" ) {
                        return;
                    }
                    //获得点击的button中的id并转成字符串的小写
                    var tool = evt.target.id.toLowerCase();
                    map.disableMapNavigation();
                    console.log("tool-->",tool);
                    //指定画什么
                    tb.activate(tool);
                });
            }

绘制完成后添加graphic到地图：

//添加画的图形
            function addGraphic(evt) {
                //deactivate the toolbar and clear existing graphics
                tb.deactivate();
                map.enableMapNavigation();//允许地图上的所有导航

                // figure out which symbol to use
                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;
                }
                console.log("geometry-->", evt.geometry);
                map.graphics.add(new Graphic(evt.geometry, symbol));
            }

四、全部代码

<!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>Shapes and Symbols</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.34/esri/css/esri.css">

    <style>
        #info {
            top: 20px;
            color: #444;
            height: auto;
            font-family: arial;
            right: 20px;
            margin: 5px;
            padding: 10px;
            position: absolute;
            width: 115px;
            z-index: 40;
            border: solid 2px #666;
            border-radius: 4px;
            background-color: #fff;
        }
        html, body, #mapDiv {
            padding:0;
            margin:0;
            height:100%;
        }
        button {
            display: block;
        }
    </style>

    <script src="https://js.arcgis.com/3.34/"></script>
    <script>
        var map, tb;

        require([
            "esri/map", "esri/toolbars/draw",
            "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
            "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol",
            "esri/graphic",
            "esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
        ], function(
            Map, Draw,
            SimpleMarkerSymbol, SimpleLineSymbol,
            PictureFillSymbol, CartographicLineSymbol,
            Graphic,
            Color, dom, on
        ) {
            map = new Map("mapDiv", {
                basemap: "topo-vector",
                center: [-25.312, 34.307],
                zoom: 2
            });
            map.on("load", initToolbar);

            // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
            var markerSymbol = new SimpleMarkerSymbol();
            markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
            markerSymbol.setColor(new Color("#00FFFF"));

            // lineSymbol used for freehand polyline, polyline and line.
            var lineSymbol = new CartographicLineSymbol(
                CartographicLineSymbol.STYLE_SOLID,
                new Color([255,0,0]), 10,
                CartographicLineSymbol.CAP_ROUND,
                CartographicLineSymbol.JOIN_MITER, 5
            );

            // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
            // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
            var fillSymbol = new PictureFillSymbol(
                "images/mangrove.png",
                new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_SOLID,
                    new Color('#000'),
                    1
                ),
                42,
                42
            );

            function initToolbar() {
                tb = new Draw(map);
                tb.on("draw-end", addGraphic);

                // event delegation so a click handler is not
                // needed for each individual button
                on(dom.byId("info"), "click", function(evt) {
                    console.log(evt);
                    if ( evt.target.id === "info" ) {
                        return;
                    }
                    //获得点击的button中的id并转成字符串的小写
                    var tool = evt.target.id.toLowerCase();
                    map.disableMapNavigation();
                    console.log("tool-->",tool);
                    //指定画什么
                    tb.activate(tool);
                });
            }
            //添加画的图形
            function addGraphic(evt) {
                //deactivate the toolbar and clear existing graphics
                tb.deactivate();
                map.enableMapNavigation();//允许地图上的所有导航

                // figure out which symbol to use
                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;
                }
                console.log("geometry-->", evt.geometry);
                map.graphics.add(new Graphic(evt.geometry, symbol));
            }
        });
    </script>
</head>

<body>

<div id="info">
    <div>Select a shape then draw on map to add graphic</div>
    <button id="Point">Point</button>
    <button id="Multipoint">Multipoint</button>
    <button id="Line">Line</button>
    <button id="Polyline">Polyline</button>
    <button id="FreehandPolyline">Freehand Polyline</button>
    <button id="Triangle">Triangle</button>
    <button id="Extent">Rectangle</button>
    <button id="Circle">Circle</button>
    <button id="Ellipse">Ellipse</button>
    <button id="Polygon">Polygon</button>
    <button id="FreehandPolygon">Freehand Polygon</button>
</div>

<div id="mapDiv"></div>

</body>
</html>

---

总结

draw的使用是在客户端画相应的图形，需要注意的是一些小细节，在什么时候激活画图工具，在什么时候关闭画图工具，在什么时候清除绘制的图形。