文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

Sea Level (with WebGL)

发布于 2022-11-30 23:36:05 字数 6715 浏览 0 评论 0 收藏 0

Render sea level at different elevations

The style property of a WebGL tile layer accepts a color expression that can be used to modify pixel values before rendering. Here, RGB tiles representing elevation data are loaded and rendered so that values at or below sea level are blue, and values above sea level are transparent. The color expression operates on normalized pixel values ranging from 0 to 1. The band operator is used to select normalized values from a single band.

After converting the normalized RGB values to elevation, the case expression is used to pick colors to apply at a given elevation. Instead of using constant numeric values as the stops in the colors array, the var operator allows you to use a value that can be modified by your application. When the user drags the sea level slider, the layer.updateStyleVariables() function is called to update the level style variable with the value from the slider.

main.js

import 'ol/ol.css';
import Map from 'ol/Map';
import TileLayer from 'ol/layer/WebGLTile';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
import {fromLonLat} from 'ol/proj';

const key = 'Get your own API key at https://www.maptiler.com/cloud/';
const attributions =
  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';

// band math operates on normalized values from 0-1
// so we scale by 255 to align with the elevation formula
// from https://cloud.maptiler.com/tiles/terrain-rgb/
const elevation = [
  '+',
  -10000,
  [
    '*',
    0.1 * 255,
    [
      '+',
      ['*', 256 * 256, ['band', 1]],
      ['+', ['*', 256, ['band', 2]], ['band', 3]],
    ],
  ],
];

const layer = new TileLayer({
  opacity: 0.6,
  source: new XYZ({
    url:
      'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
    maxZoom: 10,
    tileSize: 512,
    crossOrigin: 'anonymous',
  }),
  style: {
    variables: {
      level: 0,
    },
    color: [
      'case',
      // use the `level` style variable to determine the color
      ['<=', elevation, ['var', 'level']],
      [139, 212, 255, 1],
      [139, 212, 255, 0],
    ],
  },
});

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new XYZ({
        url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
        attributions: attributions,
        crossOrigin: 'anonymous',
        tileSize: 512,
      }),
    }),
    layer,
  ],
  view: new View({
    center: fromLonLat([-122.3267, 37.8377]),
    zoom: 11,
  }),
});

const control = document.getElementById('level');
const output = document.getElementById('output');
const listener = function () {
  output.innerText = control.value;
  layer.updateStyleVariables({level: parseFloat(control.value)});
};
control.addEventListener('input', listener);
control.addEventListener('change', listener);
output.innerText = control.value;

const locations = document.getElementsByClassName('location');
for (let i = 0, ii = locations.length; i < ii; ++i) {
  locations[i].addEventListener('click', relocate);
}

function relocate(event) {
  const data = event.target.dataset;
  const view = map.getView();
  view.setCenter(fromLonLat(data.center.split(',').map(Number)));
  view.setZoom(Number(data.zoom));
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Sea Level (with WebGL)</title>
    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
    <script src="https://unpkg.com/elm-pep"></script>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder,Number.isInteger"></script>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
      #level {
        display: inline-block;
        width: 150px;
        vertical-align: text-bottom;
      }

      a.location {
        cursor: pointer;
      }

      #map {
        background: #8bd4ff;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <label>
      Sea level
      <input id="level" type="range" min="0" max="100" value="1"/>
      +<span id="output"></span> m
    </label>
    <br>
    Go to
    <a class="location" data-center="-122.3267,37.8377" data-zoom="11">San Francisco</a>,
    <a class="location" data-center="-73.9338,40.6861" data-zoom="11">New York</a>,
    <a class="location" data-center="72.9481,18.9929" data-zoom="11">Mumbai</a>, or
    <a class="location" data-center="120.831,31.160" data-zoom="9">Shanghai</a>
    <script src="main.js"></script>
  </body>
</html>

package.json

{
  "name": "webgl-sea-level",
  "dependencies": {
    "ol": "7.1.0"
  },
  "devDependencies": {
    "parcel": "^2.0.0-beta.1"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --public-url . index.html"
  }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据