Как создать кольцо шкалы расстояний в SVG в openlayers 3? - PullRequest
Новая
       5

Как создать кольцо шкалы расстояний в SVG в openlayers 3?

0 голосов
/ 02 января 2019

Я хочу нарисовать дистанционное кольцо SVG на одном из слоев в открытых слоях 3, центрированных вокруг центра экрана. Нарисуйте каждое кольцо в экранных координатах. Расстояние между каждым кольцом представляет собой расстояние на карте. Расстояние между каждым кольцом зависит от масштаба карты.

1 Ответ

0 голосов
/ 03 января 2019

Вероятно, лучше всего это сделать с помощью собственных возможностей OpenLayers.Например, добавление фиктивного слоя с элементом, охватывающим весь экстент, который можно стилизовать как кольца вокруг центра карты.Обратите внимание, что в зависимости от проекции карты размеры колец (и даже их форма) могут изменяться в зависимости от местоположения при изменении истинного масштаба карты, например, 50 км, 200 км, 500 км и 1000 км при перемещении из Гренландии в Африку.

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM(),
        })
    ],
    target: 'map',
    view: new ol.View()
});

var proj = map.getView().getProjection();
map.getView().setCenter(ol.proj.transform([-38, 75.9], 'EPSG:4326', proj));
map.getView().setZoom(2);

map.addLayer(
    new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [ new ol.Feature(new ol.geom.Polygon.fromExtent(proj.getExtent())) ]
        }),
        style: function(feature) {
            var center = ol.proj.transform(map.getView().getCenter(), proj, 'EPSG:4326');
            var sphere = new ol.Sphere(6371008.8);
            return [
                new ol.style.Style({
                    geometry: ol.geom.Polygon.circular(sphere, center, 1000000, 128).transform('EPSG:4326', proj),
                    stroke: new ol.style.Stroke({
                        color: 'green',
                        width: 4
                    })
                }),
                new ol.style.Style({
                    geometry: ol.geom.Polygon.circular(sphere, center, 500000, 128).transform('EPSG:4326', proj),
                    stroke: new ol.style.Stroke({
                        color: 'blue',
                        width: 4
                    })
                }),
                new ol.style.Style({
                    geometry: ol.geom.Polygon.circular(sphere, center, 200000, 128).transform('EPSG:4326', proj),
                    stroke: new ol.style.Stroke({
                        color: 'red',
                        width: 4
                    })
                }),
                new ol.style.Style({
                    geometry: ol.geom.Polygon.circular(sphere, center, 50000, 128).transform('EPSG:4326', proj),
                    stroke: new ol.style.Stroke({
                        color: 'black',
                        width: 4
                    })
                 })
            ];
        }
    })
);
html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 100%;
  width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/3.4.0/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/3.4.0/ol.js"></script>
<div id="map" class="map"></div>
...