美文网首页
leaflet 绘制除高亮区外,其他地区显示遮罩

leaflet 绘制除高亮区外,其他地区显示遮罩

作者: Amy_yqh | 来源:发表于2021-07-15 09:20 被阅读0次

话不多说,先上效果图


image.png
 drawShadowBound(coordinates,boundData){
        /*画遮蔽层的相关方法
       *思路: 首先在中国地图最外画一圈,圈住理论上所有的中国领土,然后再将每个闭合区域合并进来,并全部连到西北角。
       *      这样就做出了一个经过多次西北角的闭合多边形*/
        //定义中国东南西北端点,作为第一层
        var pNW = {lat: 59.0, lng: 73.0};
        var pNE = {lat: 59.0, lng: 136.0};
        var pSE = {lat: 3.0, lng: 136.0};
        var pSW = {lat: 3.0, lng: 73.0};
        // let pNW = {lat: 90, lng:-180};
        // let pNE = {lat: 90, lng:180 };
        // let pSE = {lat: -90, lng: -180};
        // let pSW = {lat:90, lng:180};
        //向数组中添加一次闭合多边形,并将西北角再加一次作为之后画闭合区域的起点
        var pArray = [];
        pArray.push(pNW);
        pArray.push(pSW);
        pArray.push(pSE);
        pArray.push(pNE);
        pArray.push(pNW);
        //循环添加各闭合区域
        for (let i = 0; i < coordinates.length; i++) {
            let points = [];
            let item1 = coordinates[i]
            for(let j=0,l1=item1.length;j<l1;j++){
                let item2 = item1[j]
                for(let k = 0,l2 = item2.length;k<l2;k++){
                    let item3 = item2[k]
                    points.push({lat: item3[1], lng: item3[0]});
                }
            }
            //将闭合区域加到遮蔽层上,每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
            pArray = pArray.concat(points);
            pArray.push(pArray[0]);
        }
        //添加遮蔽层
        // var plyall = L.polygon(pArray, {color: 'transparent', fillColor: '#282525', fillOpacity: 0.5}); //建立多边形覆盖物
        var plyall = L.polygon(pArray, {color: '#282525', fillColor: 'transparent', fillOpacity: 0.5}); //建立多边形覆盖物
        plyall.addTo(this.map);
    }

实现的原理是,拿到高亮区的geometry,然后在中国以为的地区,取四个角,形成矩形,然后再通过在数据中追加第一个矩形的点,使得这个多边型闭合。但是这样就会出现一个问题,从图上可以看到,地图上会出现多余的线条,这就是连接闭合时候的线,不够美观。
前端实在没办法了,只能通过后台(java),从这个大矩形与高亮区图形处理,得到diff,就遮罩层的geojson,前端叠上去就ok了。

相关文章

  • leaflet 绘制除高亮区外,其他地区显示遮罩

    话不多说,先上效果图 实现的原理是,拿到高亮区的geometry,然后在中国以为的地区,取四个角,形成矩形,然后再...

  • Leaflet 笔记八:marker高亮显示

    Leaflet 笔记八:marker高亮显示 这个plugin主要是为了方便实现marker的高亮显示。 安装 该...

  • 药用植物——山麦冬

    山麦冬,百合科山麦冬属,除东北、内蒙古、青海、新疆、西藏各省区外,其他地区广泛分布和栽培。生于海拔50-1400米...

  • leaflet 图层高亮

    http://leafletjs.com/examples/choropleth/example.html 相当于...

  • 前端制作遮罩与蒙版

    遮罩: 有色则显示,无色抠取,半透明则半透明 蒙版: 黑色则抠除,白色显示,灰色则半透明 概念上两者非常容易混淆,...

  • 未经投影的地理坐标系如何显示为平面地图

    缘起 使用Leaflet做点缓冲,也就是调用“L.circle()”绘制圆形,传入半径100米,绘制出来的圆却覆盖...

  • 遮罩层实现

    代码如下 实现效果:点击按钮,显示遮罩层,弹出弹框点击遮罩层,隐藏遮罩层,隐藏弹框

  • html移动端的兼容问题

    html移动端的兼容问题:1.iOS手机上点击事件按下之后会会先一个灰色遮罩层这是因为iOS手机默认增加了高亮显示...

  • 新手引导系统

    新手引导是游戏中必不可少的系统。 原理:1.添加一个灰色的遮罩层2.高亮显示引导玩家的内容,比如需要点击的按钮3....

  • element实现图片预览,不使用外部插件

    功能:图片上显示遮罩层,点击遮罩层上的按钮才去预览效果图: 遇到的问题:1、鼠标进入图片时显示遮罩层会出现闪烁。修...

网友评论

      本文标题:leaflet 绘制除高亮区外,其他地区显示遮罩

      本文链接:https://www.haomeiwen.com/subject/cxdppltx.html