leaflet 河流颜色渐变效果
1、Leaflet-polycolor
github地址：https://github.com/Oliv/leaflet-polycolor
插件缺陷：需要把每个折点的颜色都指定才行，一般做不到
2、Leaflet.hotline
github下载地址：https://github.com/iosphere/Leaflet.hotline
完整demo示例：
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<script src="js/coords.js"></script>
<script src="../dist/leaflet.hotline.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
<style>
header,
section {
max-width: 600px;
margin: 1.5em auto;
text-align: center;
}
aside {
margin: 1.5em 0;
}
label {
display: inline-block;
padding: 0.5em;
}
input {
vertical-align: text-bottom;
}
h1 a {
text-decoration: none;
color: inherit;
font-weight: normal;
}
h1 img {
vertical-align: text-bottom;
}
#map {
width: 100%;
height: 300px;
}
.muted {
color: #666;
font-size: 0.8em;
}
</style>
</head>
<body>
<header>
<h1>
<a href="https://github.com/iosphere/Leaflet.hotline/">Leaflet.<img src="img/hotline.png" alt="hotline" height="50"/></a>
</h1>
<p>A Leaflet plugin for drawing gradients along polylines. <br>
Inspired by <a href="https://github.com/Leaflet/Leaflet.heat">Leaflet.heat</a>.</p>
<p>Documentation is at <a href="https://github.com/iosphere/Leaflet.hotline/">iosphere/Leaflet.hotline</a>.</p>
</header>
<section>
<div id="map"></div>
<p class="muted">The range of the z values is around 1 to 942. All values below the minimum get displayed in the start color of the palette, all values above 350 get displayed in the end color of the palette. All values in between get displayed in the color of the gradient (as defined by the palette) picked at their relative position.</p>
</section>
<script>
var tiles = L.tileLayer('//{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
var map = L.map('map', {
layers: [tiles],
}); //dataArr长度是942，给dataArr的z值重新赋值，模拟总磷的范围变化3~6
i=3;
dataArr.forEach((item)=>{
item[2]=i;
i=i+0.003;
}); //创建hotline对象，dataArr的值是[x值、y值、z值]
var hotlineLayer = L.hotline(dataArr, {
min: 1,//z值的最小值
max: 6,//z值的最大值
palette: {
0.0: '#3CC5F1',
0.2: '#12AAEE',
0.4: '#5ED323',
0.6: '#FED724',
0.8: '#FC8402',
1.0: '#FC3F00'
},
weight: 10,//线条粗细
outlineColor: '#888888',//边框线颜色
outlineWidth: 1//边框线粗细
});
map.fitBounds(hotlineLayer.getBounds());
hotlineLayer.addTo(map);
</script>
</body>
</html>
3、mapboxgl 中插值表达式
完整示例如下：https://docs.mapbox.com/mapbox-gl-js/example/line-gradient/
参考博客地址：https://juejin.cn/post/7096052657604788232
4、canvas动态绘制
连接地址：https://blog.csdn.net/weixin_34353688/article/details/112120676
leaflet 河流颜色渐变效果的更多相关文章
- Java实现颜色渐变效果
RGB色彩,在自然界中肉眼所能看到的任何色彩都可以由红(R).绿(G).蓝(B)这三种色彩混合叠加而成,因此我们只要递增递减的修改其特定值就能得到相应的渐变效果. 运行效果:(图1) 运行5秒后:(图 ...
- Android开发---如何操作资源目录中的资源文件3--圆角边框、背景颜色渐变效果、边框颜色
Android开发---如何操作资源目录中的资源文件3 效果图 1.圆角边框 2.背景颜色渐变效果 1.activity_main.xml 描述: 定义了一个shape资源管理按钮 <?xml ...
- Android Textview实现文字颜色渐变效果
最近做应用的时候遇到一个需求,一行文字的颜色需要一个渐变效果 如上所有 从左到有逐渐变化,自己写了一个demo实现上述效果 package com.huwei.example.test; import ...
- iOS 滑动页面标题切换颜色渐变效果
话不多说,直接上图,要实现类似如下效果. 这个效果非常常见,这里着重讲讲核心功能 封装顶部的PageTitleView 封装构造函数 封装构造函数,让别人在创建对象时,就传入其实需要显示的内容 fra ...
- Javascript，颜色渐变效果的处理
在搭建博主博客的时候,寻思着做一些效果,看到菜单,就想是不是可以做一下颜色的渐变,增加一点动态的感觉.有个jquery的插件,效果相当不错,不过博主还是打算自立更生写一下,看看能不能实现. 下面就是博 ...
- [unity3d程序] 颜色渐变效果
研究了下,颜色变化时遵从RGB圆环(就是说颜色条对接一下成环)路径最小变化原则.举个例子,加入ABCDE四个颜色点,并且A和E在同一点(转了一圈)设定从A变化到C的话,有两种路径,一种ABC,还一种A ...
- 【Android 界面效果20】Android GradientDrawable类的详解，设置activity的背景颜色渐变效果
看到这个例子的标题RoundRects,我的第一感觉是介绍RoundRectShape, 打开例子看了代码却是使用GradientDrawable来实现的. GradientDrawable 支持使用 ...
- Android GradientDrawable类的详解，设置activity的背景颜色渐变效果
看到这个例子的标题RoundRects,我的第一感觉是介绍RoundRectShape, 打开例子看了代码却是使用GradientDrawable来实现的. GradientDrawable 支持使用 ...
- Android 4.4及以上系统下应用的状态栏颜色渐变效果的实现
上一篇转载的博文里讲到了怎么开启状态栏透明的效果,不过如果在有ActionBar的情况下,会出现状态栏透明而ActionBar横亘在状态栏和内容之间的丑陋情况,如下图: 通过百度之后,发现了GitHu ...
- CSS3背景颜色渐变效果
1.firefox浏览器: background-image: -moz-linear-gradient(top , #eef9fe, #d1ecff); 2.safari.chrome浏览器: ba ...
随机推荐
- #回滚莫队，链表#洛谷 6349 [PA2011] Kangaroos
题目传送门 分析 首先区间 \([l,r]\) 与 \([L,R]\) 相交当且仅当 \(l\leq R\) 且 \(L\leq r\)(其实就是完全覆盖或者有一端点在区间中) 而且坐标范围太大了,如 ...
- #dp#JZOJ 1281 旅行
分析 考虑每次都是取出一个连续段置换一下, 可以预处理出相邻差的绝对值的前缀和, 但是如果正序无法知道上一段是从哪个终止的 所以倒序就可以了 代码 #include <cstdio> #i ...
- 这一次,让我们一起来搞懂MySQL
欢迎加入我的专栏,和我一起开始 MySQL 学习之旅. 从日常的开发和优化中,一步步地从一个数据库小白成为 MySQL 调优的开发人员.回想起来,从我第一次带创建索引至今,已经有十个年头了.在这个过程 ...
- 初学STM32 SDIO(一)
1. SDIO协议简介 SDIO全称是安全数字输入/输出接口 ,控制器对SD卡进行读写通信操作一般有两种通信接口可选,一种是SPI接口,另外一种就是SDIO接口. 多媒体卡(MMC).SD卡. S ...
- Qt5自带的日志功能，将日志输出到文件
#include "QtWidgetsApplication1.h" #include <QtWidgets/QApplication> #include <Qt ...
- 每日一题--Python打印金字塔
def day1(num): s = 'abcdefghijklmnopqrstuvwxyz' * (num // 26 + 1) for i in range(1, num + 1): print( ...
- Centos环境部署SpringBoot项目
centos JDK Jenkins maven tomcat git myslq nginx 7.9 11.0.19 2.418 3.8.1 9.0.78 2.34.4 5.7.26 1.24.0 ...
- Centos8安装docker-ce
一.安装步骤 1.安装yum-utils yum install -y yum-utils 2.配置阿里源 yum-config-manager --add-repo http://mirrors.a ...
- 重新点亮shell————awk函数[十五]
前言 简单介绍一下awk函数. 正文 算术函数 字符串函数 自定义函数 例子: 结 awk就到这里了.
- mysql 必知必会整理—数据库的维护[十八]
前言 简单介绍一下数据库的维护. 正文 像所有数据一样,MySQL的数据也必须经常备份. 由于MySQL数据库是基于磁盘的文件,普通的备份系统和例程就能备份MySQL的数据. 但是,由于这些文件总是处 ...