Echarts中使用bmap作为底图，添加行政划区遮罩层

分类：菜鸟笔记作者：L1nJIayu

前段时间需要做一个地图，由于思路错误等各种原因，走走停停也搞了大半个月。。。。。记录以下心路历程，希望能帮助到有需要的同学们。。。

要求的效果大概是这个样子的：

第一反应就是，拿bmap作为底图，然后再用geo画一个地图，两个地图重合不就OK了嘛！结果。。太天真。。。查了很多资料，大概就是说，这样子做，会导致两个地图使用的是各自的地图组件，这样如果用户缩放的时候，就不会同步缩放，而且会有坐标点不在同一个地方的情况！

出现的效果大概是这个样子：

（上面的效果，是我用geo画的，拿到深圳地图的GeoJSON之后，注册到echarts，再画出来的）

可以很明显看到是不重合的，虽然经纬度是一样的，但是缩放的比例不一样，没有办法调整。。

（查文档的时候，看到有series-map可以使用geoIndex来让两个组件共享同一个地图组件，但是我用的是bmap，这个思路砍掉砍掉！）

然后就思考了一下，不如用series-custom？？OMG，还要搞一堆坐标点，好像还要写好多个series-custom，太麻烦了，终归不是好的解决办法。。。

就这样走走停停，整个面板都块做完了，就剩地图了，不行，今天一定要搞出来！！！

换个思路，既然百度地图是echarts的扩展。。那么，何不直接使用百度地图提供的API？试试吧！

查了一下各自资料和文章，发现原来echarts使用了bmap以后，可以通过charts实例来获取里面使用到的地图组件。

let mapCharts= this.$echarts.init(document.getElementById('mapCharts'))
let map = mapCharts.getModel().getComponent('bmap').getBMap();

这样，就拿到这个地图组件了，可以随意使用百度地图提供的API了！

官方有提供画行政区域的的例子：地图JS API示例 | 百度地图开放平台

主要是使用Boundary()画边界、Label()画标签。

（我只拿了比较关键的代码过来，完整的还是去官方例子看比较清楚）

var bdary = new BMap.Boundary()
bdary.get("北京市海淀区", function(rs){       //获取行政区域
    var count = rs.boundaries.length; //行政区域的点有多少个
    var pointArray = [];
    for (var i = 0; i < count; i++) {
        var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
        map.addOverlay(ply);  //添加覆盖物
        pointArray = pointArray.concat(ply.getPath());
    }
}

效果：

参考了以后，终于解决了问题！

这是后面做出来的：

附上完整代码（代码里面还包括了折线图和标题内容可做参考）：

项目使用的是Vue，需要引入：

// main.js中 引入
import echarts from "echarts"
Vue.prototype.$echarts = echarts
// 当前模块引入
import 'echarts/extension/bmap/bmap'

option：

mapChartsOpt: {
    title: [
        {
            text: '累计上报车辆',
            top: '1%',
            left: '50%',
            textStyle: {
                color: '#fff',
                fontWeight: 'normal',
                fontSize: 15
            }
        },
        {
            text: `{number|2,600.0    } 辆`,
            top: '6%',
            left: '50%',
            textStyle: {
                color: '#fff',
                fontWeight: 'normal',
                fontSize: 10,
                rich: {
                    number: {
                        color: '#FF7800',
                        fontWeight: 'normal',
                        fontSize: '180%'
                    }
                }
            },
            
        },
        {
            text: '累计里程',
            top: '1%',
            left: '75%',
            textStyle: {
                color: '#fff',
                fontWeight: 'normal',
                fontSize: 15
            }
        },
        {
            text: `{number|54,350.0     } 辆 `,
            top: '6%',
            left: '75%',
            textStyle: {
                color: '#fff',
                fontWeight: 'normal',
                fontSize: 10,
                rich: {
                    number: {
                        color: '#05BDAB',
                        fontWeight: 'normal',
                        fontSize: '180%'
                    }
                }
            },
            
        }
    ],
    bmap: {
        center: [114.173632,22.648713],
        zoom: 11,
        roam: true,
        mapStyle: {
            styleJson: [
                {
                    "featureType": "water",
                    "elementType": "all",
                    "stylers": {
                        "color": "#03324C"
                    }
                },
                {
                    "featureType": "land",
                    "elementType": "all",
                    "stylers": {
                        "color": "#031F33"
                    }
                },
                {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "color": "#3C4952"
                    }
                },
                {
                    "featureType": "railway",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off",
                        "color": "#030C12"
                    }
                },
                {
                    "featureType": "highway",
                    "elementType": "geometry",
                    "stylers": {
                        "color": "#030C12"
                    }
                },
                {
                    "featureType": "highway",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#030C12",
                        "lightness": 1
                    }
                },
                {
                    "featureType": "highway",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off",
                        "color": "#030C12"
                    }
                },
                {
                    "featureType": "arterial",
                    "elementType": "geometry",
                    "stylers": {
                        "color": "#030C12",
                    }
                },
                {
                    "featureType": "arterial",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#030C12"
                    }
                },
                {
                    "featureType": "poi",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off",
                        "color": "#030C12"
                    }
                },
                {
                    "featureType": "green",
                    "elementType": "all",
                    "stylers": {
                        "color": "#17312C",
                        "visibility": "on"
                    }
                },
                {
                    "featureType": "local",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off",
                        "color": "#030C12"
                    }
                },
                {
                    "featureType": "arterial",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off",
                        "color": "#030C12"
                    }
                },
                {
                    "featureType": "building",
                    "elementType": "all",
                    "stylers": {
                        "color": "#1a5787"
                    }
                },
                {
                    "featureType": "label",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off",
                        "color": "#030C12"
                    }
                },
                {
                    "featureType": "subway",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }
            ]
        }
    },
    grid: {
        left: '3.5%',
        top: '3%',
        bottom: '4%',
        right: '6%'
    },
    xAxis: {
        type: 'category',
        data: ['01/01', '02/01', '03/01', '04/01', '05/01', '06/01'],
        axisLabel: {
            color: '#9AACB4'
        },
        axisLine: {
            lineStyle: {
                color: '#9AACB4'
            }
        },
        axisTick: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            color: '#9AACB4'
        },
        axisLine: {
            lineStyle: {
                color: '#9AACB4'
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                opacity: 0.3
            }
        }
    },
    series: [
        {
            type: 'line',
            smooth: true,
            lineStyle: {
                color: '#007EB1',
                opacity: 0.3
            },
            itemStyle: {
                normal: {
                    color: '#007EB1'
                },
                opacity: 0.3
            },
            data: [
                {
                    name: '01/01',
                    value: 1
                },
                {
                    name: '02/01',
                    value: 3
                },
                {
                    name: '03/01',
                    value: 5
                },
                {
                    name: '04/01',
                    value: 9
                },
                {
                    name: '05/01',
                    value: 14
                },
                {
                    name: '06/01',
                    value: 21
                }
            ]

        }
    ]
}

initCharts：

initCharts() {
    // 项目使用的是Vue，所以这里用了this
    let mapCharts = this.$echarts.init(document.getElementById('mapCharts '))
    mapCharts .setOption(this.mapChartsOpt) 

    // ========================== 以下是遮罩层绘制 ==========================
    var map = mapCharts .getModel().getComponent('bmap').getBMap();
    let districtList = ['深圳市罗湖区','深圳市南山区','深圳市福田区','深圳市盐田区','深圳市宝安区','深圳市龙岗区','深圳市龙华区','光明区','坪山区']
    let bdary = new BMap.Boundary();    // 边界
    // 覆盖物绘制
    districtList.forEach(item => {
        bdary.get(item, (rs) => {               //获取行政区域
            let count = rs.boundaries.length;   //行政区域的点有多少个
            if (count === 0) {
                alert('未能获取当前输入行政区域');
                return ;
            }
            let pointArray = [];
            for (let i = 0; i < count; i++) {
                let ply = new BMap.Polygon(rs.boundaries[i], {  //建立多边形覆盖物
                    strokeWeight: 1.5, 
                    strokeColor: "#ffffff",
                    strokeStyle: 'dashed',
                    strokeOpacity:0.5, 
                    fillColor: '#cccccc', 
                    fillOpacity: 0.3 
                }); 
                map.addOverlay(ply);  //添加覆盖物
                pointArray = pointArray.concat(ply.getPath());
            }
        });
    })
    // 标签绘制
    let labelPoints = [ new BMap.Point(114.133407,22.586888), new BMap.Point(113.935636,22.549798), new BMap.Point(114.024068,22.564752),
                        new BMap.Point(114.249191,22.617713), new BMap.Point(113.858371,22.660982), new BMap.Point(114.238041,22.7282),
                        new BMap.Point(114.022692,22.720197), new BMap.Point(113.909312,22.789131), new BMap.Point(114.361997,22.705532)]
    let optsArray = [{},{},{},{},{},{},{},{},{}]
    let labelArray = []
    let contentArray = ["罗湖区", "南山区", "福田区", "盐田区", "宝安区", "龙岗区", "龙华区", "光明新区", "坪山区"]
    for(let i = 0;i < labelPoints.length; i++) {
        optsArray[i].position = labelPoints[i]
        labelArray[i] = new BMap.Label(contentArray[i],optsArray[i])
        labelArray[i].setStyle({
            color : "white",
            fontSize : "12px",
                height : "20px",
                lineHeight : "20px",
                fontFamily:"微软雅黑",
                borderWidth: 0,
                backgroundColor: 'transparent'
            });
        map.addOverlay(labelArray[i])         
    }
}

【补充】下面是我参考的，觉得有帮助的各种资料、文章和工具

百度地图官方API地址：百度地图JSAPI 2.0类参考

百度地图-行政划区示例：地图JS API示例 | 百度地图开放平台

阿里官方提供的在线获取GeoJSON、SVG：DataV.GeoAtlas地理小工具系列

百度地图-坐标拾取：拾取坐标系统

【Echarts-百度地图省分着色】Echarts-百度地图省分着色 - SegmentFault 思否

【EchartsGallery实例】https://gallery.echartsjs.com/editor.html?c=xr1IEt3r4Q

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

javascriptvue.js

相关推荐

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习编程？其实不难，不过在学习编程之前你得先了解你的目的是什么？这个很重要，因为目的决定你的发展方向、决定你的发展速度。
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等，根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生学习Java开发，但要结合自身的情况，先了解自己适不适合去学习Java，不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研，多看、多想、多练
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服务器有时候会断掉，所以写个shell脚本每五分钟去判断是否连接，于是就有下面的shell脚本。
SQL BETWEEN 操作符
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
​​windows上传ipa到开发者中心app store的方法
假如你已经使用过苹果开发者中心上架app，你肯定知道在苹果开发者中心的web界面，无法直接提交ipa文件，而是需要使用第三方工具，将ipa文件上传到构建版本，开...
SQL 入门篇之什么是别名？
下面的 SQL 语句指定了两个别名，一个是 name 列的别名，一个是 country 列的别名。**提示：**如果列名称包含空格，要求使用双引号或方括号：
windows上传ipa文件到app store的方法​
在使用H5混合开发的app打包后，需要将ipa文件上传到appstore进行发布，就需要去苹果开发者中心进行发布。​
SQL AND & OR 运算符
+----+--------------+---------------------------+-------+---------+
C++ 数组
数组的声明并不是声明一个个单独的变量，比如 number0、number1、...、number99，而是声明一个数组变量，比如 numbers，然后使用 nu...
最全iOS 应用上架流程提交到AppStore
第一步：到appuploader官网下载辅助工具和iCloud驱动，使用前面创建的AppID登录。
SQL ALTER TABLE 语句
如需删除表中的列，请使用下面的语法（请注意，某些数据库系统不允许这种在数据库表中删除列的方式）：
dism操作巨慢
前不久在制作win11pe，制作了一版，1.26GB，太大了，不满意，想再裁剪下，发现这次dism mount正常，commit或discard巨慢，以前都很快...
三种方法卸载Symantec Endpoint Protection 赛门铁克
赛门铁克各个版本概览：https://knowledge.broadcom.com/external/article?legacyId=tech163829
python3.6、python3.10用什么版本的pip
实测Python 3.6.6用pip 21.3.1，再高就报错了，Python 3.10.7用pip 22.3.1是可以的
博通和诺顿
Broadcom Corporation （博通公司，股票代号AVGO）是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
高版本c4d在低版本windows系统上打开后不显示窗格
发现个问题，server2016上安装了c4d这些版本，低版本的正常显示窗格，但红色圈出的高版本c4d打开后不显示窗格，
基础网络windows不要使用TAT、如何卸载TAT
TAT：https://cloud.tencent.com/document/product/1340
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot