arcgis api 4.x for js 自定義 Draw 繪製手繪面以及手繪線,只針對二維視圖(附源碼下載)

前言

關於本篇功能實現用到的 api 涉及類看不懂的,請參照 esri 官網的 arcgis api 4.x for js:esri 官網 api,裏面詳細的介紹 arcgis api 4.x 各個類的介紹,還有就是在線例子:esri 官網在線例子,這個也是學習 arcgis api 4.x 的好素材。javascript

因爲 arcgis api 4.x for js 目前沒有提供繪製手繪面以及手繪線, 因此本篇自定義繪製工具 Draw 來實現,效果圖以下:
css

  • 下載源碼的 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之家小專欄html

文章尾部提供源代碼下載,對本專欄感興趣的話,能夠關注一波java

相關文章
相關標籤/搜索