Vue中加载mapv和mapvgl

r囧r小猫 2021-07-25 15:01 3193阅读 0赞

# 一，加载mapv  #

mapv示例地址：[https://mapv.baidu.com/examples/][https_mapv.baidu.com_examples]

### 1，引入百度地图和mapv ###

在public/index.html中引入：

其中的ak为自己的百度地图密匙：[http://lbsyun.baidu.com/apiconsole/key?application=key\#/home][http_lbsyun.baidu.com_apiconsole_key_application_key_home]

### 2，vue中具体代码 ###

<template>
      <div class="spatialSampling">
        <div id="map"></div>
      </div>
    </template>
    
    <script>
    export default {
      components: {},
      data() {
        return {};
      },
      created() {},
      mounted() {
        console.log("mapv", mapv);
        var map = new BMap.Map("map", {
          enableMapClick: false
        }); // 创建Map实例
        map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5); // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
        var randomCount = 300;
    
        var data = [];
    
        var citys = [
          "北京",
          "天津",
          "上海",
          "重庆",
          "石家庄",
          "太原",
          "呼和浩特",
          "哈尔滨",
          "长春",
          "沈阳",
          "济南",
          "南京",
          "合肥",
          "杭州",
          "南昌",
          "福州",
          "郑州",
          "武汉",
          "长沙",
          "广州",
          "南宁",
          "西安",
          "银川",
          "兰州",
          "西宁",
          "乌鲁木齐",
          "成都",
          "贵阳",
          "昆明",
          "拉萨",
          "海口"
        ];
    
        // 构造数据
        while (randomCount--) {
          var cityCenter = mapv.utilCityCenter.getCenterByCityName(
            citys[parseInt(Math.random() * citys.length)]
          );
          data.push({
            geometry: {
              type: "Point",
              coordinates: [
                cityCenter.lng - 2 + Math.random() * 4,
                cityCenter.lat - 2 + Math.random() * 4
              ]
            },
            count: 30 * Math.random()
          });
        }
    
        var dataSet = new mapv.DataSet(data);
    
        var options = {
          fillStyle: "rgba(255, 50, 50, 0.6)",
          shadowColor: "rgba(255, 50, 50, 1)",
          shadowBlur: 30,
          globalCompositeOperation: "lighter",
          methods: {
            click: function(item) {
              console.log(item);
            }
          },
          size: 5,
          // updateImmediate: true,
          draw: "simple"
        };
    
        var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
      },
      computed: {},
      methods: {}
    };
    </script>
    
    <style lang="scss">
    .spatialSampling {
      width: 100%;
      height: 100%;
      border: 1px solid red;
      #map {
        width: 80%;
        height: 80%;
      }
    }
    </style>

### 3，效果图 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

# 二，加载mapvgl #

mapvgl文档：[http://lbsyun.baidu.com/solutions/solutions/mapvdata][http_lbsyun.baidu.com_solutions_solutions_mapvdata]

mapvgl示例demo：[http://lbsyun.baidu.com/solutions/solutions/mapvdata][http_lbsyun.baidu.com_solutions_solutions_mapvdata]

## 1，引入mapvgl ##

## 2，具体代码（参考demo：[https://mapv.baidu.com/gl/examples/editor.html\#point-china.html][https_mapv.baidu.com_gl_examples_editor.html_point-china.html]） ##

注意：下面的id必须为：‘map\_container’，否则initMap()函数不能用。因为***[common.js][]***中默认用的就是map\_container

<template>
      <div class="spatialSampling">
        <div id="map_container"></div>
      </div>
    </template>
    
    <script>
    export default {
      components: {},
      data() {
        return {};
      },
      created() {},
      mounted() {
        var map = initMap({
          tilt: 48.8,
          heading: 0,
          center: [105.348145, 28.165926],
          zoom: 5,
          style: purpleStyle
        });
    
        var view = new mapvgl.View({
          map: map
        });
    
        fetch("https://mapv.baidu.com/gl/examples/data/chinalocation.json")
          .then(rs => {
            return rs.json();
          })
          .then(rs => {
            var data1 = [];
            var data2 = [];
            var data3 = [];
            for (var i = 0; i < rs[0].length; i++) {
              var geoCoord = rs[0][i].geoCoord;
              data1.push({
                geometry: {
                  type: "Point",
                  coordinates: geoCoord
                },
                properties: {
                  time: Math.random() * 100
                }
              });
            }
    
            for (var i = 0; i < rs[1].length; i++) {
              var geoCoord = rs[1][i].geoCoord;
              data2.push({
                geometry: {
                  type: "Point",
                  coordinates: geoCoord
                },
                properties: {
                  time: Math.random() * 10
                }
              });
            }
    
            for (var i = 0; i < rs[2].length; i++) {
              var geoCoord = rs[2][i].geoCoord;
              data3.push({
                geometry: {
                  type: "Point",
                  coordinates: geoCoord
                },
                properties: {
                  time: Math.random() * 10
                }
              });
            }
    
            view.addLayer(
              new mapvgl.PointLayer({
                blend: "lighter",
                shape: "circle",
                color: "rgba(255, 77, 77, 0.8)", // 点图层1颜色
                data: data1,
                size: 1
              })
            );
    
            view.addLayer(
              new mapvgl.PointLayer({
                blend: "lighter",
                shape: "circle",
                color: "rgba(255, 204, 0, 0.6)", // 点图层2颜色
                data: data2,
                size: 1.5
              })
            );
    
            view.addLayer(
              new mapvgl.PointLayer({
                blend: "lighter",
                shape: "circle",
                color: "rgba(255, 255, 0, 0.6)", // 点图层3颜色
                data: data3,
                size: 2
              })
            );
    
            view.addLayer(
              new mapvgl.PointTripLayer({
                blend: "lighter",
                shape: "circle",
                startTime: 0,
                endTime: 100,
                step: 0.1,
                trailLength: 10,
                color: "rgba(255, 255, 153, 0.5)", // 点动画图层颜色
                data: data1,
                size: 1.5
              })
            );
          });
      },
      computed: {},
      methods: {}
    };
    </script>
    
    <style lang="scss">
    .spatialSampling {
      width: 100%;
      height: 100%;
      border: 1px solid red;
      #map_container {
        width: 100%;
        height: 100%;
      }
    }
    </style>

官网路径

![20200501200747275.png][]![20200501200910750.png][]

调用路径：

https://mapv.baidu.com/gl/examples/static/common.js
    https://mapv.baidu.com/gl/examples/data/chinalocation.json

## 3，效果图 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

[https_mapv.baidu.com_examples]: https://mapv.baidu.com/examples/
[http_lbsyun.baidu.com_apiconsole_key_application_key_home]: http://lbsyun.baidu.com/apiconsole/key?application=key#/home
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/e80221c493cd4b0ba788b4cb10249eb1.png
[http_lbsyun.baidu.com_solutions_solutions_mapvdata]: http://lbsyun.baidu.com/solutions/solutions/mapvdata
[https_mapv.baidu.com_gl_examples_editor.html_point-china.html]: https://mapv.baidu.com/gl/examples/editor.html#point-china.html
[common.js]: https://mapv.baidu.com/gl/examples/static/common.js
[20200501200747275.png]: https://img-blog.csdnimg.cn/20200501200747275.png
[20200501200910750.png]: /images/20210725/8cb493166c33447d95d17382e8c47d98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/de58df5ca0a648859b36da4ee308ce83.png