效果图：
?
<!--
* @Description:
* @Version: 2.0
* @Autor: Cookie
* @Date: 2022-03-19 16:28:57
* @LastEditors: Zhang
* @LastEditTime: 2022-03-19 16:52:59
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="./data.json"></script>
<style>
.box {
position: absolute;
left: 200px;
top:50px;
z-index: 10000;
}
button {
width: 100px;
}
.red {
color: red;
}
</style>
<div id="map" style="width: 100vw; height: 90vh;"></div>
</head>
<body>
<script>
var map = L.map('map').setView([31.869952349588598, 117.21450805664062], 5);
var wpUrl = 'http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0';
var mylayerGroup2
L.tileLayer(wpUrl, {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
let style = {
fillColor: "#e5dada",
fillOpacity:.4,
weight: 1 ,
color: "#306bff"
}
let style2 = {
fillColor: "yellow",
fillOpacity: 0.4,
color: 'yellow'
}
function highlightFeature(e) {
if(mylayerGroup2) {
mylayerGroup2.clearLayers()
}
let layer2 = L.geoJSON(e.target.feature, {
style: function (feature) {
return {
fillColor: "yellow",
fillOpacity: 0.4,
color: 'yellow',
};
}
})
layer2.on('mouseover',function(e){
console.log(e);
var popup = L.popup();
popup.setLatLng([e.latlng.lat,e.latlng.lng])
.setContent(`<span>name:</span> <span>${e.layer.feature.properties.name}</span>`)
.openOn(map);
})
mylayerGroup2 = L.layerGroup([layer2])
map.addLayer(mylayerGroup2)
}
let geoJsonLayer = L.geoJson(data, {
style,
onEachFeature: (feature, layer) => {//onEachFeature回调 关键方法
if (onEachFeature) {
onEachFeature(feature, layer); }
}
}).addTo(map);
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,//鼠标移入事件
// mouseout: resetHighlight,//鼠标移出事件
// click: zoomToFeature//鼠标点击事件
});
}
</script>
</body>
</html>