原理
一、 利用turf.mask将你想要的展示的geojson截取出来,这样就变成了一个中间镂空的geojson
turf.mask( ‘高亮数据’, ‘全球数据(这里用的正负180 和正负90)’);
二、用中间镂空的geojson,颜色设置成你想要的模态框的颜色
三、绘制一个高亮的位置,颜色设置成你想要的颜色就可以了
zhegai() {
if (map.getLayer("blueMask-line")) {
map.removeLayer("blueMask-line");
}
if (map.getSource("blueMask")) {
map.removeSource("blueMask");
}
map.addSource("blueMask", {
type: "geojson",
data: require("./shanxi.json"), // 网上下载的geoJson的地图文件
});
// 设置地图区域边沿的线宽和颜色值
map.addLayer({
id: `blueMask`,
type: "line",
source: "blueMask",
layout: {},
paint: {
"line-width": 1.5,
"line-color": "#286BFF",
},
});
let polygon = {
geometry: {
coordinates: [
[
[-180, 90],
[180, 90],
[180, -90],
[-180, -90],
[-180, 90],
],
],
type: "Polygon",
},
properties: {},
type: "Feature",
};
console.log(require("./shanxi.json"), "require");
var PolygonModal = turf.mask(
require("./shanxi.json").features[0],
polygon
);
console.log(PolygonModal, "PolygonModal");
map.addLayer({
id: "PolygonModal",
type: "fill",
source: {
type: "geojson",
data: PolygonModal,
},
layout: {},
paint: {
"fill-color": "#000",
"fill-opacity": 0.5,
},
});
var bbox = turf.bbox(require("./shanxi.json").features[0]);
var bboxPolygon = turf.bboxPolygon(bbox);
let mapbounds = [
[
bboxPolygon.geometry.coordinates[0][0][0],
bboxPolygon.geometry.coordinates[0][0][1],
],
[
bboxPolygon.geometry.coordinates[0][2][0],
bboxPolygon.geometry.coordinates[0][2][1],
],
];
map.fitBounds(mapbounds, { padding: 20 });
},