如何在点击时更改 mapbox gl 中的图标大小?
How to change icon-size in mapbox gl on click?
我想根据最近的草皮更改地图点击时的图标大小。我如何做到这一点? nearestBuilding.properties['icon-size'] = 0.2;
无效。
var retail = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
title: 'TEST',
description: 'TEST'
},
geometry: {
type: 'Point',
coordinates: [121.051779, 14.550224]
}
},
{
type: 'Feature',
properties: {
title: 'TEST',
description: 'TEST'
},
geometry: {
type: 'Point',
coordinates: [121.04568958282472, 14.552170837008527]
}
}
]
};
map.on('load', function() {
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Wiki_Loves_Earth_map_marker.svg/600px-Wiki_Loves_Earth_map_marker.svg.png', function(error, image) {
if (error) throw error;
map.addImage('marker', image);
map.addLayer({
id: 'retail',
type: 'symbol',
source: {
type: 'geojson',
data: retail
},
layout: {
'icon-image': 'marker',
'icon-size': 0.1
},
paint: { }
});
});
});
var marker = null;
map.on('click', function(e){
if(marker != null) {
marker.remove();
}
var currentLocation = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [e.lngLat.lng, e.lngLat.lat]
}
};
var el = document.createElement('div');
el.className = 'currLocMarker';
marker = new mapboxgl.Marker(el, { offset: [-50 / 2, -50 / 2] })
.setLngLat(currentLocation.geometry.coordinates)
.addTo(map);
var currentLocation = turf.point([e.lngLat.lng, e.lngLat.lat]);
var nearestBuilding = turf.nearest(currentLocation, retail);
var distance = turf.distance(currentLocation, nearestBuilding);
if (distance <= 0.5) {
nearestBuilding.properties['icon-size'] = 0.2;
}
});
由于 icon-size
支持数据驱动的样式(https://www.mapbox.com/mapbox-gl-js/style-spec/#layout-symbol-icon-size),您是否尝试过这样做,并在每个特征上使用来自 属性 的身份函数?您可以在布局中配置它,而不是硬编码 0.1
。
更多关于数据驱动样式的文档在这里 - https://www.mapbox.com/mapbox-gl-js/style-spec/#function-type
我想根据最近的草皮更改地图点击时的图标大小。我如何做到这一点? nearestBuilding.properties['icon-size'] = 0.2;
无效。
var retail = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
title: 'TEST',
description: 'TEST'
},
geometry: {
type: 'Point',
coordinates: [121.051779, 14.550224]
}
},
{
type: 'Feature',
properties: {
title: 'TEST',
description: 'TEST'
},
geometry: {
type: 'Point',
coordinates: [121.04568958282472, 14.552170837008527]
}
}
]
};
map.on('load', function() {
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Wiki_Loves_Earth_map_marker.svg/600px-Wiki_Loves_Earth_map_marker.svg.png', function(error, image) {
if (error) throw error;
map.addImage('marker', image);
map.addLayer({
id: 'retail',
type: 'symbol',
source: {
type: 'geojson',
data: retail
},
layout: {
'icon-image': 'marker',
'icon-size': 0.1
},
paint: { }
});
});
});
var marker = null;
map.on('click', function(e){
if(marker != null) {
marker.remove();
}
var currentLocation = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [e.lngLat.lng, e.lngLat.lat]
}
};
var el = document.createElement('div');
el.className = 'currLocMarker';
marker = new mapboxgl.Marker(el, { offset: [-50 / 2, -50 / 2] })
.setLngLat(currentLocation.geometry.coordinates)
.addTo(map);
var currentLocation = turf.point([e.lngLat.lng, e.lngLat.lat]);
var nearestBuilding = turf.nearest(currentLocation, retail);
var distance = turf.distance(currentLocation, nearestBuilding);
if (distance <= 0.5) {
nearestBuilding.properties['icon-size'] = 0.2;
}
});
由于 icon-size
支持数据驱动的样式(https://www.mapbox.com/mapbox-gl-js/style-spec/#layout-symbol-icon-size),您是否尝试过这样做,并在每个特征上使用来自 属性 的身份函数?您可以在布局中配置它,而不是硬编码 0.1
。
更多关于数据驱动样式的文档在这里 - https://www.mapbox.com/mapbox-gl-js/style-spec/#function-type