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。

相关文章

Zookeeper安装和配置说明

Zookeeper安装和配置说明

一、Zookeeper的搭建方式 Zookeeper安装方式有三种，单机模式和集群模式以及伪集群模式。 ■ 单机模式：Zookeeper只运行在一台服务器上，适合测试环境； ■ 伪集群模式：就是在一台物理机上运行多个Zookeeper 实例； ■ 集群模式：Zookeeper运行于一个集群上，适合生产环境，这个计算机集群被称为一个“集合体”（ensemble） Zookeeper通过复制来实现
阅读更多...
CentOS7安装配置mysql5.7 tar免安装版

CentOS7安装配置mysql5.7 tar免安装版

一、CentOS7.4系统自带mariadb # 查看系统自带的Mariadb[root@localhost~]# rpm -qa|grep mariadbmariadb-libs-5.5.44-2.el7.centos.x86_64# 卸载系统自带的Mariadb[root@localhost ~]# rpm -e --nodeps mariadb-libs-5.5.44-2.el7
阅读更多...
hadoop开启回收站配置

hadoop开启回收站配置

开启回收站功能，可以将删除的文件在不超时的情况下，恢复原数据，起到防止误删除、备份等作用。 开启回收站功能参数说明 （1）默认值fs.trash.interval = 0，0表示禁用回收站；其他值表示设置文件的存活时间。 （2）默认值fs.trash.checkpoint.interval = 0，检查回收站的间隔时间。如果该值为0，则该值设置和fs.trash.interval的参数值相等。
阅读更多...
NameNode内存生产配置

NameNode内存生产配置

Hadoop2.x 系列，配置 NameNode 内存 NameNode 内存默认 2000m ，如果服务器内存 4G ， NameNode 内存可以配置 3g 。在 hadoop-env.sh 文件中配置如下。 HADOOP_NAMENODE_OPTS=-Xmx3072m Hadoop3.x 系列，配置 Nam
阅读更多...
第10章 中断和动态时钟显示

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始，按照书籍的划分，第10章开始就进入保护模式（Protected Mode）部分了，感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断（Interrupt）的设计，中断的几种方式：外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用： 为了更好的利用处理器的性能。协同快速和慢速设备一起工作
阅读更多...
wolfSSL参数设置或配置项解释

wolfSSL参数设置或配置项解释

1. wolfCrypt Only 解释：wolfCrypt是一个开源的、轻量级的、可移植的加密库，支持多种加密算法和协议。选择“wolfCrypt Only”意味着系统或应用将仅使用wolfCrypt库进行加密操作，而不依赖其他加密库。 2. DTLS Support 解释：DTLS（Datagram Transport Layer Security）是一种基于UDP的安全协议，提供类似于
阅读更多...
动态规划---打家劫舍

动态规划---打家劫舍

题目： 你是一个专业的小偷，计划偷窃沿街的房屋。每间房内都藏有一定的现金，影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统，如果两间相邻的房屋在同一晚上被小偷闯入，系统会自动报警。 给定一个代表每个房屋存放金额的非负整数数组，计算你 不触动警报装置的情况下 ，一夜之内能够偷窃到的最高金额。 思路： 动态规划五部曲： 1.确定dp数组及含义 dp数组是一维数组，dp[i]代表
阅读更多...
【Python编程】Linux创建虚拟环境并配置与notebook相连接

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如，在当前目录下创建一个名为 myenv 的虚拟环境： python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行： source myenv/bin/activate 3.与notebook连接 在虚拟环境中，使用 pip 安装 Jupyter 和 ipykernel： pip instal
阅读更多...
代码随想录冲冲冲 Day39 动态规划Part7

代码随想录冲冲冲 Day39 动态规划Part7

198. 打家劫舍 dp数组的意义是在第i位的时候偷的最大钱数是多少 如果nums的size为0 总价值当然就是0 如果nums的size为1 总价值是nums[0] 遍历顺序就是从小到大遍历 之后是递推公式 对于dp[i]的最大价值来说有两种可能 1.偷第i个 那么最大价值就是dp[i-2]+nums[i] 2.不偷第i个 那么价值就是dp[i-1] 之后取这两个的最大值就是d
阅读更多...
沁恒CH32在MounRiver Studio上环境配置以及使用详细教程

沁恒CH32在MounRiver Studio上环境配置以及使用详细教程

目录 1.  RISC-V简介 2.  CPU架构现状 3.  MounRiver Studio软件下载 4.  MounRiver Studio软件安装 5.  MounRiver Studio软件介绍 6.  创建工程 7.  编译代码 1.  RISC-V简介         RISC就是精简指令集计算机（Reduced Instruction SetCom
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2