maptalks上加载自定义标记

引入插件

import * as maptalks from 'maptalks'

引入css文件

import 'maptalks/dist/maptalks.css'

加载地图

this.map = new maptalks.Map('map', {
      center: [center.x, center.y], //地图中心点的xy坐标
      zoom: 16, 
      pitch: 60,
      minZoom: 1,
      maxZoom: 19,
      // dragPitch: false, // 是否允许俯视旋转--上下旋转
      spatialReference: {
        projection: 'baidu'
      },
      baseLayer: new maptalks.TileLayer('base', {
        urlTemplate:
            'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', //根据各自地图需求修改基础底图
        subdomains: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 
        // (对比度 深褐色转换比率 反转图像色值 调整的色环角度值 饱和度)--根据需要自行调整，可以参考官网的配置说明
        cssFilter: 'contrast(60%) sepia(70%) invert(95%)  hue-rotate(340deg) saturate(80%)',
        attribution: '© sunray'
      })
    })

• 加载完地图之后，运行会出现一张深色的地图

默认这张地图是可以左键移动，右键可以调整角度，滚轮可以放大缩小的，是否需要这些 可以在声明地图的时候根据实际来配置

图片标记

1. 在地图上加载一个图层用来放标记

this.markerLayer = new maptalks.VectorLayer('vector').addTo(this.map)

• 根据经纬度声明标记点

var marker = new maptalks.Marker([longitude, latitude], {
    symbol: {
       markerFile: markerFile, // 图片地址 assets目录下的地址无法识别 --踩过坑
       markerWidth: 30, // 图片大小
       markerHeight: 30, // 图片大小
       markerDx: 0,
       markerDy: 0,
       markerOpacity: 1 // 图片透明度
     }
   })

3.将标记加到图层上

marker.addTo(this.markerLayer)

• 以上就是简单的图片标记的做法，多个标记的画 就直接声明多个marker 一起加到markerLayer上就行

4.标记的点击事件

marker.on('click', function(e) {
	// 具体点击执行逻辑
})

3d模型标记

3d模型的加载 需要引入另外的插件

import { ThreeLayer } from 'maptalks.three'

// 我这边用的是gltf的3d模型 如果是其他模型 需要引入对应的loader
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'   

1.声明3d标记图层

this.threeLayer = new ThreeLayer('t', {
  forceRenderOnMoving: true,
   forceRenderOnRotating: true
 })

2.加载模型

this.threeLayer.prepareToDraw = function(gl, scene, camera) {
   // 光
   var light01 = new THREE.AmbientLight('#0xffffff', 0.5)
   light01.castShadow = true
   scene.add(light01)
   const scene = this.threeLayer.getScene()
    let loader = new GLTFLoader()
    loader.load(process.env.BASE_URL + '模型.gltf', (obj:any) => {
    	//将经纬度转成坐标值
    	var v = that.threeLayer.coordinateToVector3(new maptalks.Coordinate(longitude, latitude))
    	// 
      	obj.scene.position.set(v.x, v.y, 0)
    })
 }

3.标记图层加到地图上

this.threeLayer.addTo(this.map)

这样就能将3d的模型标记加载到地图上了 对应的点击或者其他操作，就利用threejs捕获模型
var intersects = raycaster.intersectObjects(scene.children, true)一样的方法即可