leaflet地图遮罩效果图
主要代码: geojson也在下面 地图加载完成之后直接调用 drawBoundaryMask 方法
//边界高亮及遮罩效果
drawBoundaryMask() {
L.geoJSON(this.geojson, {
style: function(feature) {
return {
fillColor: '#000',
stroke: '#CD853F',
fillOpacity: 0.4,
color: '#CD853F',
weight: 2
}
}
}).addTo(this.map)
},
[ [-181, -91], [-181, 91], [181, 91], [181, -90] ],
是整个地图的遮罩,中间扣洞的部分是从geojson中直接拿的市的数据。coordinates中第一组数据为整个地图的数据,后面的都是扣洞的数据
geojson:{
"type": "Feature",
"properties": {
"adcode": 140522,
"name": "阳城县",
"center": [112.422014, 35.482177],
"centroid": [112.352973, 35.422345],
"childrenNum": 0,
"level": "district",
"acroutes": [100000, 140000, 140500],
"parent": {
"adcode": 140500
}
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[-181, -91],
[-181, 91],
[181, 91],
[181, -90]
],
[
[112.617178, 35.251562],
[112.612705, 35.255146],
[112.611938, 35.256556],
[112.613237, 35.25797],
[112.616232, 35.257676],
[112.618236, 35.257856],
[112.619709, 35.258972],
[112.620179, 35.260386],
[112.62047, 35.264383],
[112.620055, 35.267586],
[112.618651, 35.27088],
[112.617414, 35.271995],
[112.615824, 35.272408],
[112.613949, 35.272346],
[112.604595, 35.268051],
[112.60319, 35.268701],
[112.603425, 35.269579],
[112.607539, 35.273756],
[112.607601, 35.275521],
[112.606123, 35.2774],
[112.601427, 35.281168],
[112.600666, 35.283279],
[112.600784, 35.284461],
[112.601786, 35.285457],
[112.603784, 35.285633],
[112.60637, 35.284342],
[112.609006, 35.281225],
[112.610707, 35.280518],
[112.613126, 35.281168],
[112.613596, 35.281875],
[112.614295, 35.284755],
[112.615298, 35.287754],
[112.616591, 35.289694],
[112.617655, 35.290458],
[112.620711, 35.290406],
[112.635825, 35.283275],
[112.638294, 35.283161],
[112.640243, 35.283692],
[112.640713, 35.285752],
[112.639123, 35.287042],
[112.635949, 35.288508],
[112.633703, 35.289092],
[112.632651, 35.291208],
[112.633357, 35.293035],
[112.635534, 35.295739],
[112.635473, 35.298035],
[112.633765, 35.299031],
[112.632831, 35.298856],
[112.629595, 35.296792],
[112.628358, 35.29432],
[112.627535, 35.293381],
[112.62524, 35.292906],
[112.622586, 35.293903],
[112.619418, 35.295957],
[112.615063, 35.300307],
[112.612891, 35.303363],
[112.613299, 35.304923],
[112.615298, 35.306631],
[112.615533, 35.308628],
[112.614654, 35.309453],
[112.608542, 35.312978],
[112.606253, 35.316445],
[112.602986, 35.324114],
[112.597839, 35.334879],
[112.597455, 35.338307],
[112.596075, 35.340057],
[112.600629, 35.344187],
[112.606593, 35.346572],
[112.607843, 35.349023],
[112.607366, 35.351294],
[112.601829, 35.354442],
[112.601916, 35.355912],
[112.604879, 35.358922],
[112.607323, 35.360429],
[112.607929, 35.36288],
[112.606556, 35.36508],
[112.602949, 35.364279],
[112.600202, 35.362387],
[112.598569, 35.36097],
[112.597498, 35.358974],
[112.597412, 35.357225],
[112.598099, 35.355599],
[112.598959, 35.35045],
[112.597239, 35.348843],
[112.593805, 35.348563],
[112.587117, 35.348634],
[112.584921, 35.349369],
[112.583547, 35.351261],
[112.585867, 35.360501],
[112.589301, 35.363369],
[112.591875, 35.366938],
[112.590161, 35.369668],
[112.588614, 35.370156],
[112.586981, 35.368829],
[112.584754, 35.367777],
[112.58192, 35.368478],
[112.577286, 35.372749],
[112.57402, 35.376318],
[112.570159, 35.378418],
[112.566299, 35.37856],
[112.549731, 35.386389],
[112.552546, 35.390872],
[112.570821, 35.38691],
[112.571013, 35.401211],
[112.582984, 35.40485],
[112.605851, 35.397852],
[112.606086, 35.415159],
[112.612644, 35.424888],
[112.610008, 35.432434],
[112.620371, 35.434574],
[112.623773, 35.43886],
[112.622351, 35.444808],
[112.616714, 35.450292],
[112.607991, 35.456679],
[112.602899, 35.465822],
[112.607632, 35.474764],
[112.612371, 35.483029],
[112.615712, 35.492424],
[112.617067, 35.503422],
[112.617024, 35.516023],
[112.616436, 35.523805],
[112.616393, 35.53251],
[112.612476, 35.531805],
[112.607416, 35.530419],
[112.601514, 35.5304],
[112.599831, 35.532003],
[112.598408, 35.534974],
[112.597263, 35.540697],
[112.597245, 35.543904],
[112.598358, 35.547338],
[112.603951, 35.554909],
[112.605312, 35.560414],
[112.598006, 35.564745],
[112.555379, 35.561232],
[112.549211, 35.560768],
[112.53328, 35.554578],
[112.528263, 35.552285],
[112.52069, 35.552507],
[112.518166, 35.553883],
[112.51451, 35.557316],
[112.513099, 35.559378],
[112.506628, 35.566012],
[112.499909, 35.567842],
[112.496259, 35.568069],
[112.490109, 35.566235],
[112.485642, 35.563714],
[112.480712, 35.562267],
[112.481355, 35.561577],
[112.481813, 35.559492],
[112.482852, 35.557231],
[112.481565, 35.554427],
[112.480749, 35.553685],
[112.479629, 35.554257],
[112.476938, 35.553855],
[112.474451, 35.554337],
[112.472582, 35.556669],
[112.472576, 35.558144],
[112.474822, 35.561993],
[112.471933, 35.562551],
[112.469118, 35.566211],
[112.464038, 35.571474],
[112.460914, 35.578111],
[112.461155, 35.586583],
[112.463086, 35.591163],
[112.466989, 35.594378],
[112.46694, 35.602162],
[112.461322, 35.60513],
[112.454573, 35.609237],
[112.451417, 35.619765],
[112.449673, 35.632357],
[112.447081, 35.642198],
[112.444519, 35.648825],
[112.440541, 35.657516],
[112.435177, 35.662314],
[112.424722, 35.673275],
[112.417391, 35.675763],
[112.40782, 35.678015],
[112.383568, 35.683162],
[112.371732, 35.685154],
[112.358196, 35.684158],
[112.342977, 35.684286],
[112.318174, 35.684116],
[112.30804, 35.682444],
[112.295388, 35.678469],
[112.288657, 35.674309],
[112.283374, 35.664888],
[112.278121, 35.652722],
[112.267195, 35.646241],
[112.256814, 35.643898],
[112.249508, 35.644087],
[112.221599, 35.654479],
[112.217368, 35.65675],
[112.209498, 35.658314],
[112.201103, 35.655532],
[112.195528, 35.65139],
[112.190554, 35.641753],
[112.194588, 35.631006],
[112.201387, 35.623479],
[112.206782, 35.617096],
[112.2111, 35.602228],
[112.210092, 35.590549],
[112.212727, 35.577275],
[112.218698, 35.567228],
[112.235408, 35.548525],
[112.237394, 35.546245],
[112.241347, 35.543294],
[112.242517, 35.538257],
[112.239485, 35.531601],
[112.229407, 35.529033],
[112.219861, 35.530367],
[112.213686, 35.531478],
[112.203317, 35.530977],
[112.192992, 35.5275],
[112.186576, 35.523346],
[112.179103, 35.513241],
[112.1787, 35.496063],
[112.173417, 35.491231],
[112.164477, 35.489594],
[112.154931, 35.49161],
[112.14343, 35.494984],
[112.132213, 35.494928],
[112.114587, 35.491847],
[112.105097, 35.486749],
[112.09617, 35.480274],
[112.091214, 35.471768],
[112.082924, 35.457958],
[112.078556, 35.445789],
[112.073378, 35.430852],
[112.071825, 35.417101],
[112.071608, 35.410909],
[112.065836, 35.398264],
[112.057472, 35.392919],
[112.044016, 35.388896],
[112.032496, 35.3881],
[112.030782, 35.380873],
[112.030312, 35.375877],
[112.029514, 35.374493],
[112.027825, 35.372564],
[112.02728, 35.37145],
[112.027466, 35.369545],
[112.02436, 35.363226],
[112.024107, 35.361155],
[112.024366, 35.358514],
[112.023964, 35.357448],
[112.022269, 35.356082],
[112.022158, 35.35402],
[112.022981, 35.35147],
[112.024063, 35.349369],
[112.025647, 35.348198],
[112.0296, 35.347269],
[112.034135, 35.346871],
[112.038676, 35.345913],
[112.049509, 35.342527],
[112.052813, 35.341418],
[112.055758, 35.338488],
[112.055869, 35.335661],
[112.054403, 35.330308],
[112.054694, 35.328074],
[112.055807, 35.326756],
[112.058288, 35.325878],
[112.062056, 35.32383],
[112.064407, 35.322008],
[112.067463, 35.318484],
[112.069115, 35.315695],
[112.069462, 35.313343],
[112.069412, 35.306285],
[112.068113, 35.300521],
[112.064228, 35.293049],
[112.062699, 35.291341],
[112.060163, 35.290335],
[112.0571, 35.289856],
[112.056395, 35.288418],
[112.057632, 35.285011],
[112.058814, 35.279896],
[112.066405, 35.277704],
[112.075815, 35.27713],
[112.080641, 35.277723],
[112.085052, 35.278667],
[112.086933, 35.279436],
[112.090286, 35.279616],
[112.09393, 35.279203],
[112.100216, 35.277267],
[112.10527, 35.275122],
[112.110727, 35.273884],
[112.115441, 35.273219],
[112.115689, 35.271706],
[112.114724, 35.270718],
[112.112069, 35.270495],
[112.110752, 35.269902],
[112.110517, 35.268583],
[112.113066, 35.267045],
[112.113195, 35.266082],
[112.115905, 35.265218],
[112.117266, 35.263756],
[112.118405, 35.265261],
[112.120007, 35.265299],
[112.127097, 35.2677],
[112.134317, 35.271283],
[112.135375, 35.271454],
[112.13866, 35.271041],
[112.173528, 35.263808],
[112.18185, 35.260382],
[112.191117, 35.256366],
[112.201072, 35.2547],
[112.21433, 35.254092],
[112.217256, 35.253266],
[112.220776, 35.247029],
[112.220182, 35.244912],
[112.217955, 35.242918],
[112.216668, 35.240212],
[112.217021, 35.239391],
[112.218778, 35.238564],
[112.225231, 35.238204],
[112.236608, 35.235607],
[112.242715, 35.234837],
[112.246006, 35.235778],
[112.249885, 35.238009],
[112.261281, 35.241185],
[112.277614, 35.241665],
[112.282792, 35.242021],
[112.285372, 35.24317],
[112.286554, 35.244584],
[112.294442, 35.252825],
[112.296205, 35.25377],
[112.300789, 35.253774],
[112.303264, 35.252839],
[112.304439, 35.251899],
[112.302676, 35.245192],
[112.291491, 35.225655],
[112.289146, 35.222948],
[112.288082, 35.219771],
[112.288552, 35.217535],
[112.289963, 35.217069],
[112.293959, 35.217425],
[112.306673, 35.220973],
[112.311499, 35.221215],
[112.316213, 35.219928],
[112.320686, 35.219116],
[112.32386, 35.219472],
[112.327634, 35.220892],
[112.330455, 35.221072],
[112.335515, 35.219553],
[112.341294, 35.219211],
[112.349887, 35.219581],
[112.353531, 35.220531],
[112.359297, 35.220773],
[112.367309, 35.220199],
[112.371547, 35.2215],
[112.376725, 35.224092],
[112.385077, 35.232217],
[112.39072, 35.238807],
[112.39625, 35.241517],
[112.401423, 35.241873],
[112.406595, 35.240933],
[112.412695, 35.239049],
[112.418226, 35.238636],
[112.423973, 35.238042],
[112.44051, 35.232497],
[112.457747, 35.226348],
[112.459504, 35.226581],
[112.462665, 35.228808],
[112.464657, 35.230569],
[112.46853, 35.23103],
[112.472397, 35.230313],
[112.477662, 35.226889],
[112.482469, 35.224643],
[112.484813, 35.224843],
[112.48756, 35.228129],
[112.489788, 35.229942],
[112.491013, 35.229705],
[112.495752, 35.226927],
[112.499031, 35.226092],
[112.502198, 35.22479],
[112.513489, 35.218551],
[112.515246, 35.21837],
[112.516941, 35.218836],
[112.519403, 35.220123],
[112.527657, 35.221979],
[112.536262, 35.223428],
[112.537964, 35.22348],
[112.540537, 35.222948],
[112.544812, 35.219762],
[112.549446, 35.216865],
[112.559054, 35.212762],
[112.563447, 35.211869],
[112.567845, 35.211745],
[112.568439, 35.212567],
[112.568674, 35.215388],
[112.5692, 35.218214],
[112.570196, 35.21933],
[112.57277, 35.220559],
[112.57501, 35.221144],
[112.579761, 35.220963],
[112.58398, 35.221077],
[112.59138, 35.222245],
[112.602541, 35.222863],
[112.605708, 35.222682],
[112.609179, 35.221566],
[112.615941, 35.220393],
[112.618997, 35.220042],
[112.620934, 35.220455],
[112.626341, 35.222578],
[112.634588, 35.224672],
[112.63723, 35.225678],
[112.63882, 35.228499],
[112.635757, 35.237672],
[112.63512, 35.238902],
[112.63418, 35.239315],
[112.628172, 35.240544],
[112.623297, 35.241009],
[112.619003, 35.242918],
[112.617649, 35.244565],
[112.61729, 35.246853],
[112.617178, 35.251562]
]
]
]
}
}