背景:
通过openlayer库,可以在地图上实现绘制点、线、面。
并把绘制的结果添加到我的标注的弹框。
我的标注功能,包括:我的标注查询结果的数据展示;添加分组;添加我的标注;编辑分组、删除分组;以及分组下的对应的所有我的标注信息,操作包括:定位、编辑、删除、收藏等功能。
效果展示:
一、实现步骤
1.权限问题:登录成功后才能使用“我的标注”功能
2.“我的标注”按钮绑定事件,打开“我的标注”页面
3.我的标注页面,静态布局以及页面逻辑
二、添加我的标注
这一块是重点。打开“添加我的标注”的页面,初始化触发drawType(2)绘制面的方法,即默认绘制面。其它的,我们还可以绘制点、线、面、圆、矩形等。
以下从几点描述此功能:
1.触发drawType()方法,开始绘制;并且在开始绘制、结束绘制添加信息helpTips帮助信息提示框,包括:单击开始绘制、双击结束绘制、单击第一个点结束绘制等提示语言。
2.标注类型,选中高亮状态,并且触发对应的绘制方法。
3.标注样式,分为两种:绘制点,可以更换标注的图标icon;绘制几何图形,通过颜色选择器colorpicker组件,可以更换颜色color
4.绘制结束,把绘制的几何要素的经纬度进行回填(做一个展示)
5.依次验证所填写的表单项。点击提交,传参,接口请求成功。
效果展示: