效果图
前言
项目中需要使用 ArcGis 来实现地图功能,至于为什么不适用百度、高德,是因为据说 ArcGis 定位会准一点。初次接触 Arcgis for javascript,踩坑之路很舒服,写下来记录下,也希望能够帮到需要的人。
js
基础的入门代码大家可以直接粘贴 ArcGis for javascript 绘制线!!! 中的例子,这里不做赘述。
// 创建图形点
const pointGraphic = new Graphic({
geometry: {
type: 'point',
// 点的位置
longitude: 117.129359,
latitude: 31.839979
},
symbol: {
// 类型有 图片标记 和 点
type: 'picture-marker',
// 图片地址,可以网络路径或本地路径(PS:base64亦可)
url: require('@/assets/img/view-start.png'),
// 图片的大小
width: '32px',
height: '48px'
},
attributes: {
Foo: 'Hello world!'
}
})
// 将图形添加到视图的图形层
this.view.graphics.addMany([pointGraphic])
// 给 “地图视图” 绑定点击事件
this.view.on('click', e => {
// hitTest 方法在点击位置上如果存在 Graphic(线或点),即可获取 Graphic 对象的整个数据
this.view.hitTest(e)
.then(res => {
if (res.results.length) {
// 获取每个图形上的ID
this.$message.info(JSON.stringify(res.results[0].graphic.attributes))
}
})
})
核心要点
PictureMarkerSymbol
是 Symbol
对象的一个类型,可以指定一个 url 用于在该点上绘制自定义图标。
hitTest
方法返回一个 Promise
,返回与指定屏幕坐标相交的每个图层中最顶层的要素(PS:官方原话)。
源码地址