效果图：
代码块：
<!--* @Description: * @Version: 2.0* @Autor: Cookie* @Date: 2022-03-19 16:28:57* @LastEditors: Zhang* @LastEditTime: 2022-03-19 17:58: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="./river1.json"></script>
<style>.box {position: absolute;left: 200px;top:50px;z-index: 10000;}button {width: 100px;}
</style>
<div id="map" style="width: 100vw; height: 90vh;"></div></head>
<body><script>console.log(river)var map = L.map('map').setView([30.3367385888597, 120.135198302847], 5);
// var wpUrl = 'http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0';// L.tileLayer(wpUrl, {
// attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
// }).addTo(map);// map.setView([31.864942016, 117.2882028929])// L.tileLayer.wms("https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full", {
// layers:'name', //需要加载的图层名
// format:"image/png",
// transparent:true,
// crs: L.CRS.EPSG4326
// }).addTo(map);
let optoins = {showRiverName: ['四川省']
}
let layer1 = L.geoJSON(river, {id: "RIVER_COLOR",style: function(geoJsonFeature) {// console.log(geoJsonFeature)// let color = "#306bff"// let color1 = "rgba(0,0,0,0)"// let nameClass=geoJsonFeature.properties.DJ * 1>4?"fz24":"fz24"// geoJsonFeature.properties.name = geoJsonFeature.properties.SSHL // 自定义name// if (optoins.hidRiverName && optoins.hidRiverName.indexOf(geoJsonFeature.properties.SSHL) != -1) {// color = color1// addText(geoJsonFeature.properties)// } else {// addText(geoJsonFeature.properties, nameClass)// }color = "#306bff"addText(geoJsonFeature.properties)if (optoins.showRiverName) {if (optoins.showRiverName.indexOf(geoJsonFeature.properties.name) != -1) {color = "#306bff"} else {color = "#fff"}}console.log(color)return {fillColor: color,fillOpacity: 1,weight: 2,color: "#000"}}}).on("click", function(e) {console.log(e)}).bindPopup(function (layer) {return `name:${layer.feature.properties.name}`}) // return layer.feature.properties.description;// 把这一组图层Layer放到同一个图层组layerGroupmylayerGroup = L.layerGroup([layer1])// 把图层组layerGroup添加到地图map.addLayer(mylayerGroup)function addText(data, className) {// console.log(data)if(!data.name) {return}let myIcon = L.divIcon({html: data.name,className: className ? className : 'my-div-icon',iconSize: 60,});let center = data.centroid ? data.centroid : data.centerlet marker = L.marker([center[1], center[0]], {icon: myIcon})map.addLayer(marker);
}</script>
</body>
</html>
数据来源：http://datav.aliyun.com/portal/school/atlas/area_selector