MapV地理数据可视化_API-初始化及初步使用

最新推荐文章于 2024-08-07 10:12:23 发布

HM-hhxx！

最新推荐文章于 2024-08-07 10:12:23 发布

阅读量3k

点赞数

分类专栏：百度地图API 文章标签：前端 javascript mapv

本文链接：https://blog.youkuaiyun.com/damadashen/article/details/126267199

版权

百度地图API 专栏收录该内容

3 篇文章

订阅专栏

MapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。

百度地图-信息可视化平台百度地图信息可视化平台，基于百度地图jsapi与地理数据可视化工具库mapvgl，结合行业需求与热点呈现地理可视化作品。https://lbsyun.baidu.com/visualize/home

1.mapv初始化及使用

NPM:

$ npm i mapvgl

CDN:

npm的cdn地址

<script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>

<!-- 如果使用到Three.js相关的图层需要引用 -->
<script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>

备用百度cdn地址

<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.154/dist/mapvgl.min.js"></script>

<!-- 如果使用到Three.js相关的图层需要引用 -->
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.154/dist/mapvgl.threelayers.min.js"></script>

Hello World：

// 1. 创建地图实例
var bmapgl = new BMapGL.Map('map_container');
var point = new BMapGL.Point(116.403748, 39.915055);
bmapgl.centerAndZoom(point, 17);

// 2. 创建MapVGL图层管理器
var view = new mapvgl.View({
    map: bmapgl
});

// 3. 创建可视化图层，并添加到图层管理器中
var layer = new mapvgl.PointLayer({
    color: 'rgba(50, 50, 200, 1)',
    blend: 'lighter',
    size: 2
});
view.addLayer(layer);

// 4. 准备好规范化坐标数据
var data = [{
    geometry: {
        type: 'Point',
        coordinates: [116.403748, 39.915055]
    }
}];

// 5. 关联图层与数据，享受震撼的可视化效果
layer.setData(data);

2.mapv的使用

可参考如下文档进行mapv的使用：

MapV开发文档https://lbsyun.baidu.com/solutions/mapvdata

2.1 添加点图层

 // 创建mapvgl图层管理器
      var view = new mapvgl.View({
        map: map,
      });

      // 创建点图层
      var pointLayer = new mapvgl.PointLayer({
        color: "rgba(55,55,255,1)",
        blend: "lighter",
        size: 40,
      });
      // 将点图层添加到图层管理器
      view.addLayer(pointLayer);

      // 设置点数据
      var data = [
        {
          geometry: {
            type: "Point",
            coordinates: [116.404 + Math.random(), 39.915 + Math.random()],
          },
        },
        {
          geometry: {
            type: "Point",
            coordinates: [116.404 + Math.random(), 39.915 + Math.random()],
          },
        },
        {
          geometry: {
            type: "Point",
            coordinates: [116.404 + Math.random(), 39.915 + Math.random()],
          },
        },
        {
          geometry: {
            type: "Point",
            coordinates: [116.404, 39.915],
          },
        },
      ];

      //将数据设置在点图层里
      pointLayer.setData(data);

实现效果：

2.2 添加点轨迹

 // 创建点图层
      let pointLayer = new mapvgl.PointTripLayer({
        color: "rgba(50, 50, 200, 1)",
        step: 0.01,
        trailLength: 20,
        startTime: 0,
        endTime: 1000,
        size: 20,
      });
      // 将点图层添加到图层管理器
      view.addLayer(pointLayer);

      // 设置点数据
      var data = [
        {
          geometry: {
            type: "Point",
            coordinates: [116.404, 39.915],
          },
          properties: {
            name: "点1",
          },
        },
        {
          geometry: {
            type: "Point",
            coordinates: [
              116.404 + Math.random() * 0.001,
              39.915 + Math.random() * 0.001,
            ],
          },
          properties: {
            name: "点2",
          },
        },
        {
          geometry: {
            type: "Point",
            coordinates: [
              116.404 + Math.random() * 0.001,
              39.915 + Math.random() * 0.001,
            ],
          },
          properties: {
            name: "点2",
          },
        },
        {
          geometry: {
            type: "Point",
            coordinates: [
              116.404 + Math.random() * 0.001,
              39.915 + Math.random() * 0.001,
            ],
          },
          properties: {
            name: "点2",
          },
        },
        {
          geometry: {
            type: "Point",
            coordinates: [
              116.404 + Math.random() * 0.001,
              39.915 + Math.random() * 0.001,
            ],
          },
          properties: {
            name: "点2",
          },
        },
      ];

      //将数据设置在点图层里
      pointLayer.setData(data);

实现效果：

2.3 添加热力图层

 // 创建图层
      let layer = new mapvgl.HeatmapLayer({
        gradient: {
          0: "rgb(50,50,255)",
          1: "rgb(255,50,50)",
        },
        max: 100,
        min: 0,
      });
      // 将点图层添加到图层管理器
      view.addLayer(layer);

      // 设置点数据
      var data = [
        {
          geometry: {
            type: "Point",
            coordinates: [116.404 + Math.random(), 39.915 + Math.random()],
          },
          properties: {
            name: "点1",
          },
        },
      ];

      for (let i = 0; i < 1000; i++) {
        data.push({
          geometry: {
            type: "Point",
            coordinates: [116.404 + Math.random(), 39.915 + Math.random()],
          },
          properties: {
            count: Math.random() * 100,
          },
        });
      }

      //将数据设置在点图层里
      layer.setData(data);

实现效果：

2.4 添加Three.js图层

使用Three.js相关功能时，除在之前引用的百度地图资源和mapv资源外，还需引入Three相关依赖：

 <!-- 如果使用到Three.js相关的图层需要引用 -->
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.140/dist/mapvgl.threelayers.min.js"></script>

使用Threejs

MapVGL中内置了Threejs，在引入mapvgl.threelayers之后，您不必在项目中再次引入Three.js，可以通过如下方法拿到THREE对象

var THREE = mapvgl.THREE;

例如使用mapv+Three+ThreeGLTFLoader()实现三维模型加载：

      // 创建图层
      let layer = new mapvgl.ThreeLayer();

      //   将图层添加到管理器
      view.addLayer(layer);
      //坐标转换
      var tPoint = mapvgl.MercatorProjection.convertLL2MC(point); 
      //初始化Three    
      var THREE = mapvgl.THREE;
      //加载模型
      var loader = new THREE.GLTFLoader();
      loader.load("./assets/model/rocket.glb", (gltf) => {
        console.log(gltf);
        var model = gltf.scene;
        model.position.set(tPoint.lng, tPoint.lat, 0);
        model.scale.set(10, 10, 10);
        layer.add(model);

        // 添加平行光
        var light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(0, 0, 1);
        layer.add(light);
        var light1 = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(1, 1, 1);
        layer.add(light1);
      });

实现效果：

2.5 炫光特效与发光特效

1.bloomEffect炫光效果

// 创建炫光处理通道
var bloomEffect = new mapvgl.BloomEffect({
    threshold: 0.2,
    blurSize: 2.0
});

// 在图层管理器View中，通过传入effects参数使用
var view = new mapvgl.View({
    effects: [bloomEffect],
    map: bmapgl
});

实现效果：

2.BrightEffect发光特效

// 创建炫光处理通道
var bright = new mapvgl.BrightEffect({
    threshold: 0.2,
    blurSize: 2.0,
    clarity: 0.8
});

// 在图层管理器View中，通过传入effects参数使用
var view = new mapvgl.View({
    effects: [bright],
    map: bmapgl
});

实现效果：