前言
關於本篇功能實現用到的 api 涉及類看不懂的，請參照 esri 官網的 arcgis api 4.x for js：esri 官網 api，里面詳細的介紹 arcgis api 4.x 各個類的介紹，還有就是在線例子：esri 官網在線例子，這個也是學習 arcgis api 4.x 的好素材。
由於 arcgis api 4.x for js 目前沒有提供繪制手繪面以及手繪線， 所以本篇自定義繪制工具 Draw 來實現，效果圖如下：
- 下載源碼的 zip 解壓，源碼在文章尾部提供
- 拷貝 Custom.js 以及 Draw.js 兩個文件放在本機離線部署的 arcgis api 指定的目錄esri文件夾下面，我本機的是如下
- html 頁面完整代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title></title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .buttonRight{ position: absolute; z-index: 999; } </style> <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.10/esri/css/main.css"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script src="http://localhost/arcgis_js_api/library/4.10/init.js"></script> <script> require([ "esri/Map", "esri/views/MapView", "esri/Basemap", "esri/layers/TileLayer", "esri/layers/GraphicsLayer", "esri/symbols/SimpleFillSymbol", "esri/custom/Draw" ], function(Map, MapView, Basemap, TileLayer, GraphicsLayer, SimpleFillSymbol, Draw) { layer = new TileLayer({ url: "http://server.arcgisonline.com/arcgis/rest/services/ESRI_Imagery_World_2D/MapServer" }); basemap = new Basemap({ baseLayers: [layer] }); map = new Map({//加載arcgis在線地圖 //basemap: "streets" basemap: basemap }); view = new MapView({//創建二維視圖 container: "viewDiv", map: map, zoom: 15, center: [113.3659, 23.1284] // longitude, latitude }); //視圖加載完成 view.when(function(){ //初始化自定義繪制工具 draw = new Draw(view); }); //手繪面 $("#free_polygon").click(function(){ draw.activate("free_polygon"); }); //手繪線 $("#free_polyline").click(function(){ draw.activate("free_polyline"); }); //清空 $("#clear").click(function(){ if(draw){ draw.graphicsLayer.removeAll();; } }); }); </script> </head> <body> <div id="viewDiv"></div> <button id="free_polygon" class="btn btn-default buttonRight" style="top:20px;right:180px">手繪面</button> <button id="free_polyline" class="btn btn-default buttonRight" style="top:20px;right:100px">手繪線</button> <button id="clear" class="btn btn-default buttonRight" style="top:20px;right:20px">清空</button> </body> </html>
更多的詳情見：GIS之家小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波