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

已于 2023-01-07 18:15:09 修改
阅读量2.9k 收藏 16
点赞数 7
分类专栏： 地图开发 漏刻有时 文章标签： 信息可视化 javascript echarts
于 2023-01-07 17:02:29 首次发布
LOCKDATAV出品，为避免断章取义走弯路，请注意环境配置和时间。
本文链接：https://blog.csdn.net/weixin_41290949/article/details/128592166
版权
本文介绍了如何使用百度地图GL的MapMask类来实现地图上的区域掩膜效果，特别针对非标准行政区域，通过拾取经纬度坐标，创建掩膜区域，并展示了个性化地图的配置方法。案例涉及地图交互、数据格式转化和地图元素的控制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

系列文章目录

  1. 燃，拿来即用！Echarts动态排名柱状图(自适应电脑和手机端)
  2. 漏刻有时数据可视化Echarts组件开发(27)：盒须图(箱线图)前后端php交互的实战案例
  3. 漏刻有时数据可视化Echarts组件开发(26):全国地图三级热力图下钻和对接api自动调用数据开发实录
  4. 漏刻有时数据可视化Echarts组件开发(25)：引导线labelLine和散点图scatter的开发
  5. 漏刻有时数据可视化Echarts组件开发(24)：本地离线的地图下钻与散点图
  6. 漏刻有时数据可视化Echarts组件开发(23)：世界地图动态时间轴的散点气泡图
  7. 漏刻有时数据可视化Echarts组件开发(22):echarts高端地图交互美化
  8. 漏刻有时数据可视化Echarts组件开发(18)：渐变透明柱状图和地图map结合的案例
  9. 漏刻有时数据可视化Echarts组件开发(17):值域漫游图
  10. 漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
  11. 漏刻有时数据可视化Echarts组件开发(6):象形柱图实现水塔水位的动画
  12. Echarts实战案例代码(59)：geomap实现飞线、散点、引导线以及重叠label的解决
  13. 漏刻有时数据可视化Echarts组件开发(7)：geo地图map3D组件的定时高亮轮播的解决方案
  14. 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属性变量

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

评论 18
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

漏刻有时

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值