前言

关于本篇功能实现用到的 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基础语法---函数作为返回值使用

    结论:函数是可以作为返回值使用的 function f1() { console.log("f1函数调用了"); return function() { console.log(& ...

  2. 软件开发工具（第13章： Eclipse插件的使用与开发）

    一.插件简介 插件的定义(了解) 插件是一种遵循其所依附的软件的接口规范所编写出来的程序. 插件实际上是对原有软件的扩展,替应用程序增加一些所需要的特定 功能. 插件的构成(重点.记忆) 每个插件都由 ...

  3. 如何在windows下安装linux双系统

    首先是看这篇博客,讲得很详细,但是有一点小小的区别,这里把整个过程回顾一下. https://www.cnblogs.com/masbay/p/10745170.html 第一步,刻盘,将一个u盘刻录 ...

  4. 互联网大厂Java面试题集—Spring boot面试题（一）

    Spring Boot 需要独立的容器运行吗? 可以不需要,内置了 Tomcat/ Jetty 等容器.通过pom.xml中导入依赖: <!--spring-boot-starter-web:代 ...

  5. Jmeter常用的两大性能测试场景

    一.阶梯式场景 该场景主要应用在负载测试里面,通过设定一定的并发线程数,给定加压规则,遵循“缓起步,快结束”的原则,不断地增加并发用户来找到系统的性能瓶颈,进而有针对性的进行各方面的系统优化. 使用到 ...

  6. 4.Ansible Task控制

    1.tag标签(调试) --skip-tags install_nfs 跳过此标签 -t 指定标签名 [root@manager tasks]# cat task_nfs.yml - hosts: w ...

  7. 从零开始学vuejs

    最近一段时间都花在了学习vue上,还总是断断续续的,学习的效果不是很明显,思考了好久了,应该是没有进行一个系统的总结,导致很多知识点总是似是而非,而且也有一部分是思维还没有从java转变过来,废话不多 ...

  8. zabbix获取一周内各个等级告警的次数

    # encoding:UTF-8 import xlsxwriter import datetime import pymysql import numpy as np import pandas _ ...

  9. Fiddler常用设置

    1.设置抓取HTTPS请求 勾选后弹窗添加证书确认框 点击yes后,弹出警告 点击是,成功添加证书 点击OK确认,设置成功了 成功抓取到HTTPS请求 2.自定义会话框,展示GET和POST请求 3. ...

  10. 使用可移动表空间(TTS)的最佳做法 (Doc ID 1457876.1)

    Best Practices for Using Transportable Tablespaces (TTS) (Doc ID 1457876.1) APPLIES TO: Oracle Datab ...