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

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

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

第一反应就是，拿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，所以这里用了thislet 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

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

html 图片添加遮罩层,jQuery图片添加渐变遮罩层插件
这是一款jQuery图片添加渐变遮罩层插件.通过该插件,可以为一副背景图片添加指定的渐变遮罩层.该插件支持CSS mix-blend-mode混合模式. 使用方法在页面中引入jquery和jquer ...
echarts 中使用百度地图 bmap （基础使用：仅显示、定义样式）
1. 实现功能实现简单的自定义样式百度地图,仅显示(基础,可自己研究扩展) 效果: 2. 代码步骤第一步:创建基础结构,id="map" 的 div 做 echarts 容器 ...
echarts中为坐标轴添加箭头
1.实现的最终效果: 2.实现思路: (1).刚开始翻看echarts官方网站上面的教程.发现有个属性可以添加箭头: 代码如下: 实现效果:(跟最终的样式有所出入) (2).后来在网上翻看资料,发现s ...
在echarts中使用百度地图，卫星地图
在echarts中使用百度地图,卫星地图  <script src="https://cdnjs.cloudflare.com/ajax/ ...
html文件在echarts中,老师，echarts中所有的案例都是.html属性的文件吗？
置顶老师参与老师,echarts中所有的案例都是.html属性的文件吗? 我是管理员大大发表于2019年11月26日如下是echarts中的实例,想请教一下,这是什么属性的文件? app.ti ...
ECharts 中的事件和行为
更多关于Apache ECharts的文档,请阅读: Apache ECharts文档专题 <Apache ECharts教程> 5 分钟上手 ECharts ECharts 5 新特性 ...
Echarts中对地图的指定区域文字展示指定的颜色
Echarts中对地图的指定区域文字展示指定的颜色项目场景: 为提高客户满意度,修改地图中某个区域的文字颜色解决方案: 通过修改series-map.data.label.color属性参考链接 ...
echarts中graphic_echarts 绘制网格教你使用graphic
echarts 绘制网格教你使用graphic 主子镇楼不经常使用的echarts的同学对于echarts 的认识基本停留在饼图,柱形图,条形图,折线图等一系列常规图形上,对于网格基本是一脸懵,小 ...
echarts中markline移动，x轴绘制俩条垂直移动线
需求要求:坐标轴上有俩条垂直markline,并且可以单独移动思路:首先先画出俩条markline,分别为X0,X1:在markline俩线条中间,添加一个graphic矩形Area 其次在mark ...

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

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

最新文章

热门文章