前言

关于本篇功能实现用到的 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. vue-UI(mui和muit-UI)

    MUI和MUIT-UI 这里使用了连个UI---mui和mit-ui mit-ui是基于vue.js的,而mui是一个高性能前端框架(H5+提供的),类似于bootstrap,所以在引入时区别还是很大 ...

  2. 【第二版】高仿Android网易云音乐企业级项目实战课程介绍

    这是一门付费Android项目课程,我们只做付费课程:同时也感谢大家的支持. 这一节,对本课程做一个简单介绍,以及放一些项目效果图,如果想直接查看项目视频演示,可以直接在腾讯课堂查看[高仿Androi ...

  3. 解决“fatal: 'origin' does not appear to be a git repository...”

    当使用Git进行代码push提交时,出现报错信息“fatal: 'origin' does not appear to be a git repository...”, $ git push -u o ...

  4. javascript学习总结之函数

    前言 在学习javascript函数的时候,有几个经常很容易混淆的方法,call,apply,bind,caller,callee,这些方法的使用,这些也可以说是会频繁使用的一些方法,在此通过查阅相关 ...

  5. badboy脚本录制工具的安装

    一.获取软件包 百度搜索badboy,或者直接访问官网:https://badboy.en.softonic.com/ 点击Download,下载安装包 或者从我的网盘提取: 链接:https://p ...

  6. 设计模式（含UML、设计原则、各种模式讲解链接）

    一.统一建模语言UML UML是一种开放的方法,用于说明.可视化.构建和编写一个正在开发的.面向对象的.软件密集系统的制品的开放方法 UML展现了一系列最佳工程实践,这些最佳实践在对大规模,复杂系统进 ...

  7. HTML入门(html基本文本标签+快捷键讲解以及基本html组成解释)

    id 标签 功能  1  <hr /> 水平分割线  2 <br /> 强制让文本换行  3 <p>段落</p> 段落标签(自带换行效果)  4 < ...

  8. Docker容器镜像打成tar包

    简述需求: 在现在容器上保存镜像进行打包,在另一台服务上使用 首先查看下现有要打tar包的容器 docker ps -a 接下来用commit参数进行保存镜像, -a 提交人的姓名  -m “提交内容 ...

  9. Xcode真机运行报错iPhone has denied the launch request

    1.打开钥匙串 ->Apple Worldwide Developer Relations Certification Authority ->双击 并点击信任->选择使用系统默认2 ...

  10. Mysql 事务及其原理

    Mysql 事务及其原理 什么是事务 什么是事务?事务是作为单个逻辑工作单元执行的一系列操作,通俗易懂的说就是一组原子性的 SQL 查询.Mysql 中事务的支持在存储引擎层,MyISAM 存储引擎不 ...