search

madfour / blog-docs

一个备忘录罢了
https://madfour.cn
MIT License
5 stars 0 forks source link

vue项目中使用 百度地图 实现 Echart5.x 地图(线图)效果 #56

Open madfour opened 3 years ago

madfour commented 3 years ago

基于vuecli4.x创建的项目，使用的 是vue2.x、Echarts5.x`

准备

项目的创建，以及 Echarts5.x 的安装，这里都不用说了，

如何使用百度地图：

在 public/index.html 的 body 结束标签引入一下代码：

<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=自己的密钥"></script>

Tips1: 因为 Echarts5.x 不在提供地图，所以需要我们自己引入地图文件：一种是使用 geoJSON, 一种是使用百度地图

Tips1：使用百度地图必须申请ak，对于密钥的申请，自行百度，很简单。点击此链接申请

百度地图的 个性地图 支持用户使用JavaScript API设置地图底图的样式风格以及控制组成地图底图的元素类的显示和隐藏。

可以在个性化编辑平台定制适合自己项目的地图。编辑生成的 JSON 就是 bmap.mapStyle.styleJson 的值。

绘制地图

<template>
  <div id="chart">
    <div id="mapChart" ref="mapChart" style="width:100%; height:100%;"></div>
  </div>
</template>
<script>
// 引入 Echarts 和 bmap
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";

// import { geoCoordMap } from "@/utils/city.js";  // 所有城市的坐标(毕竟后台返回的只有城市和相关的值而没有坐标)
import styleJson from "@/utils/styleJson.json"; // 个性化编辑平台定制适合自己项目的JSON

export default {
export default {
  data() {
    return {
      mapChart: null
    };
  },
  mounted() {
    this.mapInit();
  },
  methods: {
    mapInit() {
      const datas = [
        {
          fromName: "苏州",
          toName: "台湾",
          coords: [
            [120.6519, 31.3989],
            [121.49917, 25.12653]
          ],
          value: 90
        },
        {
          fromName: "台湾",
          toName: "厦门",
          coords: [
            [121.49917, 25.12653],
            [118.1689, 24.6478]
          ],
          value: 90
        },
        {
          fromName: "台湾",
          toName: "长沙",
          coords: [
            [121.49917, 25.12653],
            [113.0823, 28.2568]
          ],
          value: 90
        },
        {
          fromName: "新加坡",
          toName: "台湾",
          coords: [
            [103.82, 1.35],
            [121.49917, 25.12653]
          ],
          value: 90
        },
        {
          fromName: "苏州",
          toName: "北京",
          coords: [
            [120.6519, 31.3989],
            [116.4551, 40.2539]
          ],
          value: 90
        },
        {
          fromName: "苏州",
          toName: "西安",
          coords: [
            [120.6519, 31.3989],
            [109.1162, 34.2004]
          ],
          value: 40
        },
        {
          fromName: "西安",
          toName: "苏州",
          coords: [
            [109.1162, 34.2004],
            [120.6519, 31.3989]
          ],
          value: 10
        },
        {
          fromName: "苏州",
          toName: "厦门",
          coords: [
            [120.6519, 31.3989],
            [118.1689, 24.6478]
          ],
          value: 10
        },
        {
          fromName: "厦门",
          toName: "苏州",
          coords: [
            [118.1689, 24.6478],
            [120.6519, 31.3989]
          ],
          value: 10
        }
      ];
      let option = {
        title: {
          text: "百度地图",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        bmap: {
          center: [116.114129, 22],
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson // 在百度地图个性化编辑平台 生成的json
          }
        },
        series: [
          {
            name: "预约",
            type: "lines", // 路径图
            coordinateSystem: "bmap", // 使用地理坐标系
            zlevel: 1, //设置这个才会有轨迹线的小尾巴
            // polyline: true, // 默认false，设为true时 data.coords 中设置多于 2 个的顶点用来绘制多段线，设置为多段线后 lineStyle.curveness 无效。
            effect: {
              show: true,
              period: 10, //箭头指向速度，值越小速度越快
              trailLength: 0.3, //特效尾迹长度[0,1]值越大，尾迹越长重
              // color: '#fff', //流动点颜色
              symbol: "triangle", //箭头图标
              symbolSize: 6 //图标大小
            },
            lineStyle: {
              color: "#46bee9", //尾迹线条颜色
              width: 1, //线宽。
              curveness: 0.3, // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。
              opacity: 0.6 // 尾迹线条透明度
            },
            data: datas
          }
        ]
      };

      this.mapChart = echarts.init(this.$refs.mapChart); // 初始化
      this.mapChart.setOption(option);
      // ehcarts加载完成事件
      //this.mapChart.on("finished", () => { //不注释掉，里面的js无法生效
        // 从echarts对象中获取bmap对象
        const bmap = this.mapChart.getModel().getComponent("bmap").getBMap();
        // 设置地图最小缩放值
        bmap.setMinZoom(5);
        // 设置地图最大缩放值
        bmap.setMaxZoom(9);
        // 缩放结束后的事件
        // bmap.addEventListener('zoomend', function () {
        //   // 打印出当前缩放值
        //   console.log(20180925104046, bmap.getZoom());
        // })
      //});
    }
  }
};
</script>

Map

madfour commented 3 years ago

我的styleJSON (取消了县级以下城乡的显示，取消了所有道路以及标志的显示等等)

[
  {
    "featureType": "continent",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "country",
    "elementType": "labels",
    "stylers": {
      "visibility": "on"
    }
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "road",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "poilabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "poilabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "town",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "town",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "village",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "tertiaryway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "tertiaryway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "tertiaryway",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "highwaysign",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "highwaysign",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "nationalwaysign",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "nationalwaysign",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "provincialwaysign",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "provincialwaysign",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "subwaylabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "subwaylabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "tertiarywaysign",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "tertiarywaysign",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "subway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "subway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "subway",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "railway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "vacationway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "scenicspotsway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "local",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "local",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "roadarrow",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "footbridge",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "crosswalk",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "underpass",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "parkingspace",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "laneline",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "financelabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "financelabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "transportationlabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "transportationlabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "carservicelabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "carservicelabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "lifeservicelabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "lifeservicelabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "shoppinglabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "shoppinglabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "hotellabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "hotellabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "restaurantlabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "restaurantlabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "governmentlabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "governmentlabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "companylabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "companylabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "businesstowerlabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "businesstowerlabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "district",
    "elementType": "labels",
    "stylers": {
      "visibility": "on"
    }
  }
]