openlayers 5地图(图像，标记)转换rotateX [英] openlayers 5 map (images, markers) transform rotateX

问题描述

是否可以旋转X度Openlayers地图:图像和标记?

Is it possible to rotateX degrees Openlayers map: images and markers ?

想法示例: https://haldus.projectpartner.ee/files/openlayers-transform-example.png

推荐答案

ol.style.Icon和ol.style.RegularShape具有rotation选项和setRotation()方法.角度必须以弧度(度* Math.PI/180)指定.这是跟随线串角度的图标示例

ol.style.Icon and ol.style.RegularShape have a rotation option and a setRotation() method. The angle must be specified in radians ( degrees * Math.PI / 180 ) Here's an example of an icon following the angle of a linestring

var blue = new ol.style.Style({
  stroke: new ol.style.Stroke({
    width: 4,
    color: 'blue'
  })
});

var red = new ol.style.Style({
  stroke: new ol.style.Stroke({
    width: 4,
    color: 'red'
  })
});

var icon = new ol.style.Style({
  image: new ol.style.Icon({
    src: 'https://cdn1.iconfinder.com/data/icons/basic-ui-elements-color-round/3/19-32.png',
  })
});

var style = function(feature) {
  var coords = feature.getGeometry().getCoordinates().slice(-2);
  icon.setGeometry(new ol.geom.Point(coords[1]));
  icon.getImage().setRotation(Math.atan2(coords[1][0]-coords[0][0], coords[1][1]-coords[0][1]));
  return [red, icon];
}

var raster = new ol.layer.Tile({
  source:  new ol.source.OSM()
});

var vector = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: blue
});

var map = new ol.Map({
  layers: [raster, vector],
  target: 'map',
  view: new ol.View()
});

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://raw.githubusercontent.com/IvanSanchez/Leaflet.Polyline.SnakeAnim/master/route.js');
xhr.onload = function() {
  // read the route coordinates
  eval(xhr.responseText);
  // reverse the route
  var geom = new ol.geom.LineString(route.reverse());
  // change Lat/Lon to Lon/Lat
  geom.applyTransform(function(c){ return c.reverse(); });
  geom.transform('EPSG:4326', map.getView().getProjection());
  vector.getSource().addFeature(new ol.Feature(geom));  

  map.getView().fit(geom, { size: map.getSize() });
  var snake = new ol.Feature();
  snake.setStyle(style);
  vector.getSource().addFeature(snake);
  animate_line(snake, geom, 30000);
}
xhr.send();

function animate_line(feature, linestring, duration) {

  var length = linestring.getLength();
  var length_shown = 0;

  var coords = linestring.getCoordinates();
  var coords_shown = [coords[0], coords[0]];
  var geom_shown = new ol.geom.LineString(coords_shown);
  feature.setGeometry(geom_shown);

  var coordcount = 1;
  var start = new Date().getTime();
  var listenerKey = map.on('postcompose', animate);

  function animate() {

    var elapsed = new Date().getTime() - start;
    var toAdd = length*elapsed/duration - length_shown;
    var point = linestring.getCoordinateAt(Math.min(elapsed/duration, 1));

    // restart from last intermediate point and remove it
    var newPart = new ol.geom.LineString(coords_shown.slice(-1));
    coords_shown.pop();

    // add vertices until required length exceeded
    while (coordcount < coords.length && newPart.getLength() <= toAdd) {
      newPart.appendCoordinate(coords[coordcount]);
      coords_shown.push(coords[coordcount]);
      coordcount++;
    }

    // replace overrun vertex with intermediate point
    coords_shown.pop();
    coordcount--;
    coords_shown.push(point);

    geom_shown.setCoordinates(coords_shown);
    length_shown += toAdd;

    if (elapsed > duration) {
      ol.Observable.unByKey(listenerKey);
    }
    map.render();

  }

}

html, body, .map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>

这篇关于openlayers 5地图(图像，标记)转换rotateX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！