Null Pointer Micromanagement

    microvideo-map

    0.2.85 • Public • Published

    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 类型 说明
    theme String 地图主题配置 dark(默认), light
    zoom Number 地图显示层级
    zooms Array 地图显示层级范围
    center Array 地图中心点

    全部参数

    props:businessConfig

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

    businessConfig 类型 说明
    roadType String 地图业务路网类型
    areaConfig Object 地图显示省市县地区配置
    sdkConfig Array 地图业务sdk配置

    areaConfig 详细配置说明

    areaConfig 类型 说明
    code String 区域code 默认江苏省 320000
    depth Number 层级类型 0:省级 1:市级 2:县级
    fillColor String 中国地级市填充色
    cityBorderColor String 中国地级市边界颜色
    countyBorderColor String 中国区县边界颜色
    outsideFill Object 是否需要绘制外界遮罩 有该参数以下参数有效
    outsideFill.strokeColor String 边界颜色
    outsideFill.strokeBorderWidth Number 边界宽度
    outsideFill.fillColor String 图层遮罩颜色
    outsideFill.fillOpacity String 图层遮罩颜色
    outsideFill.fillColor Number 图层遮罩透明度
    outsideFill.bubble String 图层遮罩是否允许点击事件冒泡 默认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>
    

    业务图例公用配置

    name type mode
    路况 lk lk
    摄像头 sxt point
    情报板 qbb point
    交调点 jdd point
    道路事件 dlsj point
    清障 qz point
    工区 gq point
    服务区 fwq point
    收费站 sfz point
    汽渡 qd point
    ETC etc point
    停车区 tcq point
    枢纽 sn point
    桥梁 ql point
    隧道 sd point
    路线 lx line
    桩号 zh point
    救援车辆 jycl point
    警车 jc point
    执法车 zfc point
    雷雨云层 lyyc point
    气象点 qxd point

    属性

    props:iconConfig

    type: [String | Object] 图例配置

    iconConfig 为String 代表图例类型

    iconConfig 为Object时参数:

    iconConfig 类型 说明
    type String 图例类型
    model String 图层类型 非必传,可取'point'(海量点),'line'(路线),'lk'(路况)
    img Array 图例图片配置,默认和选中两个图片
    active Boolean 图例是否默认选中加载数据 默认false
    cache Boolean 图例是否缓存数据 默认false
    tooltipShow Boolean 图例是否显示提示框 默认true
    tooltipPostiton String 提示框位置 可选 'top'(默认),'bottom'
    width String 图例宽度 默认'2.5vw'
    height String 图例高度 默认'2.5vw'
    fitView Boolean 是否在绘制后自动调整地图视野以适合全部轨迹,默认false。
    iconFilter Array model为point时图层 打点尺寸
    iconSize Array 或 Function model为point时图层 打点尺寸
    queryParam Object 图例接口传参
    queryData Promise 图例获取数据方法

    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 类型 说明
    name String 标记点名称
    icon String 标记点图标名
    size String 标记点图标 尺寸
    path Array 经纬度 [lng,lat]
    offset Array 偏移量
    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 类型 说明
    icon String 图标名称
    size Array 图标尺寸

    文本标记

    使用

    例:

    <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 类型 说明
    text String 文本标记内容
    path Array 经纬度 [lng,lat]
    offset Array 偏移量
    style Object 样式
    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 类型 说明
    text String 文本内容
    style Object 文本样式

    点聚合

    使用

    例:

    <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 类型 说明
    name String 点标记名称
    path [lng,lat] 经纬度
    icon String 图标名称
    size Array 图标大小

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

    config 类型 说明
    className String class名
    backgroundColor String 背景色
    color String 字体色

    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 类型 说明
    name String 线名称
    path [[lng,lat]] 线 经纬度 数组过个点组成
    lineColor String 线条颜色
    lineWidth String 线条宽度
    lineStyle String 线条样式 实线: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 类型 说明
    code String 区域code
    depth Number 区域类型 0:省级 1:市级 2:县级
    fillColor String 行政区域填充色
    fillFunction Function 行政区域填充色函数 return color
    cityBorderColor String 行政区域边界颜色
    countyBorderColor String 县边界颜色
    outsideFill Object 绘制外界遮罩 无该参数不绘制外界遮罩

    默认以code为准,其次是codeName

    outsideFill 配置

    outsideFill 类型 说明
    strokeColor String 边界颜色
    strokeBorderWidth Number 边界宽度
    fillColor String 图层遮罩颜色
    fillOpacity Number 图层遮罩透明度
    bubble Boolean 图层遮罩是否允许点击事件冒泡 默认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 类型 说明
    lng Number 经度
    lat Number 纬度
    count Number 总数
    • config [Object] 配置
    config 类型 说明
    radius Number 热力图中单个点的半径 25
    opacity Array 热力图透明度区间 [0,1]
    zooms Array 支持的缩放级别范围 [3,20]
    max Number 最大权重值
    gradient Object 热力图的渐变区间
    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] 弹框显示位置
    content HTML DOM 弹框内容
    offset Array 弹框偏移量
    • 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 类型 说明
    id String 点id
    name String 点提示信息
    lnglat Array 点经纬度
    icon String 点图标名
    zooms String 点展示层级范围
    zIndex String 点与其它图层的叠加顺序
    • config 海量点配置
    config 类型 说明
    iconSize Array 或 Function 点图标 为函数时要返回一个数组 [width, height]
    offset Array 偏移量
    fitView Boolean 是否在绘制后自动调整地图视野以适合全部轨迹,默认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 类型 说明
    id String 线id
    name String 线提示信息
    path Array 线 经纬度数组 [[lng,lat],[lng,lat],....]
    config Object 线样式配置

    config 线样式配置

    config 类型 说明
    lineWidth Number 线宽度
    lineColor String 线颜色
    dirArrowStyle Boolean 线是否绘制箭头样式,默认false
    selectWidth Number 线选中宽度
    selectColor String 线选中颜色
    • config 海量线配置
    config 类型 说明
    fitView Boolean 是否在绘制后自动调整地图视野以适合全部轨迹,默认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 类型 说明
    type String 绘制类型 取值 'rectangle'、'circle'、'polygon'
    id String id
    areaColor String 区域颜色
    lineColor String 边框颜色
    edit Boolean 是否编辑

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

    3.callback [Function] 回调函数

    callback(layer, config, markers)

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

    clearMvMapRegion(layer) 清除绘制内容

    参数

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

    Keywords

    none

    Install

    npm i microvideo-map

    DownloadsWeekly Downloads

    86

    Version

    0.2.85

    License

    none

    Unpacked Size

    2.43 MB

    Total Files

    207

    Last publish

    Collaborators

    • duxilou