前言

关于本篇功能实现用到的 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 绘制手绘面以及手绘线，只针对二维视图（附源码下载）的更多相关文章

  1. arcgis api 3.x for js 共享干货系列之一自写算法实现地图量算工具（附源码下载）

    0.内容概览 Geometry 地图服务方式实现地图距离以及面积的量算,简单描述 arcgis api 提供的接口类 geometryEngine 实现地图距离以及面积的量算,简单描述 自定义距离以及 ...

  2. arcgis api 4.x for js 地图加载多个气泡窗口展示（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  3. arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  4. arcgis api 3.x for js 解决 textSymbol 文本换行显示（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  5. arcgis api 3.x for js 共享干货系列之二自定义 Navigation 控件样式风格（附源码下载）

    0.内容概览 自定义 Navigation 控件样式风格 源码下载 1.内容讲解 arcgis api 3.x for js 默认的Navigation控件样式风格如下图:这样的风格不能说不好,各有各 ...

  6. arcgis api 4.x for js 自定义叠加图片图层实现地图叠加图片展示（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  7. arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  8. arcgis api 3.x for js 之 echarts 开源 js 库实现地图统计图分析（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. arcgis api 3.x for js 入门开发系列十三地图最短路径分析（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

随机推荐

  1. java对象的实例化过程

    简单类对象的实例化过程 1.在方法区加载类: 2.在栈内存申请空间,声明变量P: 3.在堆内存中开辟空间,分配对象地址: 4.在对象空间中,对对象的属性进行默认初始化,类成员变量显示初始化: 5.构造 ...

  2. iOS 和 H5 页面交互（WKWebview 和 UIWebview cookie 设置）

    iOS 和 H5 页面交互(WKWebview 和 UIWebview cookie 设置) 主要记录关于cookie相关的坑 1. UIWebview 1. UIWebview 相对比较简单 直接通 ...

  3. mysql的MHA高可用

    一.MHA简介 作者简介 松信嘉範: MySQL/Linux专家 2001年索尼公司入职 2001年开始使用oracle 2004年开始使用MySQL 2006年9月-2010年8月MySQL从事顾问 ...

  4. delete误删数据使用SCN恢复

    参考51CTO博客 问题描述:使用scn号恢复误删数据 1.查询系统闪回的scn值以及当前日志的scn值,因为我这个是测试,创建的表是在在后边,所以scn值要大于下边这两个scn值,所以对我恢复数据没 ...

  5. ts--泛型

    //泛型:软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性,组件不仅要能支持当前的数据类型,同时也能支持未来的数据类型 //泛型就是解决 类  接口  方法的复用性 以及对不特定 ...

  6. 带你揭秘Shiro（一）

    提到Shiro,不得不先介绍RBAC介绍 RBAC介绍: RBAC是基于角色的访问控制(Role-Based Access Control )在 RBAC 中,权限与角色相关联,用户通过成为适当角色的 ...

  7. RabbitMQ异常注意 reply-code=404, reply-text=NOT_FOUND - no exchange 'topic' in vhost '/', class-id=50, method-id=

    第一次,一定要先启动Provider再启动Consumer!!! rabbitmq为初始状态没有队列信息,然后我又没有启动consumer,所以导致provider找不到queue和exchange. ...

  8. 解决方案：从网站下载Excel，我的Office 2016，打开excel文件，显示空白

    今天在写Excel导出案例demo的时候发现,Excel下载后打开空白,要打开了看到空白后再点击一次打开后才可以显示,效果就如下图所示: 那么我就不能一次打开吗?我找了半天最终在这个博客找到了答案:h ...

  9. C# Replace字符替换函数

    它可以将字串内的字符替换为别的字符,可以嵌套使用,如下: 需要注意的是,它可以把字符替换为空,但不可以替换空字符,当不确定字符串是否为空时,可以进行以下判断,再替换: 示例的完整代码: string ...

  10. Redis 命令执行全过程分析

    今天我们来了解一下 Redis 命令执行的过程.我们曾简单的描述了一条命令的执行过程,本篇文章展示深入说明一下,加深大家对 Redis 的了解. 如下图所示,一条命令执行完成并且返回数据一共涉及三部分 ...