做外贸的网站主要有哪些内容,网站维护一般需要多久,网站建设话术,网站平台搭建包括哪些文章目录 概要效果预览技术思路技术细节小结 概要
本篇文章主要是给一整块地图添加遮罩层蒙版#xff0c;但是不遮罩其中一个区域#xff0c;以反向高亮地区内容。
效果预览 技术思路
这里要实现某个区域反显高亮#xff0c;需要这个区域的边界json文件#xff0c;与ech… 文章目录 概要效果预览技术思路技术细节小结 概要
本篇文章主要是给一整块地图添加遮罩层蒙版但是不遮罩其中一个区域以反向高亮地区内容。
效果预览 技术思路
这里要实现某个区域反显高亮需要这个区域的边界json文件与echarts中的相同这都是通用的。实现全局遮罩给定的坐标就是-180180.如果只想遮罩这个省不想全部也需要引入边界json文件即可。总体来说就是某个遮罩除去了某个区域遮罩。就会形成这个效果。
技术细节 提示以下代码仅为主要代码其余不再赘述。
给省级甘肃省添加蒙版 NationBounds 是全国省级边界json
/*** 给省级添加蒙版遮罩
*/
createGanSuMBLayer() {let bounds {}for(let i 0; i NationBounds.features.length; i) {let bound NationBounds.features[i]if (bound.properties.adcode 620000) {bounds bound}}this.MBConfigOption(bounds)
},根据选择地区添加蒙版遮罩 GanSuBounds是甘肃省内市州级边界json
/*** 根据选择地区添加蒙版遮罩*/
createMBLayer(areacode) {const map this.maplet bounds {}let center [] // 展示层中心点位for(let i 0; i GanSuBounds.features.length; i) {let bound GanSuBounds.features[i]if (bound.properties.adcode areacode) {bounds boundcenter bound.properties.center}}// 将所选点设置为地图中心map.setCenter(center);// Zoom to the zoom level 8 with an animated transitionmap.zoomTo(7.5, {duration: 2000});this.MBConfigOption(bounds)
},蒙版遮罩配置信息
/*** 蒙版遮罩配置信息 */
MBConfigOption(bounds) {const map this.map// map.addSource(geojson, {// type: geojson,// data: {// type: FeatureCollection,// features: [],// },// })map.addLayer({//蒙版边界id: mb-line,type: line,source: {type: geojson,data: bounds, //区划的面数据},paint: {line-color: rgba(100, 149, 237, 0.6),line-width: 4},layout: {visibility: visible,},});map.addLayer({//蒙版图层 //通过边界数据反选 达到挖洞效果id: mb-tag,type: fill,source: {type: geojson,data: {type: Feature,geometry: {type: Polygon,coordinates: [[// 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点[-180, 90],[180, 90],[180, -90],[-180, -90],],bounds.geometry.coordinates[0][0]],},},},paint: {fill-color: rgba(0, 41, 127, 0.68),// fill-opacity: 1 /* 透明度 */,},layout: {visibility: visible,},});
}, 小结
反向思维遮罩全部抠出部分即可。
