欧美free性护士vide0shd,老熟女,一区二区三区,久久久久夜夜夜精品国产,久久久久久综合网天天,欧美成人护士h版

目錄

maptalks繪制面的漸變填充圖形樣式

在MapTalks地圖庫中,要為面(Polygon)繪制漸變填充圖形樣式,可以通過定義`FillStyle`中的`gradient`屬性來實現(xiàn)。以下是一個簡單的示例說明如何設(shè)置漸變填充樣式:

// 引入maptalks庫
import * as maptalks from 'maptalks';
// 創(chuàng)建地圖實例
var map = new maptalks.Map('map', {
    center: [116.39, 39.9],
    zoom: 10,
    baseLayer: new maptalks.TileLayer('base', {
        urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        subdomains: ['a', 'b', 'c']
    })
});
// 定義一個帶有漸變填充樣式的面
var gradientPolygon = new maptalks.Polygon([
    // 維度經(jīng)度坐標(biāo)數(shù)組,例如:
    [
        [116.39, 39.9],
        [116.4, 39.91],
        [116.395, 39.915],
        [116.39, 39.9]
    ]
], {
    // 漸變填充樣式
    fillGradient: {
        type: 'radial', // 漸變類型,可以是'radial'(徑向漸變)或'linear'(線性漸變)
        stops: [
            { offset: 0, color: '#FFA07A' }, // 漸變起點顏色
            { offset: 1, color: '#ADD8E6' }  // 漸變終點顏色
        ],
        radialOrigin: { x: 0.5, y: 0.5 }, // 徑向漸變中心點(僅當(dāng)type為radial時有效)
        coordinate: [0, 0] // 漸變坐標(biāo)參考點,對于面來說通常是其地理中心坐標(biāo)
    },
    shadowBlur: 0,
    lineWidth: 1,
    lineColor: '#fff'
});
// 將面添加到地圖上的矢量層
var vectorLayer = new maptalks.VectorLayer('vector').addTo(map);
vectorLayer.addGeometry(gradientPolygon);

請注意,上述代碼僅為示例,實際應(yīng)用中請確保你正確設(shè)置了地圖的中心點、縮放級別以及面的坐標(biāo)數(shù)組。同時,MapTalks庫支持多種復(fù)雜的漸變配置選項,可以根據(jù)需求調(diào)整`fillGradient`對象中的屬性來實現(xiàn)不同的漸變效果。在上述代碼中,我們創(chuàng)建了一個從`#FFA07A`(淺鮭魚色)漸變到`#ADD8E6`(淺藍色)的徑向漸變填充面。如果你想要線性漸變,只需更改`type`屬性并調(diào)整相應(yīng)的漸變方向參數(shù)即可。

<!DOCTYPE html><html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>圖形樣式 - 面的漸變填充</title>
  <style type="text/css">
    html,body{margin:0px;height:100%;width:100%}
    .container{width:100%;height:100%}
  </style>
  <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
  <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
  <body>

    <div id="map" class="container"></div>
    <script>
      var c = new maptalks.Coordinate(-0.113049,51.49856);
      var map = new maptalks.Map('map', {
        center: c.sub(0.006, 0.002),
        zoom: 14,
        baseLayer: new maptalks.TileLayer('base', {
          'urlTemplate' : 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
          'subdomains'  : ['a','b','c','d']
        })
      });

      var layer = new maptalks.VectorLayer('vector').addTo(map);

      var rect1 = new maptalks.Rectangle(
        c.sub(0.03, 0), 600, 600,
        {
          symbol:{
            'polygonFill' : {
              'type' : 'linear',
              'colorStops' : [
                [0.00, '#fff'],
                [0.50, '#fff27e'],
                [1, '#f87e4b']
              ]
            },
            'polygonOpacity' : 1,
            'lineColor' : '#fff'
          }
        }
      ).addTo(layer);

      var rect2 = new maptalks.Rectangle(
        c.sub(0.02, 0), 600, 600,
        {
          symbol:{
            'polygonFill' : {
              'type' : 'linear',
              'places' : [0, 0, 1, 1],
              'colorStops' : [
                [0.00, '#fff'],
                [0.50, '#fff27e'],
                [1, '#f87e4b']
              ]
            },
            'polygonOpacity' : 1,
            'lineColor' : '#fff'
          }
        }
      ).addTo(layer);

      var rect3 = new maptalks.Rectangle(
        c, 600, 600,
        {
          symbol:{
            'polygonFill' : {
              'type' : 'radial',
              'colorStops' : [
                [0.00, 'rgba(216,115,149,0)'],
                [0.50, 'rgba(216,115,149,1)'],
                [1.00, 'rgba(216,115,149,1)']
              ]
            },
            'polygonOpacity' : 1,
            'lineWidth' : 0
          }
        }
      ).addTo(layer);

      var rect4 = new maptalks.Rectangle(
        c.add(0.01, 0), 600, 600,
        {
          symbol:{
            'polygonFill' : {
              'type' : 'radial',
              'places' : [0.5, 0.5, 1, 1, 1, 0.1],
              'colorStops' : [
                        [0.00, '#1bbc9b'],
                        [0.55, 'rgb(135,196,240)'],
                        [1.00, '#34495e']
              ]
            },
            'polygonOpacity' : 1,
            'lineColor' : '#fff'
          }
        }).addTo(layer);

    </script>
  </body></html>

評論可見,查看隱藏內(nèi)容

本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理,出于傳遞更多信息之目的,不代表金鑰匙跨境贊同其觀點和立場。

轉(zhuǎn)載請注明,如有侵權(quán),聯(lián)系刪除。

本文鏈接:http://gantiao.com.cn/post/18683183.html

發(fā)布評論

您暫未設(shè)置收款碼

請在主題配置——文章設(shè)置里上傳

掃描二維碼手機訪問

文章目錄