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 各个类 ...
随机推荐
- SpringCloud（三）：服务消费以及负载均衡（RestTemplate+Ribbon）
一.什么是Ribbon: Ribbon是Netflix发布的开源项目,主要功能是提供客户端的软件负载均衡算法. 将Netflix的中间层服务连接在一起.Ribbon客户端组件提供一系列完善的配置项如连 ...
- SAP 基础知识
SAP R/3系统的应用层由应用服务器及消息服务器(Message Server)组成. 应用服务器组件如下: 工作进程(Work Process) 调度机(Dispatcher) 网关服务器(Gat ...
- Pycharm导入Django项目
Pycharm导入Django项目 添加项目:file-->open,找到项目所在的位置打开项目 添加django后台项目路径 file-->settings-->Languages ...
- WebShell代码分析溯源(七)
WebShell代码分析溯源(七) 一.一句话变形马样本 <?php $e = $_REQUEST['e'];$arr = array($_POST['POST'],);array_map(ba ...
- WPF 后台模拟界面触摸点击
win32Api提供一种方法,模拟用户触摸点击 InjectTouchInput function InitializeTouchInjection InjectTouchInput 在模拟添加触摸输 ...
- 数据库查询 - DataTable转Entity类型数据
当使用Sql语句查询数据库,返回DataSet数据集. DataSet转化为数据列表,可以通过映射方式直接返回Entity数据列表 新建一个特性类,用于数据库列表列名称映射 LinqToDB提供了一个 ...
- python实现智能语音天气预报
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 飞奔的帅帅 PS:如有需要Python学习资料的小伙伴可以加点击下 ...
- PlayJava Day030
1.实例化Class类对象 //第一种,可靠高效 Class c0 = String.class ; //第二种,使用对象 Class c1 = "zhangsan".getCla ...
- 使用 mitmdump 进行 selenium webDriver绕过网站反爬服务的方法 pdd某宝 可用
安装: pip install mitmproxy 新建一个脚本 脚本代码: from mitmproxy import ctx injected_javascript = ''' // over ...
- laravel开发大型电商网站之异常设计思路分析
令人讨厌的异常 提起异常,大家都很反感,当信心满满的写完一段代码,刷新页面发现上面写着大大的 Exception 是最心烦的时候了.模块给领导演示的时候,如果报了异常,也是最让人崩溃的时候了. 在一般 ...