时间戳

首页 > 解决方案 > 合并高级视图定位和视图动画功能

javascript - 合并高级视图定位和视图动画功能

问题描述

前段时间我在 gis.stackexchange 中发布了一个问题，但并没有为我解决太多问题。我现在要在这里试试。

我正在尝试合并显示为 OL 示例的两个函数，即Advanced View Positioning和View Animation。我可以使用动画方法成功更改视图，但无法像高级视图定位方法中那样修复缩放。我正在使用这些方法来更改 OL 中加载的一些栅格的视图。我的问题仅与缩放级别有关，如何使其适合我正在使用的栅格？我相信我需要获取栅格范围（已经这样做了）并以某种方式计算并链接到 flyTo() 函数中的缩放部分。

OL版本：5.3

我用于动画的功能：

//This is one of the locations I using with the View Animation method
var randomLocation = transform(getCenter([565280.904542, 6924581.621580, 565319.267400, 6924554.342636]), 'EPSG:31982', 'EPSG:3857');

function flyTo(location, done) {
  var duration = 3000;
  var zoom = view.getZoom();
  var parts = 2;
  var called = false;
  function callback(complete) {
    --parts;
    if (called) {
      return;
    }
    if (parts === 0 || !complete) {
      called = true;
      done(complete);
    }
  }
  view.animate({
    center: location,
    duration: duration
  }, callback);
  view.animate({
    zoom: zoom - 2,
    duration: duration / 2
  }, {
    zoom: zoom,
    duration: duration / 2
  }, callback);
}

一些相关但对我没有帮助的链接（其中大多数使用该fit(extent)功能。我尝试使用它但它取消了该animate()功能。在我链接用户@Mike 的 gis.stackexchange 问题中能够合并这些功能，但是它不适用于栅格范围）：

标签： javascriptopenlayers

解决方案

基于 2 月 15 日对原始问题的回答的第二次编辑的工作片段

  proj4.defs("EPSG:31982","+proj=utm +zone=22 +south +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
  if (ol.proj.proj4 && ol.proj.proj4.register) { ol.proj.proj4.register(proj4); }

  var view = new ol.View({
    center: [0, 0],
    zoom: 1
  });
  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: 'map',
    controls: ol.control.defaults({
      attributionOptions: {
        collapsible: false
      }
    }),
    view: view
  });

  var flytoparqueorion = document.getElementById('flytoparqueorion');
  flytoparqueorion.addEventListener('click', function() {

    var oldCenter = view.getCenter();
    var oldZoom = view.getZoom();
    var extent = ol.proj.transformExtent([565280.904542, 6924581.621580, 565319.267400, 6924554.342636], 'EPSG:31982', 'EPSG:3857');
    view.fit(extent, {padding: [170, 50, 30, 150], constrainResolution: false});
    var newCenter = view.getCenter();
    var newZoom = view.getZoom();
    view.setCenter(oldCenter);
    view.setZoom(oldZoom);

    flightZoom = Math.min(oldZoom, newZoom) - 2;
    zoomUp = oldZoom - flightZoom;
    zoomDown = newZoom - flightZoom;

    var duration = 2000;
    var parts = 2;
    var called = false;
    function callback(complete) {
      --parts;
      if (called) {
        return;
      }
      if (parts === 0 || !complete) {
        called = true;
        //done(complete);
      }
    }
    view.animate({
      center: newCenter,
      duration: duration
    }, callback);
    view.animate({
      zoom: flightZoom,
      duration: duration * zoomUp / (zoomUp + zoomDown)
    }, {
      zoom: newZoom,
      duration: duration * zoomDown / (zoomUp + zoomDown)
    }, callback);

  }, false);
  .mapcontainer {
    position: relative;
    margin-bottom: 20px;
  }
  .map {
    width: 1000px;
    height: 600px;
  }
  div.ol-zoom {
    top: 178px;
    left: 158px;
  }
  div.ol-rotate {
    top: 178px;
    right: 58px;
  }
  .map div.ol-attribution {
    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);
  }
  .center {
    position: absolute;
    border: solid 1px black;
    top: 490px;
    left: 560px;
    width: 20px;
    height: 20px;
  }
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<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 class="center"></div>
</div>
<button id="flytoparqueorion">Fly to Parque Orion</button>

推荐阅读