2. 程式人生 > 其它 >leaflet 河流顏色漸變效果

leaflet 河流顏色漸變效果

阿新 • • 發佈：2022-12-03

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: '&copy; <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

相關推薦

leaflet 河流顏色漸變效果

1、Leaflet-polycolor  github地址：https://github.com/Oliv/leaflet-polycolor  外掛缺陷：需要把每個折點的顏色都指定才行，一般做不到

【iOS】仿喜馬拉雅首頁背景顏色漸變效果

前言 之前公司要求實現喜馬拉雅的首頁背景顏色漸變效果，於是花了一段時間實現了出來，在這裡記錄下，實現該效果主要用到了下面兩個庫：

css 實現顏色漸變效果

技術標籤：jscss <div class="barBox"> <div class="colorBar" v-if="tabType==\'bug\'" :style="{width:computedBug(itemData,\'finish\')}"></div&g

css 按鈕顏色漸變效果

技術標籤：csscss3 css 按鈕顏色漸變效果 通過設定元素的background中linear-gradient，後面加上顏色漸變的方向和顏色，這是一個在uniapp專案中用到的：

echarts柱狀圖實現顏色漸變效果

先上圖 最近要求實現一個數據統計的介面，就是那種很多個統計圖在一個介面顯示，並且要做出十分炫酷的效果，必然會用到了漸變風格的設定屬性。寫一個小的demo：

iOS SwiftUI 顏色漸變填充效果的實現

SwiftUI 為我們提供了各種梯度選項，所有這些選項都可以通過多種方式使用。

css3神奇的背景控制屬性+使用顏色過渡實現漂亮的漸變效果

css3背景影象相關 相容性：IE9+ background-clip 背景圖片繪製區域 background-clip:border-box; 內容區

.NET 與樹莓派WS28XX 燈帶的顏色漸變動畫效果的實現

在上一篇水文中，老周演示了 WS28XX 的基本使用。在文末老周說了本篇介紹顏色漸變動畫的簡單實現。

Android實現 Shape屬性gradient 漸變效果

1，gradient（漸變） 【1】<gradient>用以定義漸變色，可以定義兩色漸變和三色漸變，及漸變樣式；

Unity實現UI漸變效果

本文例項為大家分享了Unity實現UI漸變效果的具體程式碼，供大家參考，具體內容如下

css3實現背景顏色漸變，文字顏色漸變，邊框顏色漸變

css3的漸變可以使用2個或者多個指定的顏色之間顯示平穩的過渡的效果。這篇文章主要介紹下css3實現背景顏色漸變，文字顏色漸變，邊框顏色漸變的方法，以便大家學習參考！

css文字漸變色_css文字顏色漸變的3種實現

在web前端開發過程中，UI設計師經常會設計一些帶漸變文字的設計圖，在以前我們只能用png的圖片來代替文字，今天可以實現使用純css實現漸變文字了。下面就介紹3中實現方式供大家參考！

CSS文字漸變效果

解法一： 程式碼： <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <style>

球體顏色漸變

技術標籤：# 動態構件球體顏色漸變 物件顏色漸變 示例HTMLCSSJS 更多有趣示例 盡在

animation 環形擴散漸變效果

技術標籤：前端 html <div className={classnames(styles.item_planet7)}> <img src={picsNeptune} />

css字型顏色漸變_HTML css 實現字型漸變顏色

技術標籤：css字型顏色漸變c語言 rgb顏色漸變rgb 顏色漸變 利用CSS中的-webkit-gradient背景漸變屬性實現，-webkit-gradient是background的一個屬性值，webkit核心的safari、 Chrome的Linear Gradients (線性漸

SVG實現漸變效果

技術標籤：htmlcssvuesvgjavascript 漸變方法 <linearGradient> 必須巢狀在 <defs> 的內部。<defs> 標籤是 definitions 的縮寫，它可對漸變，濾鏡等特殊元素效果進行定義。 例如：

C# 實現顏色漸變窗體控制元件詳細講解

1.建議設定窗體為雙緩衝繪圖，可有效避免介面刷時引起的閃爍 this.SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.OptimizedDoubleBuffer,true);

WPF 顏色漸變

技術標籤：WPF WPF 顏色漸變 一、按鈕顏色漸變（從上而下） <Button Height="100" Width="200">

設定邊框_css3如何設定邊框顏色漸變？css3邊框顏色漸變的兩種實現方法

技術標籤：設定邊框 很多時候在開發網頁的時候，可能因為一些原因需要為邊框設定顏色漸變，那麼該如何設定顏色邊框漸變？本篇文章將為大家介紹使用css3設定邊框顏色漸變的方法。