即时渲染 (地理)

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

使用即时渲染 API 来加载地理坐标的几何图形。

本示例使用"即时"渲染 API 来渲染地理坐标几何图形。即时渲染 API 可以使你绘制带有样式的几何图形，而不需要先将这些几何图形添加到图层汇中。使用 getVectorContext 方法从渲染事件中创建一个渲染上下文（context ）。使用此上下文（context）的 context.drawGeometry() 和 context.setStyle() 方法，可以在每一帧渲染绘制任何几何图形。本示例中使用 useGeographic 方法，使几何图形可以在地理坐标中加载。

main.js

import Stamen from 'ol/source/Stamen';
import TileLayer from 'ol/layer/Tile';
import {Circle, Fill, Style} from 'ol/style';
import {Map, View} from 'ol/index';
import {Point} from 'ol/geom';
import {getVectorContext} from 'ol/render';
import {upAndDown} from 'ol/easing';
import {useGeographic} from 'ol/proj';

useGeographic();

const layer = new TileLayer({
  source: new Stamen({
    layer: 'toner',
  }),
});

const map = new Map({
  layers: [layer],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

const image = new Circle({
  radius: 8,
  fill: new Fill({color: 'rgb(255, 153, 0)'}),
});

const style = new Style({
  image: image,
});

const n = 1000;
const geometries = new Array(n);

for (let i = 0; i < n; ++i) {
  const lon = 360 * Math.random() - 180;
  const lat = 180 * Math.random() - 90;
  geometries[i] = new Point([lon, lat]);
}

layer.on('postrender', function (event) {
  const vectorContext = getVectorContext(event);

  for (let i = 0; i < n; ++i) {
    const importance = upAndDown(Math.pow((n - i) / n, 0.15));
    if (importance < 0.1) {
      continue;
    }
    image.setOpacity(importance);
    image.setScale(importance);
    vectorContext.setStyle(style);
    vectorContext.drawGeometry(geometries[i]);
  }

  const lon = 360 * Math.random() - 180;
  const lat = 180 * Math.random() - 90;
  geometries.push(new Point([lon, lat]));
  geometries.shift();
  map.render();
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Immediate Rendering (Geographic)</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
    <script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
    <script type="module" src="main.js"></script>
  </body>
</html>

package.json

{
  "name": "immediate-geographic",
  "dependencies": {
    "ol": "7.0.0"
  },
  "devDependencies": {
    "vite": "^3.0.3",
    "@babel/core": "latest"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}

分享到QQ

分享到微博

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

发布评论

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

列表为空，暂无数据