leaflet 渲染GeoJson(中国)数据_综合

效果图：
<!--* @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: '&copy; <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>