如何在 openlayers 3 中的 SVG 中创建距离刻度环? [英] How do I create a distance scale ring in SVG in openlayers 3?

问题描述

我想在 openlayers 3 中的一个图层上绘制一个 SVG 距离环，以屏幕中心为中心.在屏幕坐标中绘制每个环.每个环之间的距离代表地图上的距离.每个环之间的距离随着地图的比例而变化.

I want to draw an SVG distance ring on one of the layers in openlayers 3, centered around the center of the screen.Draw each ring in screen coordinates. The distance between each ring represents the distance on the map. The distance between each ring varies as the map scales.

推荐答案

最好使用 OpenLayers 自己的样式功能来完成.例如，添加一个具有覆盖整个范围的特征的虚拟图层，可以将其样式设置为围绕地图中心的环.请注意，根据地图投影，环的大小(甚至形状)可能会随着真实地图比例尺的变化而变化，例如从格陵兰岛移至非洲时的 50 公里、200 公里、500 公里和 1000 公里.

It's probably best done using OpenLayers own styling capabilites. For example, adding a dummy layer with feature covering the whole extent which can be styled as rings around the map center. Note that depending on the map projection the ring sizes (and even shape) may change depending on location as the true map scale changes, such as these 50km, 200km, 500km and 1000km if moved from Greenland to Africa.

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>

这篇关于如何在 openlayers 3 中的 SVG 中创建距离刻度环?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！