系列文章目录
燃，拿来即用！Echarts动态排名柱状图(自适应电脑和手机端)
漏刻有时数据可视化Echarts组件开发(27)：盒须图(箱线图)前后端php交互的实战案例
漏刻有时数据可视化Echarts组件开发(26):全国地图三级热力图下钻和对接api自动调用数据开发实录
漏刻有时数据可视化Echarts组件开发(25)：引导线labelLine和散点图scatter的开发
漏刻有时数据可视化Echarts组件开发(24)：本地离线的地图下钻与散点图
漏刻有时数据可视化Echarts组件开发(23)：世界地图动态时间轴的散点气泡图
漏刻有时数据可视化Echarts组件开发(22):echarts高端地图交互美化
漏刻有时数据可视化Echarts组件开发(18)：渐变透明柱状图和地图map结合的案例
漏刻有时数据可视化Echarts组件开发(17):值域漫游图
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
漏刻有时数据可视化Echarts组件开发(6):象形柱图实现水塔水位的动画
Echarts实战案例代码(59)：geomap实现飞线、散点、引导线以及重叠label的解决
漏刻有时数据可视化Echarts组件开发(7)：geo地图map3D组件的定时高亮轮播的解决方案
Echarts实战案例代码(46)：带渐变背景颜色的倾斜角度的图表的CSS样式表解决方案
前言
1.关于区域掩膜
在地图可视化中，经常需要对地图进行局部显示或隐藏。基于WebGL的模板检测，百度地图JSAPI GL提供了MapMask类用来控制地图元素的局部显示与隐藏。
并可以针对POI标注、底图、楼块
局部显示：只展示指定区域的地图及地图元素（poi标注、底图、楼块等），隐藏掉区域外的地图元素以突出重点。
局部隐藏：隐藏掉局部区域地图元素，比如隐藏掉指定园区范围的地图元素，然后自定义叠加园区模型。
注意：
1.局部隐藏适用于地图大级别情况，建议在zoom>=18级时使用；
2.初始地图的中心点需要设置到掩膜区域内
效果图如下：
2.掩膜开发说明
网络上针对省市县等标准行政区域实现的案例比较多，但是具体某一个指定区域实现区域掩膜的案例比较少，也是本案例发布的原因；
指定指定区域的获取，牵涉到百度地图经纬度坐标的拾取，案例采用漏刻有时自有【百度地图自定义行政区划边界】开发工具，在评论中体现；
基于百度地图jsAPI GL实现；
调用MapMask类库；
一、指定区域掩膜基础
1.拾取经纬度的格式
见上图，通过拾取工具完成指定区域经纬度坐标点的拾取，并组成相应的数组，便于后续格式的转化使用。
[120.193294,30.334456],[120.193833,30.333302],[120.194156,30.331229],[120.194264,30.329546],[120.194318,30.329141],[120.19651,30.32925],[120.19863,30.329375],[120.199905,30.32939],[120.200031,30.329499],[120.199995,30.330606],[120.199959,30.331385],[120.199923,30.331884],[120.199923,30.332694],[120.199851,30.333614],[120.199744,30.334409],[120.199564,30.335001],[120.199079,30.335079],[120.198756,30.335469],[120.198504,30.335609],[120.198109,30.335593],[120.196707,30.335297],[120.195683,30.335095],[120.19527,30.335095],[120.193294,30.334518]
2.掩膜区域坐标点数组格式
var path = [ new BMapGL.Point(116.31951444701689,40.03514188328609), new BMapGL.Point(116.31914525270483,40.03627653457813), new BMapGL.Point(116.31800011574751,40.03960034324275), new BMapGL.Point(116.31419172285828,40.03965310472413), new BMapGL.Point(116.31601289759325,40.037228304952336), new BMapGL.Point(116.31924096994166,40.03521921152976) ];
3.将拾取的经纬度格式进行格式化
// 指定区域数据格式化处理; var ptArr = []; for (var i = 0; i < sqData.length; i++) { var pt = new BMapGL.Point(sqData[i][0], sqData[i][1]); ptArr.push(pt); } //console.log(ptArr);
掩膜参数
// 创建区域掩膜 var mapmask = new BMapGL.MapMask(path, { showRegion: 'inside', // 显示区域范围以内部分 isBuildingMask: true, // 楼块是否参与掩膜 isPoiMask: true, // poi标注是否参与掩膜 isMapMask: true // 底图是否参与掩膜 }); // 将区域掩膜添加到地图上，实现掩膜效果 map.addOverlay(mapmask);
二、核心代码
1.引入库
代码如下（示例）：
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=3HGqGo1RHf8zsLZ***"></script> <script src="mapstyleJson.js">//个性化百度地图皮肤</script>
2.构建百度地图DOM容器
代码如下（示例）：
<div id="container"></div>
3.百度地图开发
（1）地图初始化
var map = new BMapGL.Map('container'); var pointCenter = new BMapGL.Point(120.196689,30.332336); map.centerAndZoom(pointCenter, 18); map.enableScrollWheelZoom(); map.setMapStyleV2({ styleJson: styleJson });
案例使用的是百度地图GL版，因此，在使用个性化地图时，加载map.setMapStyleV2版本。
（2）使用地图中心点作为标注
var marker = new BMapGL.Marker(pointCenter); map.addOverlay(marker);
（2）区域掩膜核心代码
- 拾取经纬度坐标，组成封闭的指定区域；
- 将拾取数据转化为MapMask所需的格式；
- 增加封闭区域边框线，进行美化展示；
var sqData = [[120.193294, 30.334456], [120.193833, 30.333302], [120.194156, 30.331229], [120.194264, 30.329546], [120.194318, 30.329141], [120.19651, 30.32925], [120.19863, 30.329375], [120.199905, 30.32939], [120.200031, 30.329499], [120.199995, 30.330606], [120.199959, 30.331385], [120.199923, 30.331884], [120.199923, 30.332694], [120.199851, 30.333614], [120.199744, 30.334409], [120.199564, 30.335001], [120.199079, 30.335079], [120.198756, 30.335469], [120.198504, 30.335609], [120.198109, 30.335593], [120.196707, 30.335297], [120.195683, 30.335095], [120.19527, 30.335095], [120.193294, 30.334518]] // 指定区域数据格式化处理; var ptArr = []; for (var i = 0; i < sqData.length; i++) { var pt = new BMapGL.Point(sqData[i][0], sqData[i][1]); ptArr.push(pt); } //console.log(ptArr); var mapmask = new BMapGL.MapMask(ptArr, { isBuildingMask: true, isPoiMask: true, isMapMask: true, showRegion: 'inside',//outside topFillColor: '#5679ea', topFillOpacity: 0.5, sideFillColor: '#5679ea', sideFillOpacity: 0.9 }); map.addOverlay(mapmask); var border = new BMapGL.Polyline(ptArr, { strokeColor: '#4ca7a2', strokeWeight: 5, strokeOpacity: 1 }); map.addOverlay(border);
（3）区域掩膜options属性变量
showRegion string 展示区域内部还是外部，取值’inside’或’outside’，默认为’inside’
isBuildingMask boolean 楼块是否参与掩膜，默认为false
isMapMask boolean 底图是否参与掩膜，默认为false
isPoiMask boolean 底图上的Poi是否参与掩膜，默认为false
三、附件：个性化地图
var styleJson = [{ "featureType": "land", "elementType": "geometry", "stylers": { "color": "#fffff9ff" } }, { "featureType": "water", "elementType": "geometry", "stylers": { "color": "#69b0acff" } }, { "featureType": "highway", "elementType": "geometry.fill", "stylers": { "color": "#b5caa0ff" } }, { "featureType": "highway", "elementType": "geometry.stroke", "stylers": { "color": "#94ad79ff" } }, { "featureType": "nationalway", "elementType": "geometry.fill", "stylers": { "color": "#b5caa0ff" } }, { "featureType": "arterial", "elementType": "geometry.fill", "stylers": { "color": "#d4e2c6ff" } }, { "featureType": "cityhighway", "elementType": "geometry.fill", "stylers": { "color": "#d4e2c6ff" } }, { "featureType": "provincialway", "elementType": "geometry.fill", "stylers": { "color": "#d4e2c6ff" } }, { "featureType": "provincialway", "elementType": "geometry.stroke", "stylers": { "color": "#b5caa0ff" } }, { "featureType": "tertiaryway", "elementType": "geometry.fill", "stylers": { "color": "#ffffffff" } }, { "featureType": "tertiaryway", "elementType": "geometry.stroke", "stylers": { "color": "#b5caa0ff" } }, { "featureType": "fourlevelway", "elementType": "geometry.fill", "stylers": { "color": "#ffffffff" } }, { "featureType": "fourlevelway", "elementType": "geometry.stroke", "stylers": { "color": "#b5caa0ff" } }, { "featureType": "subway", "elementType": "geometry", "stylers": { "visibility": "off" } }, { "featureType": "railway", "elementType": "geometry", "stylers": { "visibility": "off" } }, { "featureType": "highwaysign", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "highwaysign", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "nationalwaysign", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "nationalwaysign", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "provincialwaysign", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "provincialwaysign", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "tertiarywaysign", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "tertiarywaysign", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "subwaylabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "subwaylabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "nationalway", "elementType": "geometry.stroke", "stylers": { "color": "#94ad79ff" } }, { "featureType": "cityhighway", "elementType": "geometry.stroke", "stylers": { "color": "#b5caa0ff" } }, { "featureType": "arterial", "elementType": "geometry.stroke", "stylers": { "color": "#b5caa0ff" } }, { "featureType": "highway", "stylers": { "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "6" } }, { "featureType": "highway", "stylers": { "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "7" } }, { "featureType": "highway", "stylers": { "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "8" } }, { "featureType": "highway", "stylers": { "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "9" } }, { "featureType": "highway", "elementType": "geometry", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "6" } }, { "featureType": "highway", "elementType": "geometry", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "7" } }, { "featureType": "highway", "elementType": "geometry", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "8" } }, { "featureType": "highway", "elementType": "geometry", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "9" } }, { "featureType": "highway", "elementType": "labels", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "6" } }, { "featureType": "highway", "elementType": "labels", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "7" } }, { "featureType": "highway", "elementType": "labels", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "8" } }, { "featureType": "highway", "elementType": "labels", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "9" } }, { "featureType": "nationalway", "stylers": { "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "6" } }, { "featureType": "nationalway", "stylers": { "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "7" } }, { "featureType": "nationalway", "stylers": { "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "8" } }, { "featureType": "nationalway", "stylers": { "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "9" } }, { "featureType": "nationalway", "elementType": "geometry", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "6" } }, { "featureType": "nationalway", "elementType": "geometry", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "7" } }, { "featureType": "nationalway", "elementType": "geometry", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "8" } }, { "featureType": "nationalway", "elementType": "geometry", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "9" } }, { "featureType": "nationalway", "elementType": "labels", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "6" } }, { "featureType": "nationalway", "elementType": "labels", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "7" } }, { "featureType": "nationalway", "elementType": "labels", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "8" } }, { "featureType": "nationalway", "elementType": "labels", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "9" } }, { "featureType": "provincialway", "stylers": { "curZoomRegionId": "0", "curZoomRegion": "8,9", "level": "8" } }, { "featureType": "provincialway", "stylers": { "curZoomRegionId": "0", "curZoomRegion": "8,9", "level": "9" } }, { "featureType": "provincialway", "elementType": "geometry", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "8,9", "level": "8" } }, { "featureType": "provincialway", "elementType": "geometry", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "8,9", "level": "9" } }, { "featureType": "provincialway", "elementType": "labels", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "8,9", "level": "8" } }, { "featureType": "provincialway", "elementType": "labels", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "8,9", "level": "9" } }, { "featureType": "cityhighway", "stylers": { "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "6" } }, { "featureType": "cityhighway", "stylers": { "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "7" } }, { "featureType": "cityhighway", "stylers": { "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "8" } }, { "featureType": "cityhighway", "stylers": { "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "9" } }, { "featureType": "cityhighway", "elementType": "geometry", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "6" } }, { "featureType": "cityhighway", "elementType": "geometry", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "7" } }, { "featureType": "cityhighway", "elementType": "geometry", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "8" } }, { "featureType": "cityhighway", "elementType": "geometry", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "9" } }, { "featureType": "cityhighway", "elementType": "labels", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "6" } }, { "featureType": "cityhighway", "elementType": "labels", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "7" } }, { "featureType": "cityhighway", "elementType": "labels", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "8" } }, { "featureType": "cityhighway", "elementType": "labels", "stylers": { "visibility": "off", "curZoomRegionId": "0", "curZoomRegion": "6,9", "level": "9" } }, { "featureType": "entertainment", "elementType": "geometry", "stylers": { "color": "#e4f0d7ff" } }, { "featureType": "manmade", "elementType": "geometry", "stylers": { "color": "#effcf0ff" } }, { "featureType": "education", "elementType": "geometry", "stylers": { "color": "#e3f7e4ff" } }, { "featureType": "building", "elementType": "geometry.stroke", "stylers": { "color": "#a1cfa4ff" } }, { "featureType": "poilabel", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "poilabel", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "education", "elementType": "labels.text.fill", "stylers": { "color": "#7a7a7aff" } }, { "featureType": "education", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "education", "elementType": "labels.text", "stylers": { "fontsize": 26 } }, { "featureType": "manmade", "elementType": "labels.text.fill", "stylers": { "color": "#afafafff" } }, { "featureType": "manmade", "elementType": "labels.text", "stylers": { "fontsize": 26 } }, { "featureType": "scenicspotslabel", "elementType": "labels.text.fill", "stylers": { "color": "#376b6dff" } }, { "featureType": "scenicspots", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "scenicspotslabel", "elementType": "labels", "stylers": { "visibility": "on" } }, { "featureType": "scenicspotslabel", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff", "weight": 4 } }, { "featureType": "country", "elementType": "labels.text.fill", "stylers": { "color": "#376b6dff" } }, { "featureType": "country", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff", "weight": 3 } }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": { "color": "#ffffffff" } }, { "featureType": "water", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffff00" } }, { "featureType": "water", "elementType": "labels.text", "stylers": { "fontsize": 24 } }];
总结
百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示，属于百度地图中高级开发的一个实战案例。牵涉面、线、点覆盖物以及个性化地图和经纬度拾取的知识点。在具体案例的实际应用场景会更为复杂，比如标注弹窗的实现、路线规划的实现等等。@漏刻有时
