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 ...
随机推荐
- Android将数据导入到已有的excel表格_0
用到的jxl2.6.12 jar 包下载地址: https://mvnrepository.com/artifact/net.sourceforge.jexcelapi/jxl/2.6.12
- vue阻止冒泡事件 阻止点击事件的执行 结合div和组件阻止点击事件
vue阻止冒泡事件 阻止点击事件的执行 <div @click="alerA1()" > <div @click.stop="alerA2()>& ...
- 访问数据库 与 Java框架各层级
目录 访问数据库流程 Java框架各层级 4 层 对象的调用流程 耦合性与分层 项目地址:https://github.com/aijisjtu/Bot-Battle 访问数据库流程 flowchar ...
- #根号分治，背包#51nod 1597 有限背包计数问题 LOJ 6089 小Y的背包计数问题
题目 有一个大小为\(n\)的背包,有\(n\)种物品, 第\(i\)种物品的大小为\(i\),且有\(i\)个, 求装满这个背包的方案数 \(n\leq 10^5\) 分析 直接多重背包会有问题,考 ...
- js复制文字到剪切板
此方法仅适用于 IE demo <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 使用 Grafana 统一监控展示-对接 Zabbix
概述 在某些情况下,Metrics 监控的 2 大顶流: Zabbix: 用于非容器的虚拟机环境 Prometheus: 用于容器的云原生环境 是共存的.但是在这种情况下,统一监控展示就不太方便,本文 ...
- Java面试题总结：基础及语法篇169道
下载链接:https://gitee.com/ItBoShao/wechat_applet/blob/master/Java面试题总结:基础及语法篇169道.pdf
- Linux之网络排错
Linux 网卡收包流程如下 网卡收到数据包 将数据包从网卡硬件缓存移动到服务器内存中(DMA方式,不经过CPU) 通过硬中断通知CPU处理 CPU通过软中断通知内核处理 经过TCP/IP协议栈处理 ...
- Leetcode-队列得最大值
请定义一个队列并实现函数 max_value 得到队列里的最大值,要求函数max_value.push_back 和 pop_front 的均摊时间复杂度都是O(1).若队列为空,pop_front ...
- Python阿里云消息推送调用API
很多公司测试APP推送时候,应该也是很头疼:推送环境:测试.正式,稍不注意就把测试的push到正式上,导致所有用户都收到 例子很多: 其实阿里.极光都有推送Api,直接调用API就ok,特别是有的公司 ...