高亮显示有两种方式
一、通过首次加载的时候 将高亮渲染出来后通过点击获取到他的id 控制现实隐藏
https://blog.csdn.net/qq_33460928/article/details/100566632 参考了这个文章
要求,点击乡镇的模块的数据让他的边界变成蓝色的,我们这里用了filter
1、初始化加载矢量图层
let inFoLayerfenpei = {
id: "uuidfenpei",
type: "fill",
source: {
type: "geojson",
data: `${CONFIG.Service10}/qgzhdc/task/api/v1/getTaskListGeojson?code=${this.getUserInfo.departmentid}`
},
paint: {
"fill-outline-color": "#fff",
"fill-color": [
"case",
["boolean", ["==", ["get", "zxr"], null], false],
"#ff0000",
"#6da8ff"
],
"fill-opacity": 0.3
}
};
if (!self.map.getLayer("uuidfenpei")) {
self.map.addLayer(inFoLayerfenpei);
} else {
self.map.getSource("uuidfenpei").setData(mapSourceData);
}
2、初始化地图的时候定义点击矢量图层的点击事件
this.map.on("click", "uuidfenpei", this.getqhdetail);
// 点击地图事件
getqhdetail(e) {
console.log(e.features[0], "EEEEEEEE");
map.setFilter("pointlayerhighlight", [
"in",
"id",
e.features[0].properties.id
]);
},
3、在初始化地图的时候定义高亮的样式,我们将他的 filter: ["in", "id", ""], 根据他的id为空,默认没有高亮的
// 高亮显示
let pointlayerhighlight = {
id: "pointlayerhighlight",
type: "line",
source: {
type: "geojson",
data: `${CONFIG.Service10}/qgzhdc/task/api/v1/getTaskListGeojson?code=${this.getUserInfo.departmentid}`
},
filter: ["in", "id", ""],
layout: {
"line-cap": "round" /* 线条末端样式 */
},
paint: {
"line-color": "#0078ff",
"line-width": 2
}
};
if (!self.map.getLayer("pointlayerhighlight")) {
self.map.addLayer(pointlayerhighlight);
} else {
self.map.getSource("pointlayerhighlight").setData(mapSourceData);
}
二、通过获取点击事件的详情获取到他的geojson,从新拼接成geojson 的格式
// 点击地图事件
getqhdetail(e) {
if (this.map.getLayer("pointlayerhighlight")) {
this.map.removeLayer("pointlayerhighlight");
this.map.removeSource("pointlayerhighlight");
}
console.log(e.features[0], "EEEEEEEE");
let pointlayerhighlight = {
id: "pointlayerhighlight",
type: "line",
source: {
type: "geojson",
data: {
type: "Feature",
properties: {},
geometry: e.features[0].geometry
}
},
layout: {
"line-cap": "round" /* 线条末端样式 */
},
paint: {
"line-color": "#0078ff",
"line-width": 2,
//"line-dasharray": [2, 1.5]
}
};
if (!self.map.getLayer("pointlayerhighlight")) {
self.map.addLayer(pointlayerhighlight);
} else {
self.map.getSource("pointlayerhighlight").setData(mapSourceData);
}
},
三、点击时layer所有图层都更改颜色
点击前,点击后颜色都更改可以通过setPpintPropety 修改颜色的改变
map.setPaintProperty("uuidfenpei", "fill-color", "#0078ff");