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

View Padding

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

This example demonstrates the use of the view's padding option.

This example demonstrates how a map's view can be configured to accommodate for viewport space covered by other elements. If the map viewport is partially covered with other content (overlays) along its edges, the padding option allows to shift the center of the viewport away from that content. The shifted viewport center will also be the anchor for zooming in and out with the Zoom controls, and for rotating.

Use Alt+Shift+Drag to rotate the map.

main.js

import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import View from 'ol/View';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
import {OSM, Vector as VectorSource} from 'ol/source';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {fromLonLat} from 'ol/proj';

/** @type {VectorSource<import("../src/ol/geom/SimpleGeometry.js").default>} */
const source = new VectorSource({
  url: 'data/geojson/switzerland.geojson',
  format: new GeoJSON(),
});
const style = new Style({
  fill: new Fill({
    color: 'rgba(255, 255, 255, 0.6)',
  }),
  stroke: new Stroke({
    color: '#319FD3',
    width: 1,
  }),
  image: new CircleStyle({
    radius: 5,
    fill: new Fill({
      color: 'rgba(255, 255, 255, 0.6)',
    }),
    stroke: new Stroke({
      color: '#319FD3',
      width: 1,
    }),
  }),
});
const vectorLayer = new VectorLayer({
  source: source,
  style: style,
});
const view = new View({
  center: fromLonLat([6.6339863, 46.5193823]),
  padding: [170, 50, 30, 150],
  zoom: 6,
});
const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
    vectorLayer,
  ],
  target: 'map',
  view: view,
});

vectorLayer.getSource().on('featuresloadend', function () {
  const zoomtoswitzerland = document.getElementById('zoomtoswitzerland');
  zoomtoswitzerland.addEventListener(
    'click',
    function () {
      const feature = source.getFeatures()[0];
      const polygon = feature.getGeometry();
      view.fit(polygon);
    },
    false
  );

  const centerlausanne = document.getElementById('centerlausanne');
  centerlausanne.addEventListener(
    'click',
    function () {
      const feature = source.getFeatures()[1];
      const point = feature.getGeometry();
      view.setCenter(point.getCoordinates());
    },
    false
  );
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>View Padding</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;
      }
      .mapcontainer {
        position: relative;
        margin-bottom: 20px;
      }
      .map {
        width: 1000px;
        height: 600px;
      }
      .map .ol-zoom {
        top: 178px;
        left: 158px;
      }
      .map .ol-rotate {
        top: 178px;
        right: 58px;
      }
      .map .ol-attribution,
      .map .ol-attribution.ol-uncollapsible {
        bottom: 30px;
        right: 50px;
      }
      .padding-top {
        position: absolute;
        top: 0;
        left: 0px;
        width: 1000px;
        height: 170px;
        background: rgba(255, 255, 255, 0.5);
      }
      .padding-left {
        position: absolute;
        top: 170px;
        left: 0;
        width: 150px;
        height: 400px;
        background: rgba(255, 255, 255, 0.5);
      }
      .padding-right {
        position: absolute;
        top: 170px;
        left: 950px;
        width: 50px;
        height: 400px;
        background: rgba(255, 255, 255, 0.5);
      }
      .padding-bottom {
        position: absolute;
        top: 570px;
        left: 0px;
        width: 1000px;
        height: 30px;
        background: rgba(255, 255, 255, 0.5);
      }

    </style>
  </head>
  <body>
    <div class="mapcontainer">
      <div id="map" class="map"></div>
      <div class="padding-top"></div>
      <div class="padding-left"></div>
      <div class="padding-right"></div>
      <div class="padding-bottom"></div>
    </div>
    <button id="zoomtoswitzerland">Zoom to Switzerland</button>
    <button id="centerlausanne">Center on Lausanne</button>
    <script src="main.js"></script>
  </body>
</html>

package.json

{
  "name": "view-padding",
  "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 技术交流群。

发布评论

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

列表为空，暂无数据