前言

关于本篇功能实现用到的 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. JS---DOM---总结绑定事件的区别

    总结绑定事件的区别: addEventListener(); attachEvent()   相同点: 都可以为元素绑定事件 不同点: 1.方法名不一样 2.参数个数不一样addEventListen ...

  2. SpringMVC的自动配置解析

    https://docs.spring.io/spring-boot/docs/1.5.10.RELEASE/reference/htmlsingle/#boot-features-developin ...

  3. jQuery实现类似Chrome控制台可拖拽改变宽度的样式

    最近项目进程紧张,没法再愉快的网上冲浪了 因为项目需要实现一个页面上可拖拽改变div宽度的功能,类似效果如Chrome的右侧调试台样式: 大概思路为: 1.使用mousemove()方法,将鼠标的位置 ...

  4. Python高级特性——切片（Slice）

    摘录廖雪峰网站 定义一个list: L = ['haha','xixi','hehe','heihei','gaga'] 取其前三个元素: >>> L[0],L[1],L[2] (' ...

  5. [转载] redis学习入门 Redis 3.2.100

    参考博客: https://blog.csdn.net/flyer_tang/article/details/80320974 https://blog.csdn.net/weixin_3077313 ...

  6. 使用Visual Studio Code进行远程开发

    微软的VS code能够适应不同开发环境,提供对多种语言的支持,使得使用VS code开发变得很流行了.因为各种原因(比如在本地设置开发环境困难,或者繁琐,或者开发环境没有图形界面),我们可能需要远程 ...

  7. Linux(Centos7)下redis5安装、部署、开机自启

    1.什么是redis redis是用C语言开发的一个开源的高性能键值对(key-value)数据库.它通过提供多种键值数据类型来适应不同场景下的存储需求,目前为止redis支持的键值数据类型如下字符串 ...

  8. 创建以.xxx开头的文件夹的方法

    在windows下创建以.xxx开头的文件夹时,点击确认,系统提示“必须键入文件名”. 最方便的方法: (1)新建文件夹 (3)在文件名.xxxxx后再加一个.,也就是把文件名改成这样子:.XXXXX ...

  9. Linux平台达梦数据库V7单实例安装方式之图形方式

    一 前言 我们在学习任何一个应用时,了解它的最初步骤通常是学会如何进行安装配置,后序才去关心如何使用,学习达梦数据库也是如此,而达梦数据库的安装提供了多种方式,接下来会一一介绍每种安装方式,达梦数据库 ...

  10. 默认值操作符（Freemarker的空值处理）

    默认值操作符: 使用形式例如: userName!default_expr 或 userName! 或 (userName)!default_expr 或 (userName)! 这个操作符允许你为可 ...