1 前言

在地圖中加載的底圖是瓦片服務(wù)（固定大小的規(guī)則矩形），底圖的范圍很大，鋪滿了整個(gè)div，但是我們的感興趣的部門可能只是其中一部分，如何在整個(gè)屏幕中突出感興趣的部分-- 地圖遮罩（遮擋圖像中不感興趣的部分）。最常見的用處是突出行政區(qū)內(nèi)部區(qū)域。

圖1 湖南省遮罩

2 實(shí)現(xiàn)方法

地圖遮罩實(shí)現(xiàn)思路：在大范圍區(qū)域的內(nèi)部挖洞（感興趣部分），矩形中挖出行政區(qū)邊界
在leaflet中常用L.polygon來實(shí)現(xiàn)面中挖洞，上代碼

var latlngs = [
  [[-91, -181], [ 91, -181], [91, 181], [-90, 181]], // 外環(huán)
  [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // 洞
];
var polygon = L.polygon(latlngs, { style: {fillColor: '#000',
    stroke: false,
    fillOpacity: 0.5,
    color: '#000000',
    weight: 1 }}).addTo(map)
map.setView([38, -107], 7)

坐標(biāo)數(shù)組latlngs：第一元素是外環(huán)的坐標(biāo)數(shù)組，是整個(gè)世界范圍，第二個(gè)元素就是洞的坐標(biāo)數(shù)組

圖二 簡單遮罩實(shí)例

3 重點(diǎn)討論

上面用L.polygon實(shí)現(xiàn)了在簡單的遮罩（挖了一個(gè)矩形洞），針對具有飛地、復(fù)雜邊界線的行政區(qū)
例如湖南 整個(gè)湖南省境內(nèi)（指的是最外圍、最大的邊界線內(nèi)）有多個(gè)屬于外省的飛地，同時(shí)在外省也有多個(gè)飛地
圖三選取懷化部分區(qū)域，有一個(gè)在貴州的飛地A（亮），同時(shí)懷化境內(nèi)有一塊屬于貴州的飛地B（暗）

圖三 懷化部分區(qū)域
繪制準(zhǔn)確的湖南省地圖遮罩，需要滿足這兩個(gè)條件：1 有多個(gè)洞 2 洞中有洞
實(shí)現(xiàn)方法：** **L.geoJSON + GeoJSON Multipolygon數(shù)據(jù)
GeoJSON數(shù)據(jù)中的每個(gè)Multipolygon由一個(gè)外環(huán)和零個(gè)或多個(gè)內(nèi)環(huán)（洞）組成。外環(huán)定義了整個(gè)多邊形的邊界，而內(nèi)環(huán)定義了洞的邊界，洞也可以是外環(huán)和洞組成（嵌套）。每個(gè)環(huán)都是由一組經(jīng)緯度坐標(biāo)構(gòu)成的閉合路徑。數(shù)據(jù)格式如下：

{
  "type": "Feature",
  "geometry": {
    "type": "MultiPolygon",
    "coordinates": [
      // 第一個(gè)Multipolygon
      [
        // 外環(huán)1
        [
          [longitude1, latitude1],
          [longitude2, latitude2],
          ...
        ],
        // 內(nèi)環(huán)1（洞1）
        [
          [
            [longitude_hole1_1, latitude_hole1_1],
            [longitude_hole1_2, latitude_hole1_2],
            ...
          ]
        ],
        // 內(nèi)環(huán)2（洞2）
        [
          [
            [longitude_hole2_1, latitude_hole2_1],
            [longitude_hole2_2, latitude_hole2_2],
            ...
          ],
          // 內(nèi)環(huán)2的洞
    			...
        ]
      ],
      // 更多Multipolygon...
    ]
  },
  "properties": {
    // 可選的屬性
  }
}

代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-627100.html

// 準(zhǔn)備 geojson 數(shù)據(jù)

L.geoJSON(geojson, {style: function (feature) {
  return {
    fillColor: '#000',
    stroke: false,
    fillOpacity: 0.5,
    color: '#000000',
    weight: 1
  }
}).addTo(map)

到了這里，關(guān)于實(shí)現(xiàn)地圖遮罩 leaflet的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！