百度地图 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/[email protected]/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


相关推荐
梅子酱~35 分钟前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
你的人类朋友39 分钟前
JS严格模式,启动!
javascript·后端·node.js
Carlos_sam1 小时前
OpenLayers:如何控制Overlay的层级?
前端·javascript
z_mazin1 小时前
JavaScript逆向魔法:Chrome开发者工具探秘之旅
javascript·chrome·爬虫
绿草在线1 小时前
Mock.js虚拟接口
开发语言·javascript·ecmascript
时光追逐者2 小时前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor
hz.ts2 小时前
Angular 国际化
javascript·ecmascript·angular.js
6武72 小时前
Vue 数据传递流程图指南
前端·javascript·vue.js
夏天想3 小时前
vant4+vue3上传一个pdf文件并实现pdf的预览。使用插件pdf.js
开发语言·javascript·pdf·vant
....4923 小时前
antvX6节点全选后鼠标通过拖拉调整视图的展示位置
javascript·计算机外设·数据中台·antvx6