百度地图 JavaScript API GL快速升级和mapV的使用

一、百度地图 JavaScript API GL快速升级

JavaScript API GL升级指南

在这里插入图片描述
1、在原来的链接中添加type = webgl
2、批量替换页面中的BMap直接替换为BMapGL

二、mapV的使用

MapVGL

mapVGL的效率确实要快很多，一万个点基本实现秒现

1、加载mapvgl.min.js

export const loadMapVgl = () => new Promise((resolve, reject) => {
  if (!window.mapvgl) {
    const script: any = document.createElement('script');
    script.type = 'text/javascript';
    //script.src = 'https://unpkg.com/mapvgl/dist/mapvgl.min.js';
    script.src = 'https://unpkg.com/mapvgl@1.0.0-beta.189/dist/mapvgl.min.js';
    script.onerror = reject;
    const { head } = document;
    if (head) {
      head.appendChild(script);
    }
    script.onload = function onload() {

      if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
        // 初始化自定义的覆盖物
        resolve(window.mapvgl);
      }
      script.onload = null;
      script.onreadystatechange = null;
    };
    script.onreadystatechange = script.onload;
  } else {
    resolve(window.mapvgl);
  }
});

2、添加图层

  initLayer(){
    console.log("initLayer==");
    this.iconLayer = new window.mapvgl.IconLayer({
      enablePicked:true,
      autoSelect:false,
      onClick: (pickObject:any) => { // 点击事件
        console.log('pickObject: ', pickObject);
        console.log("IconLayer clicked");
        this.showDataInfo(pickObject.dataItem.properties, "device");
      },
    });

    this.facilitiesLayer = new window.mapvgl.IconLayer({
      enablePicked:true,
      autoSelect:false,
      onClick: (pickObject:any) => { // 点击事件
        console.log('pickObject: ', pickObject);
        console.log("FacilitiesLayer clicked");
        this.showDataInfo(pickObject.dataItem.properties, "facilities");
      },
    });


    this.simpleLineLayer = new window.mapvgl.LineLayer({
      color: '#727cf5',
      width:3,
      // enablePicked:true,
      // onClick: (pickObject:any) => { // 点击事件
      //   console.log('pickObject: ', pickObject);
      //   //this.showDataInfo(pickObject.dataItem.properties, "line");
      // },
    });

    console.log('this.iconLayer: ', this.iconLayer);

    window.mapvglView.addLayer(this.iconLayer);
 
    window.mapvglView.addLayer(this.facilitiesLayer);
    window.mapvglView.addLayer(this.simpleLineLayer);
    this.isLoadMap = true;


  }

3、添加点和线数据

省去部分逻辑代码

  if(key == 'device'){
   this.iconLayer.setData(this.iconGeometryData);
    }else if(key == 'facilities'){
      this.facilitiesLayer.setData(this.facilitiesGeometryData);
    }else{
      this.simpleLineLayer.setData(this.lineGeometryData);
    }