Openlayers对Feature填充渐变色

2020-03-14 23:52:56 阅读：1801 来源： 互联网

标签：canvas ol 渐变色 Feature pixelRatio Openlayers context var import

来源：https://openlayers.org/en/latest/examples/canvas-gradient-pattern.html

先看一下效果：

涉及两种填充方式 CanvasPattern 和 CanvasGradient。

国家名称数据加载自一个GeoJSON文件。有一个函数用来确定每个国家的填充风格。

The countries are loaded from a GeoJSON file. A style function determines for each country whether to use a fill with the CanvasGradient (rainbow colors) or a CanvasPattern (repeating stacked circles). Note: For seamless repeat patterns, image width and height of the pattern image must be a factor of two (2, 4, 8, ..., 512).

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Styling feature with CanvasGradient or CanvasPattern</title>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
      #map {
        /* Image craeted by tatyana, from https://sftextures.com/2014/10/22/blue-sky-with-blurred-white-clouds-seamless-textures/ */
        background-image: url(ULR太长，点顶部连接自行复制-_-||);
        background-repeat: repeat;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="index.js"></script>
  </body>
</html>

index.js

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import GeoJSON from 'ol/format/GeoJSON';
import {DEVICE_PIXEL_RATIO} from 'ol/has';
import VectorLayer from 'ol/layer/Vector';
import {fromLonLat} from 'ol/proj';
import VectorSource from 'ol/source/Vector';
import {Fill, Stroke, Style} from 'ol/style';

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

// Gradient and pattern are in canvas pixel space, so we adjust for the
// renderer's pixel ratio
var pixelRatio = DEVICE_PIXEL_RATIO;

// Generate a rainbow gradient
var gradient = (function() {
  var grad = context.createLinearGradient(0, 0, 512 * pixelRatio, 0);
  grad.addColorStop(0, 'red');
  grad.addColorStop(1 / 6, 'orange');
  grad.addColorStop(2 / 6, 'yellow');
  grad.addColorStop(3 / 6, 'green');
  grad.addColorStop(4 / 6, 'aqua');
  grad.addColorStop(5 / 6, 'blue');
  grad.addColorStop(1, 'purple');
  return grad;
})();

// Generate a canvasPattern with two circles on white background
var pattern = (function() {
  canvas.width = 8 * pixelRatio;
  canvas.height = 8 * pixelRatio;
  // white background
  context.fillStyle = 'white';
  context.fillRect(0, 0, canvas.width, canvas.height);
  // outer circle
  context.fillStyle = 'rgba(102, 0, 102, 0.5)';
  context.beginPath();
  context.arc(4 * pixelRatio, 4 * pixelRatio, 3 * pixelRatio, 0, 2 * Math.PI);
  context.fill();
  // inner circle
  context.fillStyle = 'rgb(55, 0, 170)';
  context.beginPath();
  context.arc(4 * pixelRatio, 4 * pixelRatio, 1.5 * pixelRatio, 0, 2 * Math.PI);
  context.fill();
  return context.createPattern(canvas, 'repeat');
}());

// Generate style for gradient or pattern fill
var fill = new Fill();
var style = new Style({
  fill: fill,
  stroke: new Stroke({
    color: '#333',
    width: 2
  })
});

/**
 * The styling function for the vector layer, will return an array of styles
 * which either contains the aboove gradient or pattern.
 *
 * @param {import("../src/ol/Feature.js").default} feature The feature to style.
 * @return {Style} The style to use for the feature.
 */
var getStackedStyle = function(feature) {
  var id = feature.getId();
  fill.setColor(id > 'J' ? gradient : pattern);
  return style;
};

// Create a vector layer that makes use of the style function above…
var vectorLayer = new VectorLayer({
  source: new VectorSource({
    url: 'data/geojson/countries.geojson',
    format: new GeoJSON()
  }),
  style: getStackedStyle
});

// … finally create a map with that layer.
var map = new Map({
  layers: [
    vectorLayer
  ],
  target: 'map',
  view: new View({
    center: fromLonLat([16, 48]),
    zoom: 3
  })
});

package.json

{
  "name": "canvas-gradient-pattern",
  "dependencies": {
    "ol": "6.2.1"
  },
  "devDependencies": {
    "parcel": "1.11.0"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --experimental-scope-hoisting --public-url . index.html"
  }
}

标签：canvas,ol,渐变色,Feature,pixelRatio,Openlayers,context,var,import
来源： https://www.cnblogs.com/144823836yj/p/12495278.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Openlayers对Feature填充渐变色