echarts百度地图2021最新实现方式（点，线结合）

84 阅读 0 评论 56 点赞

我是靠谱客的博主优雅野狼，最近开发中收集的这篇文章主要介绍echarts百度地图2021最新实现方式（点，线结合），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

先在html文件中准备一个定义了高宽的 DOM 容器
```
<div id="map" style="width: 100%;height:900px;"></div>
```

引入js

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=百度的API Key"></script>

开始写js代码

// 1.初始化
var dom = document.getElementById("map");
var myChart = echarts.init(dom);

// 2.数据准备
// 国家的坐标
var geoCoordMap = {
"中国":[104.195397,35.86166],
"日本":[138.252924,36.204824],
"韩国":[127.766922,35.907757],
}；
// 需要标注的国家数据
var data =[ {name: '中国', value: 300},
    {name: '日本', value: 150},
    {name: '韩国', value: 200},];
// 将点的中文位置转为经纬度坐标
var convertData = function (data) {
       var res = [];
       for (var i = 0; i < data.length; i++) {
           var geoCoord = geoCoordMap[data[i].name];
           if (geoCoord) {
               res.push({
                   name: data[i].name,
                   value: geoCoord.concat(data[i].value)
               });
           }
       }
       //console.log(res);
       return res;
   };
   
// 对于线的数据处理
var data2 = [
    [{name:'日本'},{name:'中国'}],
    [{name:'韩国'},{name:'日本'}]
];
var convertData2 = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem[0].name];
        var toCoord = geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
            res.push([
                {
                    coord: fromCoord,
                },
                {
                    coord: toCoord,
                },
            ]);
        }
    }
    return res;
};

   
// 3.配置项设置
//飞线图标
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

var  option = {
title: {
    text: '企业贸易区域分布',
    left: 'center'
},
tooltip : {
    formatter: function(params) {
      return (
        "贸易金额"+'<br/> '+
        params.name +' '+ ' : ' +params.value[2]
      );
    }
},
bmap: {
    center:[104.195397,35.86166],
    zoom: 5,
    roam: true,//是否可拖拽
    mapStyle: {
        styleJson: [{
            'featureType': 'water',
            'elementType': 'all',
            'stylers': {
                'color': '#75cff0'
            }
        }, {
            'featureType': 'land',
            'elementType': 'all',
            'stylers': {
                'color': '#e4ecc2'
            }
        }, {
            'featureType': 'railway',
            'elementType': 'all',
            'stylers': {
                //'visibility': 'off'
                'color': '#cccccc'
            }
        }, {
            'featureType': 'highway',
            'elementType': 'all',
            'stylers': {
                'color': '#fdfdfd'
            }
        }, {
            'featureType': 'highway',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'off'
            }
        }, {
            'featureType': 'arterial',
            'elementType': 'geometry',
            'stylers': {
                'color': '#fef6c0'
            }
        }, {
            'featureType': 'arterial',
            'elementType': 'geometry.fill',
            'stylers': {
                'color': '#c0b950'
            }
        }, {
            'featureType': 'poi',
            'elementType': 'all',
            'stylers': {
                //'visibility': 'off'
                'color': '#c08673'
            }
        }, {
            'featureType': 'green',
            'elementType': 'all',
            'stylers': {
                'visibility': 'off'
            }
        }, {
            'featureType': 'subway',
            'elementType': 'all',
            'stylers': {
                'visibility': 'off'
            }
        }, {
            'featureType': 'manmade',
            'elementType': 'all',
            'stylers': {
                'color': '#d1d1d1'
            }
        }, {
            'featureType': 'local',
            'elementType': 'all',
            'stylers': {
                'color': '#d1d1d1'
            }
        }, {
            'featureType': 'arterial',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'off'
            }
        }, {
            'featureType': 'boundary',
            'elementType': 'all',
            'stylers': {
                'color': '#fefefe'
            }
        }, {
            'featureType': 'building',
            'elementType': 'all',
            'stylers': {
                'color': '#d1d1d1'
            }
        }, {
            'featureType': 'label',
            'elementType': 'labels.text.fill',
            'stylers': {
                'color': '#999999'
            }
        }]
    }
},
series : [
    {
        name: 'pm2.5',
        type: 'scatter',
        coordinateSystem: 'bmap',
        //symbol:'pin',
        //symbol:'image:///static/img/坐标.png',
        symbol:'path://M0,-28 C4.97056275,-28 9,-24.00634644 9,-19.07992512 C9,-17.8616986 8.75360187,-16.7005104 8.30750495,-15.642645 C7.4180692,-13.7976331 6.60280551,-12.1374788 5.86171387,-10.6522416 L5.49734905,-9.9241533 C2.09460285,-3.1449169 0.365363613,-0.2748662 0.309631348,-0.2486559 C0.152069092,0.0828853 -0.279388428,0.0828853 -0.451770485,-0.2486559 L-8.30750495,-15.642645 C-8.75360187,-16.7005104 -9,-17.8616986 -9,-19.07992512 C-9,-24.00634644 -4.97056275,-28 0,-28 Z M0,-22 C-1.65685425,-22 -3,-20.65685425 -3,-19 C-3,-17.3431458 -1.65685425,-16 0,-16 C1.65685425,-16 3,-17.3431458 3,-19 C3,-20.65685425 1.65685425,-22 0,-22 Z',
        color:'#d10007',
        data: convertData(data),
        symbolSize: function (val) {
            return val[2] / 10;
        },
        encode: {
            value: 2
        },
        label: {
            formatter: '{b}',
            position: 'right',
            show: false
        },
        emphasis: {
            label: {
                show: true
            }
        }
    },
    {
        type: 'lines',
        coordinateSystem: 'bmap',
        zlevel: 10,
        effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: 'red',
            symbol: planePath,
            symbolSize: 3
        },
        lineStyle: {
            normal: {
                color: '#a6c84c',
                width:1,
                opacity: 0.4,
                curveness: 0.2
            }
        },
        data: convertData2(data2)

        }
    ]
};

 
 4.最后渲染生成地图
myChart.setOption(option);

4.其它拓展
1）如果想把地图上的地名，省份等文字标签都隐藏，可在mapStyle属性中设置

{
   "featureType": "all",
   "elementType": "labels.text.fill",
   "stylers": {
       //"color": "#ff452c",
       "visibility": "off"
   }
},

还有一些其他的拓展功能没有写出来，后面再更新吧。

注：以上只有一步是需要申请自己的百度地图的api key调用，其他的都可以直接用，大家也可以在我的基础上进行扩展。

最后

以上就是优雅野狼为你收集整理的echarts百度地图2021最新实现方式（点，线结合）的全部内容，希望文章能够帮你解决echarts百度地图2021最新实现方式（点，线结合）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：BI
浏览次数：84 次浏览
发布日期：2024-01-09 18:05:48
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_ogfy_12__23__26_3.html

echarts百度地图2021最新实现方式（点，线结合）

概述

最后

评论列表共有 0 条评论

发表评论取消回复

echarts百度地图2021最新实现方式（点，线结合）

概述

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复