echarts 引入百度地图

最新推荐文章于 2024-08-20 01:10:00 发布

折纸成鸢。

最新推荐文章于 2024-08-20 01:10:00 发布

阅读量9.1k

点赞数

分类专栏： vue 文章标签： echarts javascript

本文链接：https://blog.csdn.net/qq_26679989/article/details/123502145

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

本文介绍了如何在Echarts中结合百度地图，利用custom属性自定义地图上的定点图标，并通过mapStyle属性调整地图颜色风格。通过设置不同状态的图片，实现定制化的站点展示，并提供了详细的代码示例来展示如何计算和定位图片位置。

摘要由CSDN通过智能技术生成

echarts 引入百度地图

在写大数据相关的大屏中，会遇到需自定义定点图标的问题，这样就必须运用到echarts series的custom属性。
echarts百度地图 custom 属性的运用：
首先上效果图：
在这里插入图片描述
这样一个效果的地图，需要运用echarts的 bmap引入地图，通过mapStyle属性来对地图进行调色，代码如下：

bmap: {
          center: [
            parseFloat(elderInfo.longitude),
            parseFloat(elderInfo.latitude),
          ],//这里引入你的地图的中心点经纬度
          zoom: 14,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#003483",
                },
              },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#00023C",
                },
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "highway",
                elementType: "all",
                stylers: {
                  color: "#000F54",
                },
              },
              {
                featureType: "highway",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry",
                stylers: {
                  color: "#000F54",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: "#000F54",
                },
              },
              {
                featureType: "poi",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#ffffff",
                  visibility: "on",
                },
              },
              {
                featureType: "poi",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ffffff",
                  visibility: "on",
                },
              },
              {
                featureType: "green",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "subway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  color: "#000F52",
                },
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  // visibility: "off",
                  color: "#000F52",
                },
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "boundary",
                elementType: "all",
                stylers: {
                  color: "#000F52",
                },
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  visibility: "off",
                  // 'color': '#000F52'
                },
              },
              {
                featureType: "label",
                elementType: "labels",
                stylers: {
                  color: "#00023C",
                },
              },
              {
                featureType: "poilabel",
                elementType: "labels",
                stylers: {
                  color: "#00023C",
                },
              },
              {
                featureType: "poilabel",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#002F7D",
                },
              },
              {
                featureType: "label",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#002F7D",
                },
              },
            ],
          },
        },

这样对地图调色完成后，需用到series中的custom属性来自定义图标

series:[
	{
			type: "custom",
            name: "站点",
            id: "homeMap",
            coordinateSystem: "bmap",
            renderItem: function (params, api) {
              return addImage(params, api, dataTemp);
            },
            data: dataTemp,
            zlevel: 1,
            label: {
              show: false,
            },
	}
]
//计算图片的位置，已经通过不同的状态显示不同的图片
var addImage = function (params, api, realData) {
        let imgUrl = "";
        if (realData[params.dataIndex].state == 1) {
          imgUrl = that.img1;
        } else if (realData[params.dataIndex].state == 2) {
          imgUrl = that.img2;
        }
        realData[params.dataIndex].x = api.coord([
          realData[params.dataIndex].lng,
          realData[params.dataIndex].lat,
        ])[0];
        realData[params.dataIndex].y =
          api.coord([
            realData[params.dataIndex].lng,
            realData[params.dataIndex].lat,
          ])[1] - 38;
        return {
          type: "image",
          style: {
            image: imgUrl,
            x:
              api.coord([
                realData[params.dataIndex].lng,
                realData[params.dataIndex].lat,
              ])[0] - 38,
            y:
              api.coord([
                realData[params.dataIndex].lng,
                realData[params.dataIndex].lat,
              ])[1] - 76,
            width: 76,
            height: 76,
          },
        };
      };

通过重复定义给点标明名称

series:[
	{
			name: "中心站点",
            type: "effectScatter",
            coordinateSystem: "bmap",
            data: data,
            encode: {
              value: 2,
            },
            symbolSize: function (val) {
              return val[2] / 10;
            },
            showEffectOn: "emphasis",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              formatter: "{b}",
              position: "inside",
              show: true,
              color: "#fff",
              fontSize: 18,
            },
            itemStyle: {
              color: "#f4e925",
              shadowBlur: 10,
              shadowColor: "#333",
            },
            zlevel: 1,
	}
]