ArcGIS API for js 實現點、線、面等圖形的繪畫

今天總算敲定實習的事，也不知道未來等待我的將是什么，但是我知道我既然選擇了就要把它做好，選擇就不要后悔，走下去====開車開車

一、實現的思路

首先聲明一個GraphicLayer的圖層，（該圖層是客戶端類型圖層，與ArcGIS Server發布的圖層沒有任何聯系，繪畫的對象也在客戶端完成）然后生命工具類 Draw，根據點選的不同進行繪畫，然后將繪畫的圖形進行渲染即可。

二、HTML布局

    <div id="info">
        <sapn>點擊你所要繪畫的圖形</span>
        <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>

三、主要的代碼

1、引用的類庫

      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: "streets",
          center: [-25.312, 34.307],
          zoom: 3
        });

2、初始化繪圖工具

map.on("load", initToolbar);

3、繪圖工具函數的封裝

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);
          });
        }

4、填充的聲明

//設置點的填充樣式
var markerSymbol = new SimpleMarkerSymbol();
markerSymbol.setColor(new Color("#00FFFF"));
//設置線的填充樣式
        var lineSymbol = new CartographicLineSymbol(
          CartographicLineSymbol.STYLE_SOLID,
          new Color([255,0,0]), 10,
          CartographicLineSymbol.CAP_ROUND,
          CartographicLineSymbol.JOIN_MITER, 5
        );
//設置面的填充樣式
        var fillSymbol = new PictureFillSymbol(
          "/Imaage/timg.jpg",
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color('#000'),
            1
          ),
          42,
          42
        );

推薦一個畫圖js開源插件http://raphaeljs.com/icons/#talkq

5、添加到GraphicLayer的函數封裝

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;
          }
          map.graphics.add(new Graphic(evt.geometry, symbol));
        }

四、總結

代碼很簡單，但是這是一個ArcGIS API For JS 最基本的應用