前言

关于本篇功能实现用到的 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. mysql中msvcr120.dll文件丢失问题

    安装VC++2013 若是以上方法不能解决,需要下载安装VC++2013,这是微软官网的链接 https://www.microsoft.com/zh-cn/download/confirmation ...

  2. Linux.centos安装mysql5.7.18

    一:删除已有的mysql步骤 1 卸载旧的mysql 1.1 查询有哪些mysql文件 [root@zookeeper init.d]# find / -name mysql /var/lock/su ...

  3. IT兄弟连 HTML5教程 CSS3属性特效 文字阴影

    文字阴影是可以叠加的.最基本可以给出四个值,用法如下: text-shadow:x y blur color 文字阴影的参数说明如表1所示. 表1  CSS3文字阴影参数说明 横向偏移量和纵向偏移量可 ...

  4. MongoDB(三)：数据库操作、集合操作

    1. 数据库操作 看完前面的文章,大家应该把环境搭建好了,下面我们就开始学习MongoDB的一些基本操作了. 首先我们要了解的一些要点: MongoDB将数据存储为一个文档,数据结构由键值对(key= ...

  5. 分享几个好看又实用的PPT网站~

    一,优品PPT[http://www.ypppt.com/] 一个有情怀的免费PPT模板下载网站!拥有非常多很精美的PPT模板,分类齐全,我们可以选择自己喜欢的PPT模板下载套用就可以了. 二,扑奔P ...

  6. Class文件结构-常量池

    常量池里存放:1.字面量(Literal) • 文本字符串 • 声明为final的常量值(final的8种基本类型) • 非final的基本类型也可能进(doublefloatlong)2.符号引用( ...

  7. 【转载】C#中decimal保留2位有效小数

    在C#的数字运算过程中,有时候针对十进制decimal类型的计算需要保留2位有效小数,针对decimal变量保留2位有效小数有多种方法,可以使用Math.Round方法以及ToString先转换为字符 ...

  8. vue项目在git commit时，使用eslint检测

    用vue-cli3创建新项目可以自定义配置,选择eslint,所以eslint不需要配置, 项目根目录下面生成一个 .eslintrc.js文件,里面可以自定义配置eslint规则 现在在开发的时候, ...

  9. Ubuntu 18.04安装MySQL

    安装 MySQL 服务端 sudo apt-get install mysql-server 等待安装完成. 检查 mysql 服务状态 servive mysql status 登录 mysql 客 ...

  10. solo升级以及自动化更新的方法

    使用solo过程总涉及到更新问题,所以就在这里把solo更新的方法总结一下.希望能给小伙伴们一些帮助.如何选择更新方法主要是跟你的部署方式有关,如果你是通过 docker方式进行部署,那么你可以还可以 ...