vue中使用Mapbox+Echartsgl进行可视化

1，安装echarts和echartsgl

cnpm i echarts echarts-gl -S

然后在main.js中引入：

//引入echarts
import echarts from 'echarts'
import 'echarts-gl'
Vue.prototype.$echarts = echarts

 2,引入mapboxgl

在public/index.html中引入

<script src='https://api.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet'/>

3，代码

<template>
  <div class="spaceMeasurement">
    <div id="map"></div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    mapboxgl.accessToken = "pk.eyJ1IjoibGlqaWFuZ2ppYW5namlhbmciLCJhIjoiY2s2b2czbmltMG14cDNkbXpldjhkd3c3ZiJ9.zBaMzJo2X2UVPyFTtd5hEQ";
    this.init();
  },
  computed: {},
  methods: {
    init() {
      var chart = this.$echarts.init(document.getElementById("map"));
      chart.setOption({
        mapbox: {
          center: [104.065735, 30.659462],
          zoom: 6,
          pitch: 60,
          bearing: 0,
          style: "mapbox://styles/mapbox/dark-v9",
          boxHeight: 20,
          light: {
            main: {
              intensity: 1,
              shadow: true,
              shadowQuality: "high"
            },
            ambient: {
              intensity: 0.2
            }
          }
        },
        series: [
          {
            name: "常驻人口",
            type: "bar3D",
            shading: "realistic",
            coordinateSystem: "mapbox",
            silent: true,
            barSize: 1, // 柱子粗细
            bevelSize: 0.3,
            emphasis: {
              label: {
                show: false
              }
            },
            label: {
              show: true,
              distance: 0,
              formatter: "{b}",
              textStyle: {
                fontSize: 12
              }
            },

            data: [
              [104.065735, 30.659462, 165602],
              [104.773447, 29.352765, 3914]
            ]
          }
        ]
      });
      var map = chart
        .getModel()
        .getComponent("mapbox3D")
        .getMapbox();
      var hoveredStateId = null;

      map.on("load", () => {
        map.addControl(new mapboxgl.NavigationControl());
        map.addSource("source_wheatNum2017", {
          type: "geojson",
          data: "/data/sichuan_wheatNum2017.json"
        });
        map.addLayer(
          {
            id: "layer_wheatNum2017",
            source: "source_wheatNum2017",
            type: "fill",
            layout: {
              // visibility: "none"
              visibility: "visible"
            },
            paint: {
              // "fill-color": "#627BC1",
              // "fill-opacity": 0.1
              "fill-color": [
                "interpolate",
                ["linear"],
                ["get", "wheatNum_2017"],
                0,
                "#F2F12D",
                5000,
                "#EED322",
                10000,
                "#E6B71E",
                50000,
                "#DA9C20",
                100000,
                "#CA8323",
                200000,
                "#B86B25",
                300000,
                "#A25626",
                400000,
                "#8B4225",
                500000,
                "#723122"
              ],
              // "fill-opacity": 0.75
              "fill-opacity": [
                "case",
                ["boolean", ["feature-state", "hover"], false],
                1,
                0.65
              ]
            }
          },
          "waterway-label"
        );
        map.on("mouseenter", "layer_wheatNum2017", function(e) {
          map.getCanvas().style.cursor = "pointer";
        });
        var popup = new mapboxgl.Popup({
          closeButton: true,
          closeOnClick: true
        });
        map.on("mousemove", "layer_wheatNum2017", function(e) {
          if (e.features.length > 0) {
            if (hoveredStateId) {
              map.setFeatureState(
                { source: "source_wheatNum2017", id: hoveredStateId },
                { hover: false }
              );
            }
            hoveredStateId = e.features[0].id;
            map.setFeatureState(
              { source: "source_wheatNum2017", id: hoveredStateId },
              { hover: true }
            );
          }
          popup
            .setLngLat(e.lngLat)
            // .setHTML(e.features[0].properties.wheatNum_2017)
            .setHTML(
              "<h1 style='text-align:center;line-height: 50px'>" +
                e.features[0].properties.name +
                "</h1><h2>小麦产量:" +
                e.features[0].properties.wheatNum_2017 +
                "(吨)</h2>"
            )
            .addTo(map);
        });
        map.on("mouseleave", "layer_wheatNum2017", function(e) {
          map.getCanvas().style.cursor = "";
          if (hoveredStateId) {
            map.setFeatureState(
              { source: "source_wheatNum2017", id: hoveredStateId },
              { hover: false }
            );
          }
          hoveredStateId = null;

          popup.remove();
        });
      });
    }
  }
};
</script>

<style lang="scss">
.spaceMeasurement {
  width: 100%;
  height: 100%;
  // border: 1px solid red;
  #map {
    width: 100%;
    height: 100%;
    // border: 1px solid yellow;
  }
}
</style>

其中source_wheatNum2017的格式如下：

4，效果图

如果想要展示线状3D图，将上面的series改为以下代码即可：

注意，data数据多了个中括号[ ]

 series: [
          {
            type: "lines3D",
            coordinateSystem: "mapbox",
            effect: {
              show: true,
              constantSpeed: 10,
              trailWidth: 8,
              trailLength: 10,
              trailOpacity: 1,
              spotIntensity: 2
            },
            blendMode: "lighter",
            polyline: true,
            lineStyle: {
              width: 0.1,
              color: "rgb(200, 40, 0)",
              opacity: 0
            },

            data: [
              [[104.065735, 30.659462, 165602], [104.773447, 29.352765, 3914]]
            ]
          }
        ]

效果图：