在可以使用leaflet库的情况下使用JavaScript生成一段鼠标移入geojson图层时可高亮显示该图层的代码
时间: 2024-05-28 14:15:01 浏览: 126
39.(leaflet篇)leaflet叠加geojson图层(实现tooltip内部元素可点击).rar
5星 · 资源好评率100%
可以使用以下代码实现:
```
// 创建地图
var map = L.map('map').setView([51.505, -0.09], 13);
// 添加地图瓦片图层
var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 18
}).addTo(map);
// 加载GeoJSON数据
var geojsonLayer = L.geoJSON(geojson, {
// 绑定鼠标事件
onEachFeature: function(feature, layer) {
layer.on('mouseover', function(event) {
// 鼠标移入时高亮显示
layer.setStyle({weight: 5, color: '#666', dashArray: '', fillOpacity: 0.7});
});
layer.on('mouseout', function(event) {
// 鼠标移出时取消高亮显示
layer.setStyle({weight: 1, color: 'white', dashArray: '3', fillOpacity: 0.5});
});
}
}).addTo(map);
```
其中`geojson`是包含GeoJSON数据的变量,可以使用`L.geoJSON.ajax`方法加载。该代码会创建一个Leaflet地图,加载一个地图瓦片图层,并将GeoJSON数据添加为图层,并绑定鼠标事件,在鼠标移入时改变图层的样式实现高亮显示,鼠标移出时回复原来的样式。
阅读全文