echarts + Baidu Map implementa la visualización del mapa (el código usa vue como ejemplo)

1. Presentar la API de mapas de Baidu

//index.html中
<script src="http://api.map.baidu.com/api?v=2.0&ak=你的ak值"></script>

2. Instalar echarts

npm install echarts --save

3. Introduzca lo siguiente en el componente que necesita para crear un mapa.

import echarts from "echarts";                    
require("echarts/extension/bmap/bmap");
const CUSTOM_MAP_CONFIG = require("../../../static/custom_map_config.json");   

Este custom_map_config.json es un archivo de configuración del estilo del mapa Baidu. Hay una configuración recomendada por echart al final del artículo. También puede ir a Baidu Map para obtenerlo (Baidu Map—》Console----》Servicio destacado Plataforma----》Mapa de personalización) enlace

4. preparación de opciones

      {
        title: {
          text: "应急资源统计分散图",
          left: "center",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          triggerOn: "click",
          show:false
        },
        bmap: {                                    //百度地图配制
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson: CUSTOM_MAP_CONFIG          //地图样式配制
          }
        },
        series: []
      }

5. Crear una instancia del mapa

 let mapDiv = document.getElementById("material_map_box");
 let myChart = echarts.init(mapDiv);
 myChart.setOption(this.options);

archivo custom_map_config.json

[
    {
      "featureType": "water",
      "elementType": "all",
      "stylers": {
        "color": "#044161"
      }
    },
    {
      "featureType": "land",
      "elementType": "all",
      "stylers": {
        "color": "#004981"
      }
    },
    {
      "featureType": "boundary",
      "elementType": "geometry",
      "stylers": {
        "color": "#064f85"
      }
    },
    {
      "featureType": "railway",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "highway",
      "elementType": "geometry",
      "stylers": {
        "color": "#004981"
      }
    },
    {
      "featureType": "highway",
      "elementType": "geometry.fill",
      "stylers": {
        "color": "#005b96",
        "lightness": 1
      }
    },
    {
      "featureType": "highway",
      "elementType": "labels",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "arterial",
      "elementType": "geometry",
      "stylers": {
        "color": "#004981"
      }
    },
    {
      "featureType": "arterial",
      "elementType": "geometry.fill",
      "stylers": {
        "color": "#00508b"
      }
    },
    {
      "featureType": "poi",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "green",
      "elementType": "all",
      "stylers": {
        "color": "#056197",
        "visibility": "off"
      }
    },
    {
      "featureType": "subway",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "manmade",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "local",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "arterial",
      "elementType": "labels",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "boundary",
      "elementType": "geometry.fill",
      "stylers": {
        "color": "#029fd4"
      }
    },
    {
      "featureType": "building",
      "elementType": "all",
      "stylers": {
        "color": "#1a5787"
      }
    },
    {
      "featureType": "label",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    }
  ]

La preparación aquí debe utilizar la demostración oficial de echarts tanto como sea posible. No sé el motivo de la preparación del mapa de Baidu. Después de presentarlo, el mapa no puede aparecer. No he encontrado el problema específico. Si lo sabes el motivo, por favor deje un mensaje. ( demostración oficial de echarts )

6. Marcado de datos en el mapa.

En términos generales, utilizando la dispersión, el empuje en la serie es el siguiente

{
        type: "scatter",
        coordinateSystem: "bmap",            symbol:'circle',
        symbolSize: 70,
        label: {
          normal: {
            position: "inside",
            fontSize: 14,
            color: "#000000",
            lineHeight: 20,
            show: true
          },
          emphasis: {
            show: true
          }
        },
        itemStyle: {
          normal: {
            color: "#fff"
          }
        },
        data: []
      }