leaft 动态配置渲染河流

2023-11-07 07:50
文章标签 配置 动态 渲染 河流 leaft

本文主要是介绍leaft 动态配置渲染河流，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

动态配置渲染河流，颜色，宽度

版本1效果图：动态配置河流

 代码块

<!--* @Description: * @Version: 2.0* @Autor: Cookie* @Date: 2022-03-18 17:24:49* @LastEditors: Zhang* @LastEditTime: 2022-03-19 15:59:19
-->
<!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="" />
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="./river1.json"></script><style>.leaflet-marker-icon.leaflet-interactive {font-size: 20px;}.box {position: absolute;top: 50px;left: 50px;/* width: 500px;height: 100px; */z-index: 10000;}.my-div-icon {display: none;}.el-select {width: 140px;}
</style>
<div id="app"><div id="map" style="width: 100vw; height: 100vh"></div><div class="box"><span>请配置渲染河流:</span><el-select v-model="value"><el-optionv-for="item in options.showRiverName":key="item.value":label="item.label":value="item.value"></el-option></el-select><span>请配置河流宽度:</span><el-select v-model="width"><el-optionv-for="item in widthOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select><span>请配置河流颜色:</span><el-select v-model="color"><el-optionv-for="item in colorOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></div>
</div>
</head>
<body><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>var map,mylayerGroup,color ="#306bff";
new Vue({el: '#app',data: {value: '新凯河',width: 6,color: color,options: {showRiverName: [{value:'松花江',label: '松花江'},{value:'新凯河',label: '新凯河'},{value:'饮马河',label: '饮马河'},]},widthOptions: [{value:'1',label: '1'},{value:'6',label: '6'},{value:'12',label: '12'},],colorOptions: [{value:'#306bff',label: '蓝色'},{value:'red',label: '红色'},]},mounted() {this.init()},methods: {init() {map = L.map('map').setView([30.3367385888597, 120.135198302847], 9);var wpUrl = 'http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0';L.tileLayer(wpUrl, {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);map.setView([43.88, 125.35])this.addRiver(this.value)},addRiver(val) {let optoins = {hidRiverName: []} this.options.showRiverName.forEach(el => {if(el.label !== val) {optoins.hidRiverName.push(el.label)}});let width = this.widthconsole.log(optoins.hidRiverName)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 // 自定义nameif (optoins.hidRiverName && optoins.hidRiverName.indexOf(geoJsonFeature.properties.SSHL) != -1) {color = color1addText(geoJsonFeature.properties)} else {addText(geoJsonFeature.properties, nameClass)}// if (optoins.showRiverName) {//   if (optoins.showRiverName.indexOf(geoJsonFeature.properties.SSHL) != -1) {//     addText(geoJsonFeature.properties, nameClass)//     color = "#306bff"//   } else {//     color = "rgba(0,0,0,0)"//   }// }if (optoins.hidRiverLevel && optoins.hidRiverLevel.indexOf(geoJsonFeature.properties.DJ * 1) != -1) {color = "rgba(0,0,0,0)"}console.log(color)return {fillColor: "#1100d6",fillOpacity: 0.4,// weight: getRiverWidth(geoJsonFeature.properties.HLDJ),weight: width,color: getColor(color)}}}).on("click", function(e) {console.log(e)})//  把这一组图层Layer放到同一个图层组layerGroupmylayerGroup = L.layerGroup([layer1])// 把图层组layerGroup添加到地图map.addLayer(mylayerGroup)},},watch: {value(newval,oldval) {mylayerGroup.clearLayers() // 删除图层this.addRiver(newval)},width(newval,oldval) {mylayerGroup.clearLayers()this.addRiver(this.value)},color() {mylayerGroup.clearLayers()color = this.colorthis.addRiver(this.value)}} 
})function getColor(val) {if(val !=='rgba(0,0,0,0)') {// console.log(color)return color}else {return color1 = 'rgba(0,0,0,0)'}
}function getRiverWidth(level) { //获取河流宽度let width = 12switch (level) {case "一级河流":width = 12break;case "二级河流":width = 10break;case "三级河流":width = 8break;case "四级河流":width = 6break;case "五级河流":width = 4break;case "六级河流":width = 4break;case "七级河流":width = 4break;}return width
}function addText(data, className) { // 标记河流名字console.log(data)debuggerlet 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>

river1.json数据:https://github.com/zhanghenxiao/leaflet.git

 版本2效果图：动态配置河流及添加省份渲染

 

<!--* @Description: * @Version: 2.0* @Autor: Cookie* @Date: 2022-03-18 17:24:49* @LastEditors: Zhang* @LastEditTime: 2022-03-19 15:59:19
-->
<!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="" />
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="./data.json"></script>
<script src="./river1.json"></script><style>.leaflet-marker-icon.leaflet-interactive {font-size: 20px;}.box {position: absolute;top: 50px;left: 50px;/* width: 500px;height: 100px; */z-index: 10000;}.my-div-icon {display: none;}.rgba{color: rgba(0, 0, 0, 0);}.black {color: black;}.el-select {width: 140px;}
</style>
<div id="app"><div id="map" style="width: 100vw; height: 100vh"></div><div class="box"><span>请配置渲染河流:</span><el-select v-model="value"><el-optionv-for="item in options.showRiverName":key="item.value":label="item.label":value="item.value"></el-option></el-select><span>请配置河流宽度:</span><el-select v-model="width"><el-optionv-for="item in widthOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select><span>请配置河流颜色:</span><el-select v-model="color"><el-optionv-for="item in colorOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></div>
</div>
</head>
<body><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>var map,mylayerGroup,mylayerGroup2,mylayerGroup21,mylayerGroup22,
mylayerGroup3,color ="#306bff",isZoom=true,isClick=false,layerMarkers=[];
let style = {fillColor: "#e5dada",fillOpacity:.4,weight: 1 ,color: "#306bff"
}  
let style2 = {fillColor: "yellow",fillOpacity: 0.4,color: 'yellow'
}
function highlightFeature(e) {if(mylayerGroup3) {mylayerGroup3.clearLayers()}let layer2 = L.geoJSON(e.target.feature, {style: function (feature) {return {fillColor: "yellow",fillOpacity: 0.4,color: 'yellow',};}}).on('mouseover',function(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);})mylayerGroup3 = L.layerGroup([layer2])map.addLayer(mylayerGroup3)// console.log(e);if(e.target.feature.properties.name === '吉林省') {mylayerGroup21.clearLayers()layerMarkers.clearLayers()isZoom =falsevue.addRiver(vue.value,'yellow')} 
}function onEachFeature(feature, layer) {layer.on({mouseover: highlightFeature,});
}
let vue = new Vue({el: '#app',data: {value: '松花江',width: 12,color: color,options: {showRiverName: [{value:'松花江',label: '松花江'},{value:'新凯河',label: '新凯河'},{value:'饮马河',label: '饮马河'},]},widthOptions: [{value:'1',label: '1'},{value:'6',label: '6'}, {value:'12',label: '12'},],colorOptions: [{value:'#306bff',label: '蓝色'},{value:'red',label: '红色'},]},mounted() {this.init()},methods: {init() {map = L.map('map').setView([29.40268, 106.54041], 5);var wpUrl = 'http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0';L.tileLayer(wpUrl, {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);let geoJsonLayer = L.geoJson(data, {style,  onEachFeature: (feature, layer) => {//onEachFeature回调  关键方法if (onEachFeature) {onEachFeature(feature, layer); }}}).addTo(map)this.addRiver(this.value)},addRiver(val) {let width = this.widthlet layerName = val         let layerColor =  isClick? 'yellow': this.colorlet layer1  = L.geoJSON(river, {id: "RIVER_COLOR",onEachFeature: (feature, layer) => {//onEachFeature回调  关键方法this.riverOnEachFeature(feature, layer,layerName,width,layerColor);}})//  把这一组图层Layer放到同一个图层组layerGroup//  mylayerGroup = L.layerGroup([layer1])// // // 把图层组layerGroup添加到地图// map.addLayer(mylayerGroup)// console.log('getBounds');// console.log(layer1.getBounds()); },riverOnEachFeature(feature, layer,layerName,width,color) {let nameClass=''if(feature.properties.SSHL !== layerName) {let layer1 = L.geoJSON(feature, {style: function (feature) {return {fillColor: "red",fillOpacity: 0.4,color: 'red',};}}).on("click", function(e) {console.log(e)let layer2 = L.geoJSON(e.layer.feature, {style: function (feature) {console.log('feature');console.log(feature);return {fillColor: "rgba(0,0,0,0)",fillOpacity: 0.4,color: 'rgba(0,0,0,0)',};}}).bindPopup(function (layer) {return  `<h1>${layer.feature.properties.SSHL}</h1>`})}).bindPopup(function (layer) {return  `<h1>${layer.feature.properties.SSHL}</h1>`}) // 不显示其他河流则不添加到图层就行// mylayerGroup2 = L.layerGroup([layer1])// map.addLayer(mylayerGroup2)   // console.log(11);}else {let layer1 = L.geoJSON(feature, {style: function (feature) {// console.log(feature);addText(feature.properties, nameClass='black')return {fillColor: color,fillOpacity: 0.4,weight: width,color: color,};}}).on("click", function(e) {isClick = truelet layer2 = L.geoJSON(e.layer.feature, {style: function (feature) {console.log('feature');console.log(feature);return {fillColor: "yellow",fillOpacity: 0.4,weight: 12,color: 'yellow'};}}).bindPopup(function (layer) {return  `<h1>${layer.feature.properties.SSHL}</h1>`})mylayerGroup22 = L.layerGroup([layer2])map.addLayer(mylayerGroup22)// console.log(e)}).bindPopup(function (layer) {return  `<h1>${layer.feature.properties.SSHL}</h1>`})let bounds = layer1.getBounds() // 返回地图视图的经纬度边界console.log(bounds);if(isZoom){map.flyToBounds([[bounds._southWest.lat, bounds._southWest.lng],[bounds._northEast.lat, bounds._northEast.lng]]) }mylayerGroup21 = L.layerGroup([layer1])map.addLayer(mylayerGroup21)           }},},watch: {value(newval,oldval) {this.value = newvalif(mylayerGroup21) {mylayerGroup21.clearLayers()}if(mylayerGroup22) {mylayerGroup22.clearLayers()}layerMarkers.clearLayers()isZoom = trueisClick = falsethis.addRiver(this.value)},width(newval,oldval) {this.width = newval// mylayerGroup.clearLayers()if(mylayerGroup21) {mylayerGroup21.clearLayers()}layerMarkers.clearLayers()isZoom = trueisClick = falsethis.addRiver(this.value)},color(newval,oldval) {this.color = newval// mylayerGroup.clearLayers()if(mylayerGroup21) {mylayerGroup21.clearLayers() // 删除图层}layerMarkers.clearLayers()color = this.colorisZoom = trueisClick = falsethis.addRiver(this.value)}} 
})function getColor(val) {if(val !=='rgba(0,0,0,0)') {// console.log(color)return color}else {return color1 = 'rgba(0,0,0,0)'}
}function addText(data, className) {let myIcon = L.divIcon({html: data.SSHL,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})layerMarkers = L.layerGroup([marker])  //  设置marker 图层组，方便图层管理map.addLayer(layerMarkers);}</script>
</body>
</html>

这篇关于leaft 动态配置渲染河流的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/362244。

相关文章

windos server2022的配置故障转移服务的图文教程

windos server2022的配置故障转移服务的图文教程

《windosserver2022的配置故障转移服务的图文教程》本文主要介绍了windosserver2022的配置故障转移服务的图文教程,以确保服务和应用程序的连续性和可用性,文中通过图文介绍的非... 目录准备环境：步骤故障转移群集是 Windows Server 2022 中提供的一种功能，用于在多个
阅读更多...
windos server2022里的DFS配置的实现

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS？优势：应用场景：DFS配置步骤什么是DFS？DFS指的是分布式文件系统（Distr
阅读更多...
关于Maven中pom.xml文件配置详解

关于Maven中pom.xml文件配置详解

《关于Maven中pom.xml文件配置详解》pom.xml是Maven项目的核心配置文件,它描述了项目的结构、依赖关系、构建配置等信息,通过合理配置pom.xml,可以提高项目的可维护性和构建效率... 目录1. POM文件的基本结构1.1 项目基本信息2. 项目属性2.1 引用属性3. 项目依赖4. 构
阅读更多...
龙蜥操作系统Anolis OS-23.x安装配置图解教程(保姆级)

龙蜥操作系统Anolis OS-23.x安装配置图解教程(保姆级)

《龙蜥操作系统AnolisOS-23.x安装配置图解教程(保姆级)》：本文主要介绍了安装和配置AnolisOS23.2系统，包括分区、软件选择、设置root密码、网络配置、主机名设置和禁用SELinux的步骤，详细内容请阅读本文，希望能对你有所帮助... ‌AnolisOS‌是由阿里云推出的开源操作系统，旨
阅读更多...
mysql-8.0.30压缩包版安装和配置MySQL环境过程

mysql-8.0.30压缩包版安装和配置MySQL环境过程

《mysql-8.0.30压缩包版安装和配置MySQL环境过程》该文章介绍了如何在Windows系统中下载、安装和配置MySQL数据库,包括下载地址、解压文件、创建和配置my.ini文件、设置环境变量... 目录压缩包安装配置下载配置环境变量下载和初始化总结压缩包安装配置下载下载地址：https://d
阅读更多...
VUE动态绑定class类的三种常用方式及适用场景详解

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式（对象添加：情景一）2.动态添加一个class样式（字符串添加：情
阅读更多...
gradle安装和环境配置全过程

gradle安装和环境配置全过程

《gradle安装和环境配置全过程》本文介绍了如何安装和配置Gradle环境,包括下载Gradle、配置环境变量、测试Gradle以及在IntelliJIDEA中配置Gradle... 目录gradle安装和环境配置1 下载GRADLE2 环境变量配置3 测试gradle4 设置gradle初始化文件5 i
阅读更多...
SpringCloud配置动态更新原理解析

SpringCloud配置动态更新原理解析

《SpringCloud配置动态更新原理解析》在微服务架构的浩瀚星海中,服务配置的动态更新如同魔法一般,能够让应用在不重启的情况下,实时响应配置的变更,SpringCloud作为微服务架构中的佼佼者,... 目录一、SpringBoot、Cloud配置的读取二、SpringCloud配置动态刷新三、更新@R
阅读更多...
MySQL中my.ini文件的基础配置和优化配置方式

MySQL中my.ini文件的基础配置和优化配置方式

《MySQL中my.ini文件的基础配置和优化配置方式》文章讨论了数据库异步同步的优化思路,包括三个主要方面：幂等性、时序和延迟,作者还分享了MySQL配置文件的优化经验,并鼓励读者提供支持... 目录mysql my.ini文件的配置和优化配置优化思路MySQL配置文件优化总结MySQL my.ini文件
阅读更多...
C#读取本地网络配置信息全攻略分享

C#读取本地网络配置信息全攻略分享

《C#读取本地网络配置信息全攻略分享》在当今数字化时代,网络已深度融入我们生活与工作的方方面面,对于软件开发而言,掌握本地计算机的网络配置信息显得尤为关键,而在C#编程的世界里,我们又该如何巧妙地读取... 目录一、引言二、C# 读取本地网络配置信息的基础准备2.1 引入关键命名空间2.2 理解核心类与方法
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2