记录使用超图的mapboxgl以及地图api

用于项目要求使用国产地图框架,作为新手接触国产地图--supermap;公司选用的是mapboxgl.

作为才接触这个框架,有必要说一下里面的坑以及记录api使用心得,公司用的前端框架是vue3,vue3太恶心了

1) 0.1版本项目暂时只用marker和popup,以及高效率图层渲染海量点位

     坑:高效率图层点位的时候,官网用的cdn引入的,没有npm的引入方式.自己整了很久才把点位这展示出来.

import { Graphic, GraphicLayer } from '@supermap/iclient-mapboxgl'


//画海量点位
async function getSlagTruckData() {
  const res = //后端返回数据
  const graphicLayer = addLayer(res)
  map.value.addLayer(graphicLayer)
}

// 将画出来的点渲染到地图上
const addLayer = (points: any) => {
  let graphics = [];
  for (let i = 0; i < points.length; i++) {
    let lngLat = {
      lng: parseFloat(points[i][0]),
      lat: parseFloat(points[i][1])
    };
    let style = {
      color: [255, 255, 0],
      radius: 30
    }
    graphics.push(new Graphic(lngLat, style));
  }
  let graphicStyle = {
    color: [255, 255, 0],
    radius: 50
  };
  // 绘制对象，并添加到图层上
  const graphicLayer = new GraphicLayer("truck", {
    graphics: graphics,
    radius: graphicStyle.radius,
    color: graphicStyle.color,
    highlightColor: [255, 255, 0],
    type: "circle",
    source: `trajectory`,
  });
  return graphicLayer
}

官网demo上面的,照抄后会报错.因为少了一个deck.gl.min.js   这是最坑的.

我已经忘记大佬是怎么发现这个文件确实的

从这里去下https://github.com/SuperMap/deck.gl.git,然后cdn引入就不报错也能画海量点位了

2)由于项目需求,需要进行创建多个海量点图层,mapboxgl是基于webgl封装的,达到一定量的图层的时候就会报WARNING: Too many active WebGL contexts. Oldest context will be lost.

        解决方案

                1.尝试过在创建新的高效率图层时候进行对layer和source进行移除.但是还是会报错(无法解决问题)

                2.只创建一个高效率图层进行数据更新即可(可解决)

核心代码如下: 

        

import { Graphic, GraphicLayer } from '@supermap/iclient-mapboxgl'


//画轨迹点  res为接口数据
function drawTrajectoryPoint(res: any) {
  const graphicsList = addGraphicsList(res.data);
  if ((props as any).map.getLayer('emission')) {
    //切换活跃轨迹进行数据重置
    (graphicLayer as any).value.setGraphics(graphicsList)
  } else {
    (graphicLayer as any).value = new GraphicLayer("emission", {
      graphics: graphicsList,
      radius: graphicStyle.radius,
      color: graphicStyle.color,
      highlightColor: [255, 255, 0],
      type: "circle",
      source: `emission`,
    });
    (props as any).map.addLayer(graphicLayer.value);
  }
}

const addGraphicsList = (points: any) => {
  let graphics = [];
  for (let i = 0; i < points.length; i++) {
    let lngLat = {
      lng: parseFloat(points[i][0]),
      lat: parseFloat(points[i][1])
    };
    let style = {
      color: [255, 255, 0],
      radius: 30
    }
    graphics.push(new Graphic(lngLat, style));
  }
  return graphics
}

由于项目是vue3+vite写的,各种ts报错,比angular恶心多了,直接any了

vue3包括包文件的引入也会报ts错误,需要自己去定义,太恶心了

3)marker和popup的隐藏和现实

看了官网没有像高德那样有marker的hide和show方法,popup也没有高德infowindow的open和close方法.只能去获取dom节点,设置style的隐藏和现实,有点烦.

现在正在做其他功能,等发现恶心的地方再写写