zh-mapbox v0.0.81

zh-mapbox

介绍

封装了一些mapbox的常用方法

使用

import { RegisterMapBoxMethod } from 'zh-mapbox'

let mapboxgl = require('mapbox-gl')
require('mapbox-gl/dist/mapbox-gl.css')
//注册常用方法
RegisterMapBoxMethod(mapboxgl)

import { RegisterMapBoxModel } from 'zh-mapbox'

import * as THREE from 'three'
import GLTFLoader from 'three/examples/js/loaders/GLTFLoader'
//注册模型相关方法(前提先注册常用方法)
RegisterMapBoxModel(THREE,GLTFLoader)

方法概览

注册常用方法后 map.on('layerdata') 可监听图层的添加与删除

Map

Map.Style

方法

MapTooltip

​

MapPopup

options:{
	...,
	destroyComponent=false,//关闭时是否销毁组件
	customClick=false,//是否自定义点击事件
	popupClose=false,//关闭时是否调用组件内popupClose()方法，vue组件
	closeOther=true，//弹窗打开时关闭其他弹窗
	noCloseLayerName:string[],//不关闭的弹窗名称
	closeClick//点击关闭按钮执行的方法
}

MapLine

MapCustom

MapCircle

MapEvent

MapMoreCustom

layerConfig:{
	id,
	type,
	beforeId,
	...
}

MapMarker

AnimateLine

使用

import TestPopup from '@/views/TestPopup'

 map.addSource('point', {
      'type': 'geojson',
      'data': {
        'type': 'FeatureCollection',
        'features': [
          {
            'type': 'Feature',
            'properties': {
              name: '123'
            },
            'geometry': {
              'type': 'Point',
              'coordinates': [115, 30]
            }
          }
        ]
      }
    })
    map.addLayer({
      'id': 'point',
      'type': 'circle',
      'source': 'point',
      'paint': {
        'circle-radius': 10,
        'circle-color': '#007cbf'
      }
    })
    const tooltip = map.MapTooltip('point')
    tooltip.show((properties) => {
      return properties.name
    })
	const popup=map.MapPopup('point')
    popup.show(({properties，lngLat})=>{
        //转换vue组件 得到$el以及vue实例
        ...
        return {component:$el,instance:instance}
    },({lnglat,properties})=>{})

beforeDestroy(){
    //销毁
	tooltip.destroy()
	popup.destroy()
}