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

時間 2019-12-12

標籤 arcgis api 4.x 自定義 draw 繪製以及針對二維視圖源碼下載欄目 JavaScript 简体版

原文原文鏈接

前言

關於本篇功能實現用到的 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。