背景
工作上需要对展示的地图添加标注。该标注非临时,需要存储在数据库中,主要在特定区域进行信息备注。
需求整理
地图加载完成后,获取标注信息,然后渲染在地图上。使用圆点标注,点击圆点后弹出框显示备注信息。
实现
数据需要存储圆点位置,因为地图是自制地图(没有具体经纬度),所以存储圆点的X、Y、Z和备注remark以及相关区域i唯一字段id。
遇到的问题
官网案例1MapView使用的是经纬度,官网案例2SceneView使用的是X,Y,Z。但是我使用的地图是MapView
。
解决方法
html上直接添加点(第一种方法)
第一种方法是将数据位置存储在非图形数据库中,和图形没有关联
主要是将点的位置坐标存储在数据库中即可。
但是案例还是可以参考的,可以知道圆点的大概使用。也从案例上知道最重要的还是Point,在Point的相关使用方法和在官方示例的引导下,我改了下添加圆点的代码。最后的效果图如下:
源代码:https://codepen.io/tanglu/pen/mdOYNqq
说明:我这里还是点击添加圆点,实际使用的时候需要改变交互(比如只有右键的时候才添加圆点),否则体验感很差
有弹窗的添加备注(第二种)
该例中使用了vue。主要交互是用户右键地图某区域弹出备注填写框,提交后地图更新。
该种方法是在arcgis中新建了数据集,然后调用arcgis的featureLayer中的applyEdits方法对数据集进行操作。这种方式比较好一点(就算以后地图升级啥的也不会有很大的影响)