Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

microvideo-map

Package Overview
Dependencies
Maintainers
1
Versions
47
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

microvideo-map

这里是感动科技有限公司软件研发部指挥调度线基于高德SDK和vue开发的一款适用于公司相关指挥调度项目的地图组件。

  • 0.2.7
  • npm
  • Socket score

Version published
Weekly downloads
4
decreased by-42.86%
Maintainers
1
Weekly downloads
 
Created
Source

Mv Map

介绍

这里是感动科技有限公司软件研发部指挥调度线基于高德SDK和vue开发的一款适用于公司相关指挥调度项目的地图组件。

地图组件开发文档

特性

  • 快速搭建地图页面,兼容高德2.0和1.4.15版本
  • 多种图例选择,绘制海量点、路线等图层
  • 地图各种sdk便捷使用
  • 地图图标配置化
  • 地图主题切换
  • 地图弹框便捷使用,配置主题
  • 用户可自定义业务sdk配置

后台服务地址

下载地址

ssh://git@lab.microvideo.cn:8022/zhdd/xtzhdd-system.git 

git地址


快速开始

安装与使用

1.安装

npm i microvideo-map

2.使用

在程序执行入口配置文件 以vue2 main.js为例

// 引入microvideo-map
import MvMap from 'microvideo-map';

// 注册使用
Vue.use(MvMap,{
    initMapConfig: Object,
    fetchConfig: Object,
    mapIconConfig: Array,
    businessSdk:Array
})

在需要加载地图的页面里使用MvMap组件

<template>
  <mv-map>
    <!-- 这里可以放置其他的组件代码 -->
  </mv-map>
</template>

vue3 配置方式

main.js

import { createApp } from 'vue'
import App from './App.vue'

import MvMap from 'microvideo-map'

const app = createApp(App)

app.use(MvMap,{
    initMapConfig: Object,
    fetchConfig: Object,
    mapIconConfig: Array,
    businessSdk:Array
})

配置说明

1.initMapConfig 地图初始化配置参数

type:[Object] 非必传

initMapConfig:{
    key              地图 AppKey
    v                 地图版本号   默认 - 1.4.15
    uiVersion         地图版本对应的UI组件版本号  默认 - 1.1
    securityJsCode    地图安全密钥(自定义地图样式使用)
}

2.fetchConfig 地图业务层请求配置

type:[Object] 非必传

{
    baseUrl: '', // 请求地址 默认http://jtqg.gandongyun.cn/map
    headers:{},  // 请求头
}

3.mapIconConfig 地图打点图标配置

type:[Array] 非必传

例:

mapIconConfig:[
    {
        name: 'icon-zl-sn', // 图标名
        url: require('../assets/images/map/icon/icon-zl-sn.png') // 图标地址
    },
    {
        name: 'icon-zl-sfz',
        url: require('../assets/images/map/icon/icon-zl-sfz.png')
    }
]

4.businessSdk 全局业务Sdk配置

type:[Array] 非必传

// 组件已有mvSdk,可引入
import mvSdk from 'mv-map/lib/sdk/business-sdk/mv-sdk'
// 可自己创建sdk
import DemoSdk from './lib/demo-sdk'

// 业务sdk配置
businessSdk: [{
            sdkName: 'demo',
            sdkClass: DemoSdk
        },
        {
            sdkName: 'mv',
            sdkClass: mvSdk
        }
    ]

例:demo-sdk.js

/**
 * @description demo业务sdk配置
 * @author      朱琦
 * @date        2022/3/2
 */
class DemoSdk {

  init(mapSdk) {
      this.mapSdk = mapSdk;
      return this;
  }

}

const newInstance = () => {
  return new DemoSdk()
} 

export default newInstance

MvMap

MvMap 是mv-map插件最核心的组件,使用该组件可以调用地图相关的Api

使用

在需要应用地图的地方引入

<template>
  <mv-map 
    ref="mvMap"
    :mapConfig="mapConfig"
    :businessSdkConfig="businessSdkConfig"
    @map-load="mapLoad">
  </mv-map>
</template>

属性

props:id

type: [String:'mv-map'] 地图唯一标识

当页面只有一个地图时,id可不传,默认值为mv-map 多个地图时可设置不同的id来区分,以便调用不同地图的sdk

props:mapConfig

type:[Object] 创建地图配置项

mapConfig类型说明
themeString地图主题配置 dark(默认), light
zoomNumber地图显示层级
zoomsArray地图显示层级范围
centerArray地图中心点

全部参数

props:businessConfig

type:[Object] 地图业务配置项

businessConfig类型说明
roadTypeString地图业务路网类型
areaConfigObject地图显示省市县地区配置
sdkConfigArray地图业务sdk配置

areaConfig 详细配置说明

areaConfig类型说明
codeString区域code 默认江苏省 320000
depthNumber层级类型 0:省级 1:市级 2:县级
fillColorString中国地级市填充色
cityBorderColorString中国地级市边界颜色
countyBorderColorString中国区县边界颜色
outsideFillObject是否需要绘制外界遮罩 有该参数以下参数有效
outsideFill.strokeColorString边界颜色
outsideFill.strokeBorderWidthNumber边界宽度
outsideFill.fillColorString图层遮罩颜色
outsideFill.fillOpacityString图层遮罩颜色
outsideFill.fillColorNumber图层遮罩透明度
outsideFill.bubbleString图层遮罩是否允许点击事件冒泡 默认false

事件

emit:map-load

/**
  * 地图初始化完成
  * @param {Object} map 地图实例
  */
mapLoad (map) {
  this.map = map
  // 这里可以开始调用地图初始化后需要执行的方法
},

方法

getBusinessSdk(sdkName)

根据业务名获取业务sdk

this.mvBusinessSdk = this.$refs.mvMap.getBusinessSdk('mv')

themeChange(theme)

主题切换 目前已有主题 dark,light 默认主题是dark

// 切换成light主题
this.$refs.mvMap.themeChange('ligh')

queryParamChange(params)

修改 图例接口传参

this.$refs.mvMap.queryParamChange({})

MvMapIcon

MvMapIcon 是一个可配置的图例按钮组件,可根据不同model来绘制海量点或路线等功能

使用

在MvMap组件内引入

例:

<template>
  <mv-map 
    ref="mvMap">
    <!-- 路况图例 -->
    <mv-map-icon
      iconConfig="lk"
      @layer-click="layerClick"
    ></mv-map-icon>
    <!-- 摄像头图例 -->
    <mv-map-icon
      :iconConfig="{type:'sxt',tooltipPostiton:'bottom'}"
      @layer-click="layerClick"
      @point-click="pointClick"
      @load-layer="loadLayer"
    ></mv-map-icon>
    <!-- 自定义图例 -->
    <mv-map-icon :iconConfig="iconConfig"></mv-map-icon>
  </mv-map>
</template>

<script>
export default {
  data () {
    return {
      iconConfig:{
        type:'custom',
        name:'自定义图例',
        img:[require('@/assets/images/mv-map-img/icon-fwq.png'),require('@/assets/images/mv-map-img/icon-ddzx-active.png')]
      }
    }
  }
}
</script>

业务图例公用配置

nametypemode
路况lklk
摄像头sxtpoint
情报板qbbpoint
交调点jddpoint
道路事件dlsjpoint
清障qzpoint
工区gqpoint
服务区fwqpoint
收费站sfzpoint
汽渡qdpoint
ETCetcpoint
停车区tcqpoint
枢纽snpoint
桥梁qlpoint
隧道sdpoint
路线lxline
桩号zhpoint
救援车辆jyclpoint
警车jcpoint
执法车zfcpoint
雷雨云层lyycpoint
气象点qxdpoint

属性

props:iconConfig

type: [String | Object] 图例配置

iconConfig 为String 代表图例类型

iconConfig 为Object时参数:

iconConfig类型说明
typeString图例类型
modelString图层类型 非必传,可取'point'(海量点),'line'(路线),'lk'(路况)
imgArray图例图片配置,默认和选中两个图片
activeBoolean图例是否默认选中加载数据 默认false
cacheBoolean图例是否缓存数据 默认false
tooltipShowBoolean图例是否显示提示框 默认true
tooltipPostitonString提示框位置 可选 'top'(默认),'bottom'
widthString图例宽度 默认'2.5vw'
heightString图例高度 默认'2.5vw'
fitViewBoolean是否在绘制后自动调整地图视野以适合全部轨迹,默认false。
iconFilterArraymodel为point时图层 打点尺寸
iconSizeArray 或 Functionmodel为point时图层 打点尺寸
queryParamObject图例接口传参
queryDataPromise图例获取数据方法

queryData 是一个Promise对象 返回数据格式如下:

{
  status:0,
  data:[]
}

// iconConfig.model = 'point',data 的数据格式
[{
  id:'1',
  name:'名称',
  path:[119.206742, 32.464552],
  icon:'icon-gl-qbb'
}]

// iconConfig.model = 'line',data 的数据格式
[{
  id:'1',
  name:'名称',
  path:[[119.206742, 32.464552],[119.206742, 32.464552]],
  config:{
    lineWidth:'6', // 线宽度
    lineColor:'red', // 线颜色
    selectWidth:'red', // 选中线宽度
    selectColor:'red', // 选中线颜色
  }
}]

isChecked

type:[Boolean] 图例是否选中

data

type:[Array] 图例数据

layer

type:[Object] 图例图层

事件

emit: layer-click

图例点击事件触发

参数

  • config:[Object] 图例的iconConfig
  • isChecked:[Boolean] 图例是否选中

emit: load-layer

图例加载数据queryData 回调

参数

  • status:[String] 'start' 开始加载数据 'error' 数据加载报错 'end' 数据加载结束

emit: point-click

图例图层点位点击回调

参数

  • event:{type:String} 事件
  • point:{pointIndex:number, pathIndex:number, pathData:* } 节点相关信息
  • config:[Object] 图例的iconConfig

emit: query-callback

model 未定义 (或者不是 'point','line','lk') 加载数据queryData 回调

参数

  • res:[Object] 加载数据queryData 返回结果
  • config:[Object] 图例的iconConfig

方法

onIconClick

切换图例是否选中状态,图层显示与否


MvMapMenu

MvMapMenu 是一个可配置的菜单组件,将多个MvMapIcon组合成而成,默认显示所有基础功能图例

使用

在MvMap组件内引入

例:

<template>
  <mv-map 
    ref="mvMap">
    <!-- 默认菜单 -->
    <mv-map-menu
      @layer-click="layerClick"
      @point-click="pointClick"
      @load-layer="loadLayer"
      @query-callback="queryCallback"
    ></mv-map-menu>
    <!-- 自定义菜单 -->
    <mv-map-menu
      :menuConfig="menuConfig"
      @layer-click="layerClick"
      @point-click="pointClick"
      @load-layer="loadLayer"
      @query-callback="queryCallback"
    ></mv-map-menu>
  </mv-map>
</template>

<script>
export default {
  data () {
    return {
      menuConfig:{
        topConfig: [
          'lk','sxt',
          {
            type:'custom',
            name:'自定义图例',
            img:[require('@/assets/images/mv-map-img/icon-fwq.png'),require('@/assets/images/mv-map-img/icon-ddzx-active.png')]
          }
        ],
        leftConfig: ['gq', 'fwq'],
        bottomConfig: ['sn', 'ql'],
        className: 'demo-menus-box' // 图标菜单组件class
      }
    }
  }
}
</script>

<style scoped>
.demo-menus-box{
  left: 70%;
}
</style>

默认菜单配置参数

{
  topConfig: ['lk','sxt','qbb','jdd','dlsj','jycl','jc','zfc'],
  leftConfig: ['gq', 'fwq', 'sfz', 'qd', 'etc', 'tcq'],
  bottomConfig: ['sn', 'ql', 'sd', 'lx', 'zh'],
  menuWidth: '2.5vw', // 菜单按钮宽
  menuHeight: '2.5vw', // 菜单按钮高
  className: 'mv-menu-box' // 图标菜单组件class
}

事件

emit: layer-click

图例点击事件触发

参数

  • config:[Object] 图例的iconConfig
  • isChecked:[Boolean] 图例是否选中

emit: load-layer

图例加载数据queryData 回调

参数

  • status:[String] 'start' 开始加载数据 'end' 数据加载完成

emit: point-click

图例图层点位点击回调

参数

  • event:{type:String} 事件
  • point:{pointIndex:number, pathIndex:number, pathData:* } 节点相关信息
  • config:[Object] 图例的iconConfig

emit: query-callback

model 未定义 (或者不是 'point','line','lk') 加载数据queryData 回调 参数

  • res:[Object] 加载数据queryData 返回结果
  • config:[Object] 图例的iconConfig

MvMapDialog

MvMapDialog 是地图弹框,可传递经纬度在相应的地方打开弹框,已配置两种主题

使用

在MvMap组件内引入

例:

<template>
  <mv-map 
    ref="mvMap">
    <!-- 图例 -->
    <mv-map-icon
      v-for="item in iconConfigArr"
      :key="item.type"
      :iconConfig="item"
      @layer-click="layerClick"
      @point-click="pointClick"
      @load-layer="loadLayer"
    ></mv-map-icon>

    <!-- 弹框 -->
    <mv-map-dialog
      ref="mapDialog"
      v-show="currentType"
      :title="currentData.name"
    >
      <div>{{ currentData.name }}</div>
    </mv-map-dialog>
  </mv-map>
</template>

<script>
export default {
  data () {
    return {
      iconConfigArr: ['sxt', 'qbb'],
      currentType: null,
      currentData: {}
    }
  },
  methods: {
    /**
     * 图例点击事件
     */
    layerClick (config, checked) {
      if (checked) {
        // 打开图例
      } else {
        // 关闭图例
        this.currentType === config.type && (this.currentType = null)
      }
    },

    /**
     * 图例 图层接口调用状态回调
     */
    loadLayer (status) {
      console.log('图层加载数据' + status)
    },

    /**
     * 图例 图层 地图点位 点击事件回调
     */
    pointClick (e, data, config) {
      this.currentType = config.type
      this.currentData = { ...data.data }

      this.$refs.mapDialog.openDialog(['20vw', '20vh'], data.data.path)
    }
  }
}
</script>

事件

emit: closeMapDialog

关闭弹框触发

方法

openDialog

显示弹框

参数

  • size:[Array] 弹框尺寸 默认['5vw', '10vh']
  • lngLat:[Array] 弹框显示经纬度 [lon,lat]
  • offset:[Array] 弹框偏移量 [Int,Int] 默认[15, 0]
  • className:[String] 弹框class 默认是当前主题class

基础操作

使用

例:

<template>
  <div>
    <!-- 引入地图 设置地图id -->
    <mv-map ref="demoMap" @map-load="mapLoad" id="demoMap"> </mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="mapMove">地图移动(设置中心点)</a-button>
    <a-button type="primary" @click="getMapCenter">获取中心点</a-button>
    <a-button type="primary" @click="setMapZoom">设置层级</a-button>
    <a-button type="primary" @click="setBounds">设置显示范围</a-button>
    <a-button type="primary" @click="setLimitBounds">设置可拖动区域</a-button>
    <a-button type="primary" @click="clearLimitBounds">取消可拖动区域</a-button>
    <a-button type="primary" @click="setMvMapFitView(null)">设置视野范围</a-button>
    <a-button type="primary" @click="setMvMapFitView(markers2)">设置指定视野范围</a-button>
    <a-button type="primary" @click="getMvMap()">获取地图实例</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      map:null,
      markers1:null,
      markers2:null
    }
  },
  methods:{
    /**
     * 地图初始化完成
     */
    mapLoad (map) {
      this.createAddMarkers()
    },
    /**
     * 地图移动
     */
    mapMove () {
      let lnglat = [119.378231 + 0.48058 * 1.5 * Math.random(), 32.458852 + 0.60079 * 1.5 * Math.random()]
      this.$mapSdk('demoMap').setMvMapCenterAndZoom(lnglat)
    },
    /**
     * 获取中心点
     */
    getMapCenter () {
      alert('当前地图中心点:' + this.$mapSdk('demoMap').getMvMapCenter())
    },
    /**
     * 设置层级
     */
    setMapZoom () {
      this.$mapSdk('demoMap').setMvMapCenterAndZoom(null, Math.floor(Math.random() * 7) + 5)
    },
    /**
     * 获取层级
     */
    getMapZoom () {
      alert('当前地图层级:' + this.$mapSdk('demoMap').getMvMapZoom())
    },
    /**
     * 设置显示范围
     */
    setBounds () {
      this.$mapSdk('demoMap').setMvMapBounds([118.27467, 32.255442], [119.609509, 31.714976])
    },
    /**
     * 设置可拖动区域
     */
    setLimitBounds () {
      this.$mapSdk('demoMap').setMvMapLimitBounds([118.27467, 32.255442], [119.609509, 31.714976])
    },
    /**
     * 取消可拖动区域
     */
    clearLimitBounds () {
      this.$mapSdk('demoMap').clearMvMapLimitBounds()
    },
    /**
     * 设置视野范围
     */
    setMvMapFitView (layers) {
      this.$mapSdk('demoMap').setMvMapFitView(layers)
    },
    /**
     * 创建标记点
     */
    createAddMarkers () {
      let points1 = [
        { icon: 'icon-gs-sxt', path: [118.206742, 32.464552], name: 'test1'},
      ]
      let points2 = [
        { icon: 'icon-gs-qbb', path: [120.396572, 32.391775], name: 'test3' },
        { icon: 'icon-gl-qbb', path: [119.393509, 32.323953], name: 'test4' },
      ]
      this.markers1 = this.$mapSdk('demoMap').createMvMapMarkerLayer(points1)
      this.markers2 = this.$mapSdk('demoMap').createMvMapMarkerLayer(points2)
    },
    /**
     * 获取地图实例
     */
    getMvMap() {
      this.map = this.$mapSdk('demoMap').getMvMap()
    }
  }
}
</script>

API

getMvMap() 获取地图实例

返回

map 地图实例

setMvMapCenterAndZoom(center, zoom) 地图中心点移动

参数

  • center [lng,lat] 中心点坐标
  • zoom [Array] 层级 非必传

getMvMapCenter() 获取地图中心点

返回

center:[lng,lat] 地图当前中心点经纬度坐标

getMvMapZoom() 获取地图层级

返回

center:[Number] 地图当前层级

setMvMapBounds(southWest, northEast) 设置地图显示范围

参数

  • southWest [lng,lat] 西南角
  • northEast [lng,lat] 东北角

setMvMapLimitBounds(southWest, northEast) 设置地图可拖动区域

参数

  • southWest [lng,lat] 西南角
  • northEast [lng,lat] 东北角

clearMvMapLimitBounds() 清除地图限制拖动区域

setMvMapFitView(layers) 设置视野范围

参数

  • layers [Array] 图层集合

仅支持标记点图层和折线图层


点标记

使用

例:

<template>
  <div>
    <mv-map 
      ref="mvMap">
    </mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="createAddMarkers" >创建标记点</a-button >
    <a-button type="primary" @click="hideMarkers">隐藏标记点</a-button>
    <a-button type="primary" @click="showMarkers">显示标记点</a-button>
    <a-button type="primary" @click="removeMarkers">移除标记点</a-button>
    <a-button type="primary" @click="setMarkerIcon">修改标记点图标</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      markers: null,
    }
  },
  methods:{
    /**
     * 创建标记点
     */
    createAddMarkers () {
      let points = [
        { icon: 'icon-gs-sxt', path: [119.206742, 32.464552], name: 'test1', size: [38, 42] },
        { icon: 'icon-gl-sxt', path: [119.349907, 32.388627], name: 'test2' },
        { icon: 'icon-gs-qbb', path: [119.401749, 32.386017], name: 'test3' },
        { icon: 'icon-gl-qbb', path: [119.393509, 32.323953], name: 'test4' },
        <!-- 自定义内容 标记点 -->
        { content: '<div class="marker-icon">点</div>', path: [119.493416, 32.410657], name: 'test5', offset: [-15, -30] }
      ]
      this.markers && this.removeMarkers()
      this.markers = this.$mapSdk().createMvMapMarkerLayer(points, (e, data) => {
        alert('你点击了' + data.name)
      })
    },
    /**
     * 隐藏标记点
     */
    removeMarkers () {
      this.markers = this.$mapSdk().removeMvMapMarkerLayer(this.markers)
    },
    /**
     * 显示标记点
     */
    showMarkers () {
      this.$mapSdk().showMvMapMarkerLayer(this.markers)
    },
    /**
     * 移除标记点
     */
    hideMarkers () {
      this.$mapSdk().hideMvMapMarkerLayer(this.markers)
    },
    /**
     * 修改标记点图标
     */
    setMarkerIcon() {
      if (!this.markers) return
      this.markers.map(marker => {
        this.$mapSdk().setMvMapMarkerStyle(marker,'icon-gs-fwq')
      })
    }
  }
}
</script>
<style>
.marker-icon {
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: yellow;
  color: #4e4e4e;
  border-radius: 50%;
  text-align: center;
}
</style>

API

createMvMapMarkerLayer(data, callback) 创建标记点

参数

1.data:[Array]

data类型说明
nameString标记点名称
iconString标记点图标名
sizeString标记点图标 尺寸
pathArray经纬度 [lng,lat]
offsetArray偏移量
callback:[Function] 标记点 click触发

2.callback(e, point)

  • event:{type:String,lnglat} 触发事件对象
  • point:{name,path...} 标记点相关信息

返回

markers [Array] 多个标记点实例

removeMvMapMarkerLayer(markers) 移除标记点

参数

markers:[Array] 多个标记点实例

showMvMapMarkerLayer(markers) 显示标记点

参数

markers:[Array] 多个标记点实例

hideMvMapMarkerLayer(markers) 隐藏标记点

参数

markers:[Array] 多个标记点实例

setMvMapMarkerStyle(marker, icon) 修改标记点图标

参数

  • marker:[Object] 标记点实例
  • icon:[String | Object] 图标名称,或图标配置
icon类型说明
iconString图标名称
sizeArray图标尺寸

文本标记

使用

例:

<template>
  <div>
    <mv-map ref="mvMap" :mapConfig="mapConfig"> </mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="createTextMarker" >创建文本标记</a-button>
    <a-button type="primary" @click="hideTextMarker">隐藏文本标记</a-button>
    <a-button type="primary" @click="showTextMarker">显示文本标记</a-button>
    <a-button type="primary" @click="removeTextMarker">移除文本标记</a-button>
    <a-button type="primary" @click="setTextMarker">设置文本标记</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mapConfig: {
        zoom: 11,
        center: [120.235403, 31.420177]
      },
      textMarkers: null
    }
  },
  methods:{
    
    /**
     * 创建文本标记
     */
    createTextMarker () {
      this.textMarkers && this.removeTextMarker()
      const data = [{
        text: '太湖隧道',
        offset: [0, 20],
        path: [120.178245, 31.447435],
        style: {
          width: '100px',
          height: '30px',
          backgroundColor: 'rgba(6,253,201,0.3)',
          border: '1px solid #06fdc9',
          color: '#c3fff2',
          fontSize: '16px',
          borderRadius: 0,
          lineHeight: '28px',
          textAlign: 'center'
        }
      }, {
        text: '邀贤山隧道',
        offset: [0, 30],
        path: [120.054289, 31.517331],
        style: {
          'width': '100px',
          'height': '30px',
          'background-color': 'rgba(225,157,0,0.4)',
          'border': '1px solid rgba(225,157,0,1)',
          'color': '#c3fff2',
          'font-size': '16px',
          'border-radius': 0,
          'line-height': '28px',
          'text-align': 'center'
        }
      },]
      this.textMarkers = this.$mapSdk().createMvMapTextMarker(data, (e, data) => {
        alert('你点击了文本标签:' + data.text)
      })
    },
    /**
     * 移除文本标记
     */
    removeTextMarker () {
      this.$mapSdk().removeMvMapTextMarker(this.textMarkers)
    },
    /**
     * 隐藏文本标记
     */
    hideTextMarker () {
      this.$mapSdk().hideMvMapTextMarker(this.textMarkers)
    },
    /**
     * 显示文本标记
     */
    showTextMarker () {
      this.$mapSdk().showMvMapTextMarker(this.textMarkers)
    },
    /**
     * 设置文本标记
     */
    setTextMarker () {
      if (this.textMarkers) {
        const config = {
          text: '更改文本',
          style: {
            backgroundColor: 'red'
          }
        }
        this.textMarkers.forEach(textMarker => {
          this.$mapSdk().setMvMapTextMarker(textMarker, config)
        })
      }

    },
  }
}
</script>

API

createMvMapTextMarker(data, callback) 创建文本标记

参数

1.data:[Array]

data类型说明
textString文本标记内容
pathArray经纬度 [lng,lat]
offsetArray偏移量
styleObject样式
callback:[Function] 文本标记 click触发

2.callback(e, data)

  • event:{type:String,lnglat} 触发事件对象
  • data:{text,path...} 文本标记相关信息

返回

textMarkers [Array] 多个文本标记实例

removeMvMapTextMarker(textMarkers) 移除文本标记

参数

textMarkers:[Array] 多个文本标记实例

showMvMapTextMarker(textMarkers) 显示文本标记

参数

textMarkers:[Array] 多个文本标记实例

hideMvMapTextMarker(textMarkers) 隐藏文本标记

参数

textMarkers:[Array] 多个文本标记实例

setMvMapMarkerStyle(textMarker, config) 修改文本标记

参数

  • textMarker:[String] 文本标记实例

  • config:[Object] 文本标记配置

config类型说明
textString文本内容
styleObject文本样式

点聚合

使用

例:

<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建点聚合</a-button>
    <a-button type="primary" @click="remove">移除点聚合</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cluster: null,
    }
  },
  methods:{
    /**
     * 创建点聚合
     */
    create () {
      let points = []
      for (let i = 0; i < 100; i++) {
        points.push({
          name: '情报板',
          icon: 'icon-gl-qbb',
          path: [119.206742 + 0.48058 * 0.1 * Math.random(), 32.464552 + 0.60079 * 0.1 * Math.random()],
          size: [20, 20],
          type: 0
        })
      }
      const config = {
        className:'demo-cluster',
        backgroundColor:'green',
        color:'#fff'
      }
      this.cluster = this.$mapSdk().createMvMapMarkerCluster(points, config, (e, data) => {
        alert('你点击了点聚合')
      })
    },
    /**
     * 移除点聚合
     */
    remove () {
      this.cluster && this.$mapSdk().removeMvMapMarkerCluster(this.cluster)
    },
  }
}
</script>

<style>
// 点聚合样式
.demo-cluster{
  border: 1px solid #fff;
}
</style>

API

createMvMapMarkerCluster(data,config, callback) 创建点聚合

参数

1.data [Array] 点数据

data类型说明
nameString点标记名称
path[lng,lat]经纬度
iconString图标名称
sizeArray图标大小

2.config [Object] 点聚合自定义样式

config类型说明
classNameStringclass名
backgroundColorString背景色
colorString字体色

3.callback [Function] 点点聚合击回调

callback(e,data) -e [Object] 触发事件对象 -data [Array] 点聚合数据

返回

cluster [Object] 点聚合实例

removeMvMapMarkerCluster(cluster) 移除点聚合

参数

  • cluster 点聚合实例

折线

使用

例:

<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建折线</a-button>
    <a-button type="primary" @click="remove">移除折线</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      lineList: null,
    }
  },
  methods:{
    /**
     * 创建折线
     */
    create () {
      let data = [
        {
          name: 'test',
          path: [
            [120.338348, 31.458074],
            [120.332769, 31.453736],
            [120.328542, 31.450551],
            [120.32498, 31.448391],
            [120.317899, 31.444949],
            [120.301848, 31.437736],
            [120.294016, 31.434166],
            [120.286227, 31.430907],
            [120.275048, 31.427264],
            [120.26552, 31.423913],
            [120.257281, 31.42135],
            [120.245779, 31.420086],
            [120.236338, 31.420709],
            [120.234514, 31.421093],
            [120.234514, 31.421093],
          ],
          config: {
            lineWidth: 8,
            lineColor: '#FF0000',
            selectWidth: 10,
            selectColor: '#2eff00',
          }
        }, {
          name: 'test1',
          path: [
            [120.234514, 31.421093],
            [120.217949, 31.426238],
            [120.208078, 31.431603],
            [120.201621, 31.43504],
            [120.155938, 31.459442],
            [120.138493, 31.46885],
            [120.137227, 31.469344],
          ],
          config: {
            lineWidth: 8,
            lineColor: '#00B2D5',
            selectWidth: 10,
            selectColor: '#FFEA00',
            lineStyle: 'dashed'
          }
        }]
      this.lineList = this.$mapSdk().createMvMapLineLayer(data, (e, data) => {
        if (e.type === 'click') {
          alert('你点击了折线:' + data.name)
        }
        if (e.type === 'mouseover') {
          console.log('line mouseover')
        }
        if (e.type === 'mouseout') {
          console.log('line mouseout')
        }
      })
    },
    /**
     * 移除折线
     */
    remove () {
      this.lineList && this.$mapSdk().removeMvMapLineLayer(this.lineList)
    }
  }
}
</script>

API

createMvMapLineLayer(data, callback) 创建点聚合

参数

1.data [Array] 点数据

data类型说明
nameString线名称
path[[lng,lat]]线 经纬度 数组过个点组成
lineColorString线条颜色
lineWidthString线条宽度
lineStyleString线条样式 实线:solid,虚线:dashed

2.callback [Function] 线点击 悬浮回调函数 callback(e,data) -e [Object] 触发事件对象 e.type 是触发事件类型 -data [Array] 触发折线数据

返回

lineList [Array] 折线实例数组

removeMvMapLineLayer(line) 移除点聚合

参数

  • line [Object | Array] 折线实例 可以是一条或多条折线

行政边界区域

使用

例:

<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 表单 -->
    <a-form-model>
      <a-form-model-item label="地区code">
        <a-input v-model="areaConfig.code" placeholder="地区code" />
      </a-form-model-item>
      <a-form-model-item label="地区名">
        <a-input v-model="areaConfig.codeName" placeholder="地区名" />
      </a-form-model-item>
      <a-form-model-item label="区域类型">
        <a-radio-group v-model="areaConfig.depth">
          <a-radio :value="1"> 省级 </a-radio>
          <a-radio :value="2"> 市级 </a-radio>
          <a-radio :value="3"> 县级 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="填充色">
        <a-input v-model="areaConfig.fillColor" placeholder="填充色" />
      </a-form-model-item>
      <a-form-model-item label="地级市边界颜色">
        <a-input v-model="areaConfig.cityBorderColor" placeholder="地级市边界颜色" />
      </a-form-model-item>
      <a-form-model-item label="县边界颜色" v-show="areaConfig.depth !== 1">
        <a-input v-model="areaConfig.countyBorderColor" placeholder="县边界颜色" />
      </a-form-model-item>
      <a-form-model-item label="外界遮罩">
        <a-switch v-model="areaConfig.outsideFill" />
      </a-form-model-item>
      <a-form-model-item label="边界颜色" v-show="areaConfig.outsideFill">
        <a-input v-model="outsideFill.countyBorderColor" placeholder="边界颜色" />
      </a-form-model-item>
      <a-form-model-item label="边界宽度" v-show="areaConfig.outsideFill">
        <a-input v-model="outsideFill.strokeBorderWidth" placeholder="边界宽度" />
      </a-form-model-item>
      <a-form-model-item label="图层遮罩颜色" v-show="areaConfig.outsideFill">
        <a-input v-model="outsideFill.fillColor" placeholder="图层遮罩颜色" />
      </a-form-model-item>
      <a-form-model-item label="图层遮罩透明度" v-show="areaConfig.outsideFill">
        <a-input v-model="outsideFill.fillOpacity" placeholder="图层遮罩透明度" />
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="create">开始绘制</a-button>
        <a-button type="primary" @click="remove">清除</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
export default {
  data () {
    return {
      areaConfig: {
        codeName: "江苏省",
        code: "320000",
        depth: 1,
        fillColor: 'rgba(255,255,255,0.2)',
        cityBorderColor:'#E9F6FE',
        countyBorderColor:'rgba(255,255,255,0.1)',
        outsideFill:false
      },
      outsideFill:{
        strokeColor:'#fff',
        strokeBorderWidth:2,
        fillColor:'rgba(1,49,133,1)',
        fillOpacity:1,
        bubble:false,
      },
      provinceLayer: null,
    }
  },
  methods:{
    /**
     * 绘制行政边界区域
     */
    async create () {
      this.remove ()
      const config = this.areaConfig.outsideFill ? {...this.areaConfig, ...{ outsideFill:this.outsideFill }} : this.areaConfig
      this.provinceLayer = await this.$mapSdk().createMvMapProvince(config)
    },
    /**
     * 移除行政边界区域
     */
    remove () {
      this.$mapSdk().removeMvMapProvince(this.provinceLayer)
    },
  }
}
</script>

API

createMvMapProvince(config) 行政边界区域

type:[Promise] 参数

  • config [Object] 配置
config类型说明
codeString区域code
depthNumber区域类型 0:省级 1:市级 2:县级
fillColorString行政区域填充色
fillFunctionFunction行政区域填充色函数 return color
cityBorderColorString行政区域边界颜色
countyBorderColorString县边界颜色
outsideFillObject绘制外界遮罩 无该参数不绘制外界遮罩

默认以code为准,其次是codeName

outsideFill 配置

outsideFill类型说明
strokeColorString边界颜色
strokeBorderWidthNumber边界宽度
fillColorString图层遮罩颜色
fillOpacityNumber图层遮罩透明度
bubbleBoolean图层遮罩是否允许点击事件冒泡 默认false

返回

type:[Object] { province, polygon }

  • province:[Object] 行政区域图层对象
  • polygon:[Object] 外界遮罩图层对象

removeMvMapProvince(provinceLayer) 移除行政边界区域图层

参数

  • provinceLayer { province, polygon }

热力图

使用

例:

<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建热力图</a-button>
    <a-button type="primary" @click="hide">隐藏热力图</a-button>
    <a-button type="primary" @click="show">显示热力图</a-button>
    <a-button type="primary" @click="remove">移除热力图</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      heatLayer: null
    }
  },
  methods:{
    /**
     * 创建热力图
     */
    create () {
      const data = [{
        lat: 32.059703,
        lng: 118.795932,
        count: 8
      }, {
        lat: 32.464552,
        lng: 119.206742,
        count: 4
      }, {
        lat: 32.323953,
        lng: 119.393509,
        count: 11
      }]
      const heatConfig = {
        max: 10
      }
      this.remove()
      this.heatLayer = this.$mapSdk().createMvMapHeatMap(data, heatConfig)
    },
    /**
     * 隐藏热力图
     */
    hide () {
      this.heatLayer && this.heatLayer.hide()
    },
    /**
     * 显示热力图
     */
    show () {
      this.heatLayer && this.heatLayer.show()
    },
    /**
     * 移除热力图
     */
    remove () {
      this.$mapSdk().removeHeatMap(this.heatLayer)
    },
  }
}
</script>

API

createMvMapHeatMap(data, config) 创建热力图

参数

  • data [Array] 热力图数据
data类型说明
lngNumber经度
latNumber纬度
countNumber总数
  • config [Object] 配置
config类型说明
radiusNumber热力图中单个点的半径 25
opacityArray热力图透明度区间 [0,1]
zoomsArray支持的缩放级别范围 [3,20]
maxNumber最大权重值
gradientObject热力图的渐变区间
gradient: {
  0.5: 'blue',
  0.65: 'rgb(117,211,248)',
  0.7: 'rgb(0, 255, 0)',
  0.9: '#ffea00',
  1.0: 'red'
}

返回

type:[Object] 热力图 图层

removeHeatMap(layer) 移除热力图 图层

参数

  • layer 热力图 图层

信息窗体

使用

例:

<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 信息窗体 -->
    <div class="info-window" ref="windowInfo" v-show="windowInfoVisible">信息窗体</div>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建信息窗体</a-button>
    <a-button type="primary" @click="remove">移除信息窗体</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      windowInfoVisible:false,
      windowInfo:null
    }
  },
  methods:{
    /**
     * 创建信息窗体
     */
    create () {
      this.windowInfoVisible = true
      const path = [119.378231 + 0.48058 * 1.5 * Math.random(), 32.458852 + 0.60079 * 1.5 * Math.random()]
      let data = {
        content: this.$refs.windowInfo,
        path
      }
      
      this.windowInfo = this.$mapSdk().createMvMapWindowInfo(data, false)
    },
    /**
     * 关闭信息窗体
     */
    remove () {
      this.windowInfoVisible = false
      // 关闭
      this.windowInfo.close()
    },
  }
}
</script>

API

createMvMapWindowInfo(data, isCustom) 创建信息窗体

参数

  • data [Array] 热力图数据
data类型说明
path[lng,lat]弹框显示位置
contentHTML DOM弹框内容
offsetArray弹框偏移量
  • isCustom [Boolean]] 是否使用自定义组件

返回

type:[Object] 信息窗体实例

windowInfo.close() 关闭信息窗体


图片图层

使用

例:

<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建图片图层</a-button>
    <a-button type="primary" @click="hide">隐藏图片图层</a-button>
    <a-button type="primary" @click="show">显示图片图层</a-button>
    <a-button type="primary" @click="remove">移除图片图层</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imageLayer:null
    }
  },
  methods:{
    /**
     * 创建图片图层
     */
    create () {
      this.imageLayer = this.$mapSdk().createMvMapImgLayer(
        require('@/assets/images/map.png'),
        [105.054228, 19.197873],
        [130.202934, 42.1416],
        [8, 10], 2
      )
    },
    /**
     * 隐藏图片图层
     */
    hide () {
      this.imageLayer && this.imageLayer.hide()
    },
    /**
     * 显示图片图层
     */
    show () {
      this.imageLayer && this.imageLayer.show()
    },
    /**
     * 移除图片图层
     */
    remove () {
      this.$mapSdk().removeMvMapImgLayer(this.imageLayer)
    },
  }
}
</script>

API

createMvMapImgLayer(img, southWest, northEast, zooms, zIndex) 创建图片图层

参数

  • img [String] 图片地址
  • southWest [lng,lat] 西南角
  • northEast [lng,lat] 东北角
  • zooms [Array] 显示层级范围 默认 [8, 18]
  • zIndex [Number] 图层叠加的顺序值,0表示最底层。默认zIndex:1

返回

type:[Object] 图片 图层

removeMvMapImgLayer(layer) 移除图片 图层

参数

  • layer 图片 图层

海量点

使用

例:

<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建海量点</a-button>
    <a-button type="primary" @click="remove">移除海量点</a-button>
    <a-button type="primary" @click="setData">添加海量点数据</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data:[],
      layer:null
    }
  },
  methods:{
    /**
     * 创建海量点
     */
    create () {
      if (this.layer) {
        this.setData()
        return
      }
      businessApi.getSXTMapLayerList().then(res => {
        this.data = res.data.map(item => {
          return {
            ...item,
            icon: 'icon-gl-sxt',
            lnglat:item.path
          }
        })
        const config = {
          iconSize: [32, 30],
          offset: [-16, -15]
        }
        this.$mapSdk().createMvMapMassPoint(this.data, config, this.pointClick).then(res => {
          this.layer = res
        })
      })
    },
    /**
     * 移除海量点
     */
    remove () {
      this.$mapSdk().setMvMapMassPoint(this.layer, null)
    },
    /**
     * 添加海量点数据
     */
    setData () {
      this.$mapSdk().setMvMapMassPoint(this.layer, this.data)
    },
    /**
     * 海量点点击回调
     */
    pointClick (e, data) {
      alert('你点击了海量点:' + data.data.name)
    }
  }
}
</script>

API

createMvMapMassPoint(data, config, callBack) 创建海量点图层

参数

  • data [Array] 数据
data类型说明
idString点id
nameString点提示信息
lnglatArray点经纬度
iconString点图标名
zoomsString点展示层级范围
zIndexString点与其它图层的叠加顺序
  • config 海量点配置
config类型说明
iconSizeArray 或 Function点图标 为函数时要返回一个数组 [width, height]
offsetArray偏移量
fitViewBoolean是否在绘制后自动调整地图视野以适合全部轨迹,默认false

返回

type:[Object] 海量点图层

setMvMapMassPoint(layer, data) 设置海量点数据

参数

  • layer 海量点 图层
  • data 海量点 数据

海量线

使用

例:

<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建海量线</a-button>
    <a-button type="primary" @click="remove">移除海量线</a-button>
    <a-button type="primary" @click="setData">添加海量线数据</a-button>
  </div>
</template>

<script>
import roadJson from '@/assets/json/js-one-road.json'

export default {
  data () {
    return {
      data:[],
      layer:null
    }
  },
  methods:{
    /**
     * 创建海量线
     */
    create () {
      if (this.layer) {
        this.setData()
        return
      }
      this.data = roadJson.features.map((line, index) => {
        return {
          name:index,
          path: line.geometry.coordinates,
          // 路线样式配置
          config: {
            lineWidth: 5,
            lineColor: index % 2 ? 'yellow' : 'green',
            selectWidth: 6,
            selectColor: 'red'
          }
        }
      })
      const config = {
        fitView: true
      }
      this.$mapSdk().createMvMapMassLine(this.data, config, this.pointClick).then(res => {
        this.layer = res
      })
    },
    /**
     * 移除海量线
     */
    remove () {
      this.$mapSdk().setMvMapMassLine(this.layer, null)
    },
    /**
     * 添加海量线数据
     */
    setData () {
      this.$mapSdk().setMvMapMassLine(this.layer, this.data)
    },
    /**
     * 海量线点击回调
     */
    pointClick (e, data) {
      alert('你点击了海量线:' + data.pathData.name)
    }
  }
}
</script>

API

createMvMapMassLine(data, config, callBack) 创建海量线图层

参数

  • data [Array] 数据
data类型说明
idString线id
nameString线提示信息
pathArray线 经纬度数组 [[lng,lat],[lng,lat],....]
configObject线样式配置

config 线样式配置

config类型说明
lineWidthNumber线宽度
lineColorString线颜色
dirArrowStyleBoolean线是否绘制箭头样式,默认false
selectWidthNumber线选中宽度
selectColorString线选中颜色
  • config 海量线配置
config类型说明
fitViewBoolean是否在绘制后自动调整地图视野以适合全部轨迹,默认false

返回

type:[Object] 海量线图层

setMvMapMassLine(layer, data) 设置海量线数据

参数

  • layer 海量线 图层
  • data 海量线 数据

形状绘制

使用

例:

<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap" :mapConfig="mapConfig"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="drawRegion('rectangle')">绘制矩形</a-button>
    <a-button type="primary" @click="drawRegion('rectangle', true)">绘制可编辑矩形</a-button>
    <a-button type="primary" @click="drawRegion('circle')">绘制圆形</a-button>
    <a-button type="primary" @click="drawRegion('circle', true)">绘制可编辑圆形</a-button>
    <a-button type="primary" @click="drawRegion('polygon')">绘制多边形</a-button>
    <a-button type="primary" @click="drawRegion('polygon', true)">绘制可编辑多边形</a-button>
    <a-button type="primary" @click="removeCurrentId">移除指定id绘制内容</a-button>
    <a-button type="primary" @click="removeCurrentLayer">移除指定layer绘制内容</a-button>
    <a-button type="primary" @click="remove">移除所有绘制内容</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mapConfig: {
        zoom: 11,
        center: [119.201111, 32.391081]
      },
      markers: null,
      currentId: null,
      currentLayer: null
    }
  },
  methods:{
    /**
     * 创建标记点
     */
    createAddMarkers () {
      let points = [
        { icon: 'icon-gs-sxt', path: [119.206742, 32.464552], name: 'test1', size: [38, 42] },
        { icon: 'icon-gl-sxt', path: [119.349907, 32.388627], name: 'test2' },
        { icon: 'icon-gs-qbb', path: [119.396572, 32.391775], name: 'test3' },
        { icon: 'icon-gl-qbb', path: [119.393509, 32.323953], name: 'test4' },
      ]
      this.markers = this.$mapSdk().createMvMapMarkerLayer(points, (e, data) => {
        alert('你点击了' + data.name)
      })
    },
    /**
     * 创建形状绘制
     */
    drawRegion (type, edit) {
      const id = new Date().getTime()
      // 形状绘制配置
      const drawConfig = {
        type,
        id,
        edit,
        lineColor: '#ffffff',
        areaColor: edit ? '#ff0000' : '#00b0ff',
      }
      this.$mapSdk().drawMvMapRegion(drawConfig, this.markers, (layer, config, markers) => {
        // 保存当前绘制内容的id和图层
        this.currentId = config.id
        this.currentLayer = layer

        markers.forEach(item => {
          this.$mapSdk().setMvMapMarkerStyle(item, 'icon-gl-sn')
        })
        console.log("区域内点有" + markers.length + '个')
      })
    },
    /**
     * 移除所有绘制内容
     */
    remove () {
      this.$mapSdk().clearMvMapRegion()
    },
    /**
     * 移除指定id绘制内容
     */
    removeCurrentId () {
      this.currentId && this.$mapSdk().clearMvMapRegion(this.currentId)
    },
    /**
     * 移除指定layer绘制内容
     */
    removeCurrentLayer () {
      this.currentLayer && this.$mapSdk().clearMvMapRegion(this.currentLayer)
    }
  }
}
</script>

API

drawMvMapRegion(config, markers, callback) 绘制区域

参数

1.config [Object|String] 绘制配置

config 为string时,默认设置绘类型

config 为Object时:

config类型说明
typeString绘制类型 取值 'rectangle'、'circle'、'polygon'
idStringid
areaColorString区域颜色
lineColorString边框颜色
editBoolean是否编辑

2.markers [Array] 标记点点集合

3.callback [Function] 回调函数

callback(layer, config, markers)

  • layer [Object] 绘制图层
  • config [Object] 绘制配置
  • markers [Array] 绘制范围内的点标记数组

clearMvMapRegion(layer) 清除绘制内容

参数

  • 不传时清除所有绘制图层
  • 传id,移除指定id绘制内容
  • 传layer,移除指定layer绘制内容

FAQs

Package last updated on 28 Jun 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc