700字范文 > 数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案

数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案

时间：2020-03-25 22:40:40

系列文章目录

燃，拿来即用！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标注、底图、楼块等），隐藏掉区域外的地图元素以突出重点。局部隐藏：隐藏掉局部区域地图元素，比如隐藏掉指定园区范围的地图元素，然后自定义叠加园区模型。

注意：

局部隐藏适用于地图大级别情况，建议在zoom>=18级时使用；初始地图的中心点需要设置到掩膜区域内

效果图如下：

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./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所需的格式；增加封闭区域边框线，进行美化展示；

（3）区域掩膜options属性变量

showRegion string 展示区域内部还是外部，取值’inside’或’outside’，默认为’inside’isBuildingMask boolean 楼块是否参与掩膜，默认为falseisMapMask boolean 底图是否参与掩膜，默认为falseisPoiMask 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实现地图指定区域非省市县行政区显示，属于百度地图中高级开发的一个实战案例。牵涉面、线、点覆盖物以及个性化地图和经纬度拾取的知识点。在具体案例的实际应用场景会更为复杂，比如标注弹窗的实现、路线规划的实现等等。@漏刻有时

数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL 个性化地图定制指定区域经纬度拾取转化)

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。