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。

相关文章

Oracle迁移PostgreSQL隐式类型转换配置指南

Oracle迁移PostgreSQL隐式类型转换配置指南

《Oracle迁移PostgreSQL隐式类型转换配置指南》Oracle迁移PostgreSQL时因类型差异易引发错误,需通过显式/隐式类型转换、转换关系管理及冲突处理解决,并配合验证测试确保数据一致... 目录一、问题背景二、解决方案1. 显式类型转换2. 隐式转换配置三、维护操作1. 转换关系管理2.
阅读更多...
IDEA中配置Tomcat全过程

IDEA中配置Tomcat全过程

《IDEA中配置Tomcat全过程》文章介绍了在IDEA中配置Tomcat的六步流程,包括添加服务器、配置部署选项、设置应用服务器及启动,并提及Maven依赖可能因约定大于配置导致问题,需检查依赖版本... 目录第一步第二步第三步第四步第五步第六步总结第一步选择这个方框第二步选择+号，找到Tomca
阅读更多...
Win10安装Maven与环境变量配置过程

Win10安装Maven与环境变量配置过程

《Win10安装Maven与环境变量配置过程》本文介绍Maven的安装与配置方法,涵盖下载、环境变量设置、本地仓库及镜像配置,指导如何在IDEA中正确配置Maven,适用于Java及其他语言项目的构建... 目录Maven 是什么？一、下载二、安装三、配置环境四、验证测试五、配置本地仓库六、配置国内镜像地址
阅读更多...
SpringBoot多环境配置数据读取方式

SpringBoot多环境配置数据读取方式

《SpringBoot多环境配置数据读取方式》SpringBoot通过环境隔离机制,支持properties/yaml/yml多格式配置,结合@Value、Environment和@Configura... 目录一、多环境配置的核心思路二、3种配置文件格式详解2.1 properties格式（传统格式）1.
阅读更多...
Debian系和Redhat系防火墙配置方式

Debian系和Redhat系防火墙配置方式

《Debian系和Redhat系防火墙配置方式》文章对比了Debian系UFW和Redhat系Firewalld防火墙的安装、启用禁用、端口管理、规则查看及注意事项,强调SSH端口需开放、规则持久化,... 目录Debian系UFW防火墙1. 安装2. 启用与禁用3. 基本命令4. 注意事项5. 示例配置R
阅读更多...
PyCharm中配置PyQt的实现步骤

PyCharm中配置PyQt的实现步骤

《PyCharm中配置PyQt的实现步骤》PyCharm是JetBrains推出的一款强大的PythonIDE,结合PyQt可以进行pythion高效开发桌面GUI应用程序,本文就来介绍一下PyCha... 目录1. 安装China编程PyQt1.PyQt 核心组件2. 基础 PyQt 应用程序结构3. 使用 Q
阅读更多...
Redis MCP 安装与配置指南

Redis MCP 安装与配置指南

《RedisMCP安装与配置指南》本文将详细介绍如何安装和配置RedisMCP,包括快速启动、源码安装、Docker安装、以及相关的配置参数和环境变量设置,感兴趣的朋友一起看看吧... 目录一、Redis MCP 简介二、安www.chinasem.cn装 Redis MCP 服务2.1 快速启动（推荐）2.
阅读更多...
go动态限制并发数量的实现示例

go动态限制并发数量的实现示例

《go动态限制并发数量的实现示例》本文主要介绍了Go并发控制方法,通过带缓冲通道和第三方库实现并发数量限制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录带有缓冲大小的通道使用第三方库其他控制并发的方法因为go从语言层面支持并发，所以面试百分百会问到
阅读更多...
Spring Boot配置和使用两个数据源的实现步骤

Spring Boot配置和使用两个数据源的实现步骤

《SpringBoot配置和使用两个数据源的实现步骤》本文详解SpringBoot配置双数据源方法,包含配置文件设置、Bean创建、事务管理器配置及@Qualifier注解使用,强调主数据源标记、代... 目录Spring Boot配置和使用两个数据源技术背景实现步骤1. 配置数据源信息2. 创建数据源Be
阅读更多...
Spring Boot Maven 插件如何构建可执行 JAR 的核心配置

Spring Boot Maven 插件如何构建可执行 JAR 的核心配置

《SpringBootMaven插件如何构建可执行JAR的核心配置》SpringBoot核心Maven插件,用于生成可执行JAR/WAR,内置服务器简化部署,支持热部署、多环境配置及依赖管理... 目录前言一、插件的核心功能与目标1.1 插件的定位1.2 插件的 Goals（目标）1.3 插件定位1.4 核
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2