3D地图开发自定义marker标注物地图样式区域掩摸行政区划闪烁图标

　　实现效果
　　视频太大这里就不传了
　　实现代码2.1地图初始化var point = new BMapGL.Point(clng || lng, clat || lat)         map.centerAndZoom(point, zoom || 19);         map.enableScrollWheelZoom(false);         map.setHeading(-30);         map.setTilt(Tilt);         map.centerAndZoom(point, zoom || 19); 2.2获取数据（模拟）var markers= [{                     lng: 119.306239,                     lat: 26.075302,                     lv: ＂三＂,                     num: 10,                     type: ＂red＂                 },                 {                     lng: 119.306239,                     lat: 25.005302,                     lv: ＂一＂,                     num: 10,                     type: ＂#53F5FF＂                 },                 {                     lng: 117.306239,                     lat: 25.005302,                     lv: ＂二＂,                     num: 3,                     type: ＂#53F5FF＂                 },{                     lng: 117.006239,                     lat: 25.005302,                     lv: ＂四＂,                     num: 3,                     type: ＂#53F5FF＂                 },                 {                             lng: 118.306239,                             lat: 26.075302,                             lv: ＂五＂,                             num: 1,                             type: ＂red＂                         },             ];2.3 标注地图marker    var infoBox,             listinfoBox = [],             listmarker = [],             marker,             data = [];         for (var i = 0; i < markers.length; i++) {             var point = new BMapGL.Point(markers[i].lng, markers[i].lat);             // 创建小车图标             marker = new BMapGL.Marker(point);             marker.lv = markers[i].lv;             marker.num = markers[i].num;             marker.type = markers[i].type;             infoBox = getInfoBox(map, getHtml(markers[i]));             infoBox.open(marker);2.4 设置地图波纹闪烁效果var waveLayer = new mapvgl.CircleLayer({             // 绘制带波纹扩散的圆             type: ＂wave＂,             // 扩散半径，支持直接设置和回调两种形式             radius: r => 1.6 * r,             // 周期影响扩散速度，越小越快             duration: 1 / 3,             // 拖尾影响波纹数，越大越多             trail: 3,             enablePicked: true,             selectedColor: ＂yellow＂, // 选中项颜色             autoSelect: true, // 根据鼠标位置来自动设置选中项             onClick: (e) => { // 点击事件                 console.log(e)                 infoBox = getInfoBox(map, getHtml(e.dataItem.om));                 infoBox.open(e.dataItem.om);             }         });         view.addLayer(waveLayer);         waveLayer.setData(data);2.5 自定义地图标注信息框    function getInfoBox(map, ht) {         return new BMapGLLib.InfoBox(map, ht, {             boxStyle: {                 background: ＂#0006cb2fa＂,                 width: ＂193px＂,                 height: ＂102px＂             },             closeIconMargin: ＂1px 1px 0 0＂,             // closeIconUrl: ＂//mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/examples/images/close.png＂,              closeIconUrl: ＂myimg/close.png＂,             enableAutoPan: true,             align: INFOBOX_AT_BOTTOM,             offset: new BMapGL.Size(100, -100)         })     }2.6 设置显示地图区域（屏蔽其他区域地图）var bd = new BMapGL.Boundary();         bd.get(position.city, function(rs) {             var count = rs.boundaries.length; //行政区域的点有多少个             var pointArray = [];             for (var i = 0; i < count; i++) {                 var path = [];                 str = rs.boundaries[i].replace(＂ ＂, ＂＂);                 points = str.split(＂;＂);                 for (var j = 0; j < points.length; j++) {                     var lng = points[j].split(＂,＂)[0];                     var lat = points[j].split(＂,＂)[1];                     path.push(new BMapGL.Point(lng, lat));                 }                 var mapmask = new BMapGL.MapMask(path, {                     isBuildingMask: true,                     isPoiMask: true,                     isMapMask: true,                     showRegion: ＂inside＂,                     topFillColor: ＂#5679ea＂,                     topFillOpacity: 0.5,                     sideFillColor: ＂#5679ea＂,                  sideFillOpacity: 1                 });                 map.addOverlay(mapmask);             }         });2.7 设置地图自定义样式    map.setMapStyleV2({             styleId: ＂3e801b6531c190d7c79a9d2a41b80ca0＂         });2.8设置天空颜色    var skyColors = [];         for (var i = 0; i < 10; i++) {             skyColors[i] = ＂rgba(0, 0, 0, 0.＂ + i + ＂)＂;         }         map.setDisplayOptions({             skyColors: skyColors         })2.9绘制区域边界var bd = new BMapGL.Boundary();         bd.get(name || ＂福州市＂, function(rs) {             var count = rs.boundaries.length; //行政区域的点有多少个             var pointArray = [];             for (var i = 0; i < count; i++) {                 var path = [];                 str = rs.boundaries[i].replace(＂ ＂, ＂＂);                 points = str.split(＂;＂);                 for (var j = 0; j < points.length; j++) {                     var lng = points[j].split(＂,＂)[0];                     var lat = points[j].split(＂,＂)[1];                     path.push(new BMapGL.Point(lng, lat));                 }                 var prism = new BMapGL.Prism(path, 5000, {                     topFillColor: color || ＂#2106ea＂,                     topFillOpacity: 0.3,                     sideFillColor: ＂#2106ea＂,                     sideFillOpacity: 1                 });                 map.addOverlay(prism);              }         });2.10模拟pull数据（实际情况可根据需要进行pull或push）setInterval(function(){             view.removeAllLayers();             var ovs=map._customOverlays;             for (var i = 0; i < ovs.length; i++) {                 ovs[i].close();             }             getData();         }, 10000);