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

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

JavaScript API GL升级指南

1、在原来的链接中添加type = webgl

2、批量替换页面中的BMap直接替换为BMapGL

二、mapV的使用

MapVGL

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

1、加载mapvgl.min.js

bash 复制代码
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、添加图层

bash 复制代码
  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、添加点和线数据

省去部分逻辑代码

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

目前遇到的问题:

我使用mapV实现大数据展示,设备地图要显示设备、设施,我添加了2个图层,分别显示设备、设施,设备、设施分别由点击事件,添加图层的顺序为设备、设施。 我点击设施时,能正常执行设施的点击事件,但是也会触发设备图层的点击事件。但是点击设备时,点击事件dataIndex=-1


相关推荐
mCell1 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip1 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping7 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风8 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户22152044278008 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端8 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧8 小时前
Promise 的使用
前端·javascript
前端康师傅10 小时前
JavaScript 作用域
前端·javascript
云枫晖10 小时前
JS核心知识-事件循环
前端·javascript
eason_fan10 小时前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript