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。

相关文章

mybatis映射器配置小结

mybatis映射器配置小结

《mybatis映射器配置小结》本文详解MyBatis映射器配置,重点讲解字段映射的三种解决方案（别名、自动驼峰映射、resultMap）,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定... 目录select中字段的映射问题使用SQL语句中的别名功能使用mapUnderscoreToCame
阅读更多...
Linux下MySQL数据库定时备份脚本与Crontab配置教学

Linux下MySQL数据库定时备份脚本与Crontab配置教学

《Linux下MySQL数据库定时备份脚本与Crontab配置教学》在生产环境中,数据库是核心资产之一,定期备份数据库可以有效防止意外数据丢失,本文将分享一份MySQL定时备份脚本,并讲解如何通过cr... 目录备份脚本详解脚本功能说明授权与可执行权限使用 Crontab 定时执行编辑 Crontab添加定
阅读更多...
Java使用Javassist动态生成HelloWorld类

Java使用Javassist动态生成HelloWorld类

《Java使用Javassist动态生成HelloWorld类》Javassist是一个非常强大的字节码操作和定义库,它允许开发者在运行时创建新的类或者修改现有的类,本文将简单介绍如何使用Javass... 目录1. Javassist简介2. 环境准备3. 动态生成HelloWorld类3.1 创建CtC
阅读更多...
Java使用jar命令配置服务器端口的完整指南

Java使用jar命令配置服务器端口的完整指南

《Java使用jar命令配置服务器端口的完整指南》本文将详细介绍如何使用java-jar命令启动应用,并重点讲解如何配置服务器端口,同时提供一个实用的Web工具来简化这一过程,希望对大家有所帮助... 目录1. Java Jar文件简介1.1 什么是Jar文件1.2 创建可执行Jar文件2. 使用java
阅读更多...
SpringBoot 多环境开发实战(从配置、管理与控制)

SpringBoot 多环境开发实战(从配置、管理与控制)

《SpringBoot多环境开发实战(从配置、管理与控制)》本文详解SpringBoot多环境配置,涵盖单文件YAML、多文件模式、MavenProfile分组及激活策略,通过优先级控制灵活切换环境... 目录一、多环境开发基础（单文件 YAML 版）（一）配置原理与优势（二）实操示例二、多环境开发多文件版
阅读更多...
Vite 打包目录结构自定义配置小结

Vite 打包目录结构自定义配置小结

《Vite打包目录结构自定义配置小结》在Vite工程开发中,默认打包后的dist目录资源常集中在asset目录下,不利于资源管理,本文基于Rollup配置原理,本文就来介绍一下通过Vite配置自定义... 目录一、实现原理二、具体配置步骤1. 基础配置文件2. 配置说明（1）js 资源分离（2）非 JS 资
阅读更多...
MySQL8 密码强度评估与配置详解

MySQL8 密码强度评估与配置详解

《MySQL8密码强度评估与配置详解》MySQL8默认启用密码强度插件,实施MEDIUM策略（长度8、含数字/字母/特殊字符）,支持动态调整与配置文件设置,推荐使用STRONG策略并定期更新密码以提... 目录一、mysql 8 密码强度评估机制1.核心插件：validate_password2.密码策略级
阅读更多...
ShardingProxy读写分离之原理、配置与实践过程

ShardingProxy读写分离之原理、配置与实践过程

《ShardingProxy读写分离之原理、配置与实践过程》ShardingProxy是ApacheShardingSphere的数据库中间件,通过三层架构实现读写分离,解决高并发场景下数据库性能瓶... 目录一、ShardingProxy技术定位与读写分离核心价值1.1 技术定位1.2 读写分离核心价值二
阅读更多...
QT Creator配置Kit的实现示例

QT Creator配置Kit的实现示例

《QTCreator配置Kit的实现示例》本文主要介绍了使用Qt5.12.12与VS2022时,因MSVC编译器版本不匹配及WindowsSDK缺失导致配置错误的问题解决,感兴趣的可以了解一下... 目录0、背景：qt5.12.12+vs2022一、症状：二、原因：(可以跳过，直奔后面的解决方法)三、解决方
阅读更多...
SpringBoot路径映射配置的实现步骤

SpringBoot路径映射配置的实现步骤

《SpringBoot路径映射配置的实现步骤》本文介绍了如何在SpringBoot项目中配置路径映射,使得除static目录外的资源可被访问,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一... 目录SpringBoot路径映射补：springboot 配置虚拟路径映射 @RequestMapp
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2