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 的好素材。
由于 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之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波
arcgis api 4.x for js 自定义 Draw 绘制手绘面以及手绘线，只针对二维视图（附源码下载）的更多相关文章
- arcgis api 3.x for js 共享干货系列之一自写算法实现地图量算工具（附源码下载）
0.内容概览 Geometry 地图服务方式实现地图距离以及面积的量算,简单描述 arcgis api 提供的接口类 geometryEngine 实现地图距离以及面积的量算,简单描述 自定义距离以及 ...
- arcgis api 4.x for js 地图加载多个气泡窗口展示（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
- arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 解决 textSymbol 文本换行显示（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 共享干货系列之二自定义 Navigation 控件样式风格（附源码下载）
0.内容概览 自定义 Navigation 控件样式风格 源码下载 1.内容讲解 arcgis api 3.x for js 默认的Navigation控件样式风格如下图:这样的风格不能说不好,各有各 ...
- arcgis api 4.x for js 自定义叠加图片图层实现地图叠加图片展示（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
- arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 之 echarts 开源 js 库实现地图统计图分析（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列十三地图最短路径分析（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
随机推荐
- 爬虫(七)：BeatifulSoup模块
1. Beautiful Soup介绍 Beautiful Soup是一个可以从HTML或XML文件中提取数据的Python库.能将即将要进行解析的源码加载到bs对象,调用bs对象中相关的方法或属性进 ...
- 松软科技Web课堂:JavaScript For 循环
循环可多次执行代码块. JavaScript 循环 假如您需要运行代码多次,且每次使用不同的值,那么循环(loop)相当方便使用. 通常我们会遇到使用数组的例子: 不需要这样写: text += ca ...
- styled-components：解决react的css无法作为组件私有样式的问题
react中的css在一个文件中导入,是全局的,对其他组件标签都会有影响. 使用styled-components第三方模块来解决,并且styled-components还可以将标签和样式写到一起,作 ...
- CRC校验算法的实例解析
概念 CRC校验算法,说白了,就是把需要校验的数据与多项式进行循环异或(XOR), 进行XOR的方式与实际中数据传输时,是高位先传.还是低位先传有关.对于数据 高位先传的方式,XOR从数据的高位开 ...
- JavaScript 函数工具
组 all:布尔全等判断 const all = (arr, fn = Boolean) => arr.every(fn); all([4, 2, 3], x => x > 1); ...
- Maven pom.xml文件深度学习
本文介绍Maven项目构建中,pom.xml文件的生成规则和常用节点的使用方法.pom.xml官方网址:http://maven.apache.org/pom.html pom简介 pom作为项目对象 ...
- （八十）c#Winform自定义控件-分割线标签-HZHControls
官网 http://www.hzhcontrols.com 前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kww ...
- oracle中创建用户、角色、权限、表空间简单使用
一.数据库用户 创建数据库用户 create user 用户名 identified by 密码; 授权 grant 权限名 to 用户名; 查看当前用户权限 select * from sessio ...
- Zabbix理论知识
Zabbix 什么是Zabbix? Zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. Zabbix作用 Zabbix能够监视各种服务器的健康性.网络的稳定性 ...
- C language bit byte and word
bit:The smallest storage unit of a computer byte:Common computer storage unit word:Computer natural ...