1.0.2 • Published 10 months ago
Last release10 months ago
地图应用类组件
越来越多的项目涉及到地图，这些项目里有相同的地图功能，比如：标点、标线等，将这些功能抽出来，分解为多个可重用组件，提高开发效率
使用说明
一、安装依赖
npm i @simonsimone/geomaputils
二、vue项目入口文件调用
在vue项目的入口文件'main.js',写入以下代码：
import geomaputils from '@simonsimone/geomaputils'
import '@simonsimone/geomaputils/lib/geomaputils.css'
Vue.use(geomaputils)
现在，@simonsimone/geomaputils已经安装并且可以在你的项目中使用了。你可以开始使用 @simonsimone/geomaputils提供的组件来构建你的应用界面。
三、组件中使用
1. 地图瓦片组件组件：
<MapContainer :config="configObj" @initMaP="getMapInstance" lngText="Longitude" @mapClick=""/>
| 参数 | 说明 | 类型 | 默认值 |
|---|
| config | 配置项参数 | Object | null |
| lngText | 经度文本（多语言） | String | 经度 |
| latText | 纬度文本（多语言） | String | 纬度 |
| zoomText | 缩放级别文本（多语言） | String | 缩放级别 |
| 事件 | 说明 | 返回参数 |
|---|
| initMaP | 初始化地图 | 地图实例对象(使用this.$nextTick()) |
| mapClick | 地图上的点击的事件 | e |
| mouseMove | 地图上的鼠标移动事件 | e |
| mapZoom | 地图缩放的事件 | e |
| contextmenu | 地图右键菜单时的事件 | e |
| dbClick | 地图上的双击事件 | e |
2. 标点组件：
支持展示tip信息
支持展示不同点类型
支持点击后icon变化
点击、双击事件(返回参数e里已添加点的唯一标识toolId ，可以通过e.target.options.toolId获取)
<MarkPoint :latlng ="latlng"/>
| 参数 | 说明 | 类型 | 默认值 |
|---|
| latlng | 点的经纬度 | Object | null |
| name | 点的名称 空值时不展示浮层 | String | '' |
| type | 点的类型 (0:融合点；1:雷达点 3:无人机；默认：坐标点) | Number | null |
| toolId | 点的唯一标识 | | new Date().getTime() |
| 事件 | 说明 | 返回参数 |
|---|
| click | 单击点的回调 | e |
| dblclick | 双击点的回调 | e |
3. 标线组件：
标线
控制展示tip信息
点击、双击事件(返回参数e里已添加线的唯一标识toolId ，位置：e.target.options.toolId)
<MarkLine :piontArr="piontArr"/>
| 参数 | 说明 | 类型 | 默认值 |
|---|
| piontArr | 点的经纬度数组，一边绘制一边更新此值(realDot:是否是端点，端点会添加圆圈，否则线条跟随鼠标移动） | Array | |
| name | 线的名称 空值时不展示浮层 | String | '' |
| 事件 | 说明 | 返回参数 |
|---|
| click | 单击线的回调 | e |
| dblclick | 双击线的回调 | e |
4. 标注工具popup组件：
标点、标线、标面操作后的命名弹窗
<MarkPop :open = "open" @cancleMarkPop = "" />
| 参数 | 说明 | 类型 | 默认值 |
|---|
| open | 是否显示 | Boolean | FALSE |
| popTitle | 标题区的内容（多语言) | String | 标点信息 |
| labelName | 标签文本的内容（多语言) | String | 名称 |
| value | 输入框的内容，可用于回显 | String | '' |
| cancleText | 取消按钮的文本内容（多语言) | String | 取消 |
| confimText | 确定按钮的文本内容（多语言) | String | 确定 |
| 事件 | 说明 | 返回参数 |
|---|
| cancleMarkPop | 点击取消按钮的回调 | |
| submitMarkPop | 点击提交按钮的回调 | 输入框的内容 |
5. 扇形组件
<MarkSemiCircle :center="center" :radius="radius" :startAngle="startAngle" />
6. 测量转角组件
<MarkAngle :pointsArr="pointsAngle" :showClose="showClose"/>
7. 绘制轨迹组件
<MarkRoute :points="routesPoints" :routeId="routeId"/>
8. 批量标点组件
<MarkMorePoint :info="info" :delAll="delAll"/>
时间原因，部分组件使用方式未做详细说明，详询作者