vue+mapbox控制图层的显示和隐藏
<el-button @click="changeFill()">changeFill</el-button><el-button @click="changeLine()">changeLine</el-button>data() {return {map: {}};},moun...
·
代码实现
<el-button @click="changeFill()">changeFill</el-button>
<el-button @click="changeLine()">changeLine</el-button>
data() {
return {
map: {}
};
},
mounted() {
this.$mapboxgl.accessToken = CONSTANT.MAP_TOKEN;
this.map = new this.$mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v11",
center: CONSTANT.MAP_CENTER,
zoom: 3
});
var map = this.map;
map.on("load", function() {
map.addLayer({
id: "myfill",
type: "fill",
source: {
type: "geojson",
data: {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: "Polygon",
coordinates: [
[
[100.283203125, 37.3002752813443],
[95.80078125, 34.161818161230386],
[104.501953125, 32.91648534731439],
[100.283203125, 37.3002752813443]
]
]
}
},
{
type: "Feature",
properties: {},
geometry: {
type: "Polygon",
coordinates: [
[
[108.6328125, 38.34165619279595],
[105.99609375, 36.24427318493909],
[110.21484375, 32.39851580247402],
[111.533203125, 36.10237644873644],
[108.6328125, 38.34165619279595]
]
]
}
}
]
}
},
layout: { visibility: "none" },
paint: {
"fill-color": "#088",
"fill-opacity": 0.8
}
});
map.addLayer({
id: "myline",
type: "line",
source: {
type: "geojson",
data: {
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: [
[94.04296874999999, 34.74161249883172],
[104.150390625, 28.459033019728043],
[113.02734374999999, 32.32427558887655],
[116.89453125, 32.175612478499325]
]
}
}
},
layout: {
visibility: "none",
"line-join": "round",
"line-cap": "round"
},
paint: {
"line-color": "#888",
"line-width": 8
}
});
});
},
methods: {
changeFill() {
var visibility = this.map.getLayoutProperty("myfill", "visibility");
if (visibility === "visible") {
this.map.setLayoutProperty("myfill", "visibility", "none");
} else {
this.map.setLayoutProperty("myfill", "visibility", "visible");
}
},
changeLine() {
var visibility = this.map.getLayoutProperty("myline", "visibility");
if (visibility === "visible") {
this.map.setLayoutProperty("myline", "visibility", "none");
} else {
this.map.setLayoutProperty("myline", "visibility", "visible");
}
}
}
效果图:
更多推荐
已为社区贡献65条内容
所有评论(0)