ArcGis for javascript 绘制线！！！

效果图

在线预览

前言

项目中需要使用 ArcGis 来实现地图功能，至于为什么不适用百度、高德，是因为据说 ArcGis 定位会准一点。初次接触 Arcgis for javascript，踩坑之路很舒服，写下来记录下，也希望能够帮到需要的人。

安装

 yarn add esri-loader

或者引入官方的资源快速上手

<linkrel="stylesheet"href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.16/"></script>

html

<template><div id="map" :style="mapLayout"></div>
</template>

js

import { loadModules } from 'esri-loader'
import { mapState } from 'vuex'export default {name: 'PolylineMap',data () {return {view: null}},computed: {...mapState({mapLayout: state => {return {width: '100%',height: state.layoutHeight - 48 + 'px'}}})},mounted () {loadModules(['esri/Map', 'esri/views/MapView', 'esri/Graphic'], { css: true }).then(([ArcGISMap, MapView, Graphic]) => {// 配置地图的底图const map = new ArcGISMap({// 地图IDbasemap: 'osm'})// 地图视图对象this.view = new MapView({// 容器container: document.getElementById('map'),// 中心点center: [117.179359, 31.839979],map: map,// 缩放zoom: 14})// 创建线几何const polyline = {type: 'polyline',// 二维数组，每个元素是一个地点的经纬度，点越多路线越精准paths: [[117.129359, 31.839979],[117.128810, 31.839979],[117.128810, 31.832240],[117.227610, 31.833600]]}// 路径的属性定制const lineSymbol = {type: 'simple-line', // 类型color: '#1e80ff', // 颜色 rgb or rgba [255, 0, 0, 0.5] or 16进制width: 3 // 宽度 px}const polylineGraphic = new Graphic({geometry: polyline,symbol: lineSymbol})// 创建线几何2const polyline2 = {type: 'polyline',// 二维数组，每个元素是一个地点的经纬度，点越多路线越精准paths: [[117.119359, 31.849979],[117.118810, 31.849979],[117.118810, 31.842240],[117.217610, 31.843600]]}// 路径的属性定制const lineSymbol2 = {type: 'simple-line', // 类型color: '#8c3de5', // 颜色 rgb or rgba [255, 0, 0, 0.5] or 16进制width: 3 // 宽度 px}const polylineGraphic2 = new Graphic({geometry: polyline2,symbol: lineSymbol2})// 将图形添加到视图的图形层this.view.graphics.addMany([polylineGraphic, polylineGraphic2])})},beforeDestroy () {this.view = null}
}

实现原理

代码实现了最简单的功能，注释写的挺详细。需要了解一些 ArcGis js 的一些基本概念：底图和 Graphic，前者可以定义街道地图、卫星图、地形图等，后者则可以给地图绘制一些标记（线、点等）。
源码地址

参考

ArcGis 官方绘制点、线、面的 Demo
ArcGis javascript api 总览

ArcGis for javascript 绘制线！！！相关推荐

ArcGIS API for JavaScript——绘制工具（Draw）
ArcGIS API for JavaScript--绘制工具(Draw) 在WEB GIS开发过程中,我们不可避免的会用到绘制工具.比如利用绘制工具执行查询任务和利用绘制工具绘制空间分析的处理范围等 ...
利用Arcgis for javascript API绘制GeoJSON并同时弹出多个Popup
1.引言由于Arcgis for javascript API不可以绘制Geojson,并且提供的Popup一般只可以弹出一个,在很多专题图制作中,会遇到不少的麻烦.因此本文结合了两个现有的Arcg ...
arcgis for android: 绘制带流向箭头的线
arcgis for android: 绘制带流向箭头的线需求描述项目中需要绘制如下图所示的线,但arcgis for android中linesymbol只提供了单箭头/颜色/实虚线等简单配置项 ...
ArcGis For JavaScript API Drawing Tool (绘图工具又称框选地图)
描述: 您可以使用绘图工具栏绘制在地图上的多种几何形状.. 在线演示:http://help.arcgis.com/en/webapi/javascript/arcgis/samples/toolba ...
arcgis for javascript 帮助
JS API3.4的要求 à(1) IE9或以上版本否则dijit1.8.3不匹配 1.如何发布ArcgisJavascript API应用 0.准备工作: (1).有web应用: (2).有js ...
在Arcgis地图上绘制Echarts热力图(Heatmap)
在Arcgis地图上绘制Echarts热力图(Heatmap) 2018-08-30 10:18 [原创]本文地址:https://www.cnblogs.com/qiaoge0923/p/95623 ...
用javascript绘制雪花（Koch曲线）
图1-1 雪花图形前两天在一个网页上看到了雪花,感觉很漂亮,就搜索了下,发现了这个Koch曲线(大概很多人都早就知道(︸_︸)),看上去很漂亮,简单的分形,简洁 ...
R语言ggplot2可视化绘制线图（line plot）、使用gghighlight包突出高亮满足条件的线图、并保留其它线图的色彩（而不是灰色）自定义非高亮线图的透明度
R语言ggplot2可视化绘制线图(line plot).使用gghighlight包突出高亮满足条件的线图.并保留其它线图的色彩(而不是灰色)自定义非高亮线图的透明度目录
R语言ggplot2可视化绘制线图（line plot）、使用gghighlight包突出高亮线图的满足条件的线图、设置高亮线图不显示默认自动显示的文本标签（use_direct_label）
R语言ggplot2可视化绘制线图(line plot).使用gghighlight包突出高亮线图的满足条件的线图.设置高亮线图不显示默认自动显示的文本标签(use_direct_label = FA ...

ArcGis for javascript 绘制线！！！

效果图

前言

安装

html

js

实现原理

参考

ArcGis for javascript 绘制线！！！相关推荐

最新文章

热门文章