在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:hit-map-npm开源软件地址:https://gitee.com/learningCommissary/hit-map-npm开源软件介绍:[TOC]持续更新... #hit-map2021-04-12 17:13:27 星期一版本信息:v1.1.7项目描述:基于vue2.x + openlayers6.x的二次封装,不需要深入接触openlayers原生就可以搭建地图,方便其他同事使用,加快地图开发速度源码地址:Gitee 引入方法npm下载 npm install hit-map main.js配置import HitMap from 'hit-map'import 'hit-map/dist/hit-map.css'Vue.use(HitMap) ##地图初始化组件地图实例化组件,必须引入,是所有组件的入口 hit-map
地图瓦片组件map -使用方法<hit-map ref="hitMap" :mapUrl="mapUrl" :center="[111, 23]" :zoom="10"></hit-map> map - 可选参数
##圆形组件圆形图形图层,一个组件相当于一个图层,以插槽的形式插入hit-map hit-map-circle 圆形区域组件circle - 使用方法<hit-map-circle :data="data" name="circle" /> circle - datadata数据示例//单个图形data: { center: [111, 23], radius: 10,}//多个图形data: [ { center: [111, 23], radius: 10, }, { center: [111.11, 23], radius: 10, }] circle - 可选参数
circle - Event
##多边形组件多边形形图形图层,一个组件相当于一个图层,以插槽的形式插入hit-map hit-map-polygon 矩形区域组件polygon - 使用方法<hit-map-polygon :data="data" name="polygon" /> polygon - data数据示例//[经度, 纬度]//单个图形data: [ [111.777, 23], [111.5678, 23.22], [111.7869, 23.33], [111.55, 23.44], [111, 23],]//多个图形data: [ [ [111.777, 23], [111.5678, 23.22], [111.7869, 23.33], [111.55, 23.44], [111, 23] ], [ [111.555, 23], [111.5678, 23.22], [111.7869, 23.33], [111.55, 23.44], [111, 23] ], ...] polygon - 可选参数
polygon - Event
##路径组件路径图形图层,一个组件相当于一个图层,以插槽的形式插入hit-map hit-map-line 路径/线组件line - 使用方法<hit-map-line :data="data" name="line" /> line - data数据示例//[经度, 纬度]//单条路径data: [ [111.777, 23], [111.5678, 23.22], [111.7869, 23.33], [111.55, 23.44], [111, 23],]//多条路径data: [ [ [111.777, 23], [111.5678, 23.22], [111.7869, 23.33], [111.55, 23.44], [111, 23] ], [ [111.555, 23], [111.5678, 23.22], [111.7869, 23.33], [111.55, 23.44], [111, 23] ], ...] line - 可选参数
line - Event
##标记覆盖物组件路径图形图层,一个组件相当于一个图层,以插槽的形式插入hit-map hit-map-marker 坐标点覆盖物组件marker - 使用方法<hit-map-marker :data="data" name="line" /> marker - data数据示例//单个坐标点data: { longitude: 111, latitude: 23, name: '杨正一号', age: 37,}//多个坐标点data:[ { longitude: 111, latitude: 23, name: '杨正一号', age: 37, }, { longitude: 111.333, latitude: 23, name: '杨正二号', age: 37, // 支持每个点单独设置样式 style: { text: '杨正二号', // 需要显示的文字 fontSize: 16, // 文字的大小 offsetY: -220, // 文字的Y轴偏移 offsetX: 0, // 文字的X轴偏移 color: '#fff', // 文字的颜色 icon: vueIcon, // 文字的图标(支持base64, 优先级高于图层设定的icon) }, },] marker - 可选参数
marker - Event
##信息覆盖物组件信息覆盖物组件,可配合各图层的click事件中返回的数据使用,也可单独使用,支持插槽 hit-map-overlay
信息框覆盖物组件overlay - 使用方法<hit-map-overlay :position="position" content="content" > <slot></slot></hit-map-overlay> overlay - data数据示例position: [111, 23], // [经度, 纬度]content: '杨正一号' overlay - 可选参数
地图绘制组件目前提供圆、多边形、线的绘制工具(后续更新),工具支持移动、折叠、清除等功能,直接引入即可 hit-map-draw draw - 使用方法<hit-map-draw /> draw - Event
##轨迹移动组件轨迹移动组件,是用于展示行进轨迹的组件,允许在坐标移动过程中增加新行进目标坐标点 hit-map-track 轨迹跟踪组件track - 使用方法<hit-map-track :data="data" /> track - data数据示例// [经度, 纬度]data: [ [111.23423, 23.345], [111.75445, 23.56446], [111.4324, 23.54356], [111.988, 23.5646], [111.2177, 23.78675], [111.5657, 23.23432], [111.6574, 23.6457], ...] track - 可选参数
##热力图组件热力图组件组件,是用来呈现一定区域内的统计度量,最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。 hit-map-heat 热力图组件heat - 使用方法<hit-map-heat :data="data" /> heat - data数据示例data: [ { longitude: 111, // 经度 latitude: 23, // 纬度 weight: 0.2 // 该坐标点的权重值(0-1之间的小数) }, { longitude: 111.3434, // 经度 latitude: 23.54674859, // 纬度 weight: 0.45 // 该坐标点的权重值(0-1之间的小数) } ...] heat - 可选参数
风场组件显示地图风场的图层 hit-map-wind wind - 使用方法<hit-map-draw :data="data" /> |
请发表评论