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 ...
随机推荐
- 【已解决】Hadoop未知的主机名master
- 汇编语言-int指令
int 指令 int 指令的格式为:int n,n为中断类型码,它的功能是引发终端过程. CPU执行int n指令,相当于引发一个n号中断的中断过程,执行过程如下. 取中断类型码n: 标志寄存器入栈, ...
- #K-D Tree#洛谷 2093 [国家集训队]JZPFAR
题目 平面上有 \(n\) 个点.现在有 \(m\) 次询问,每次给定一个点 \((px, py)\) 和一个整数 \(k\), 输出 \(n\) 个点中离 \((px, py)\) 的距离第 \(k ...
- 单元测试篇2-TDD三大法则解密
引言 在我们上一篇文章了解了单元测试的基本概念和用法之后,今天我们来聊一下 TDD(测试驱动开发) 测试驱动开发 (TDD) 测试驱动开发英文全称是Test Driven Development 简称 ...
- HarmonyOS实践之应用状态变量共享
平时在开发的过程中,我们会在应用中共享数据,在不同的页面间共享信息.虽然常用的共享信息,也可以通过不同页面中组件间信息共享的方式,但有时使用应用级别的状态管理会让开发工作变得简单. 根据不同的使用 ...
- HDC 2022 开发者主题演讲与技术分论坛干货分享（附课件）
原文:https://mp.weixin.qq.com/s/axm6HyX0PqKCKksFxIfehg,点击链接查看更多技术内容. 11月4日-11月6日,HDC 2022在东莞成功举办,这是 ...
- HDC 2022重磅首发《鸿蒙生态应用开发白皮书》，附全文
原文:https://mp.weixin.qq.com/s/sEicsV_82770nAlcSCzwIw,点击链接查看更多技术内容. 11月4-6日,华为开发者大会2022(HDC)在东莞松山湖举 ...
- ping 介绍
前言 因为要整理网络这一块,所以打算先把概念写下.这节介绍ping的实现原理. 正文 先看一下图: 又没有发现和我们的icmp很像?对头.在icmp中,我写道:icmp有两种报文,一种是差错报文,一种 ...
- 微软自带的Hyper-V虚拟机使用、VMware16安装Win10虚拟机介绍
一.首先介绍VMware虚拟机. 安装WIN10统虚拟机推荐用VMware16. 1.镜像网址: MSD网址传送门1:https://msdn.itellyou.cn MSD新网址传送门2:https ...
- C++ 访问说明符详解：封装数据，控制访问，提升安全性
C++ 访问说明符 访问说明符是 C++ 中控制类成员(属性和方法)可访问性的关键字.它们用于封装类数据并保护其免受意外修改或滥用. 三种访问说明符: public:允许从类外部的任何地方访问成员. ...