OpenLayers学习笔记(七)— 类似比例尺的距离环(一)

openlayers 3 地图上创建一个距离环,始终以地图中心为中心,每个环之间的距离类似比例尺,随地图缩放而变化。

添加具有覆盖整个范围的特征的虚拟层,其可以被设置为围绕地图中心的环。注意,根据地图投影,当真实地图比例发生变化时,环尺寸(甚至形状)可能会根据位置而变化,例如,如果从格陵兰岛移动到非洲,这些距离将为50公里,200公里,500公里和1000公里。

GitHub:八至

作者:狐狸家的鱼

本文链接:类似比例尺功能的距离环

 

代码:

style:

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

.map {
  height: 100%;
  width: 100%;
}

html:

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.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({//1000km
                            geometry: ol.geom.Polygon.circular(sphere, center, 1000000, 128).transform('EPSG:4326', proj),
                            stroke: new ol.style.Stroke({
                                color: 'yellow',
                                width: 3
                            })
                        }),
                        new ol.style.Style({//500km
                            geometry: ol.geom.Polygon.circular(sphere, center, 500000, 128).transform('EPSG:4326', proj),
                            stroke: new ol.style.Stroke({
                                color: 'yellow',
                                width: 3
                            })
                        }),
                        new ol.style.Style({//200km
                            geometry: ol.geom.Polygon.circular(sphere, center, 200000, 128).transform('EPSG:4326', proj),
                            stroke: new ol.style.Stroke({
                                color: 'yellow',
                                width: 3
                            })
                        }),
                        new ol.style.Style({//50km
                            geometry: ol.geom.Polygon.circular(sphere, center, 50000, 128).transform('EPSG:4326', proj),
                            stroke: new ol.style.Stroke({
                                color: 'yellow',
                                width: 3
                            })
                        })
                    ];
                }
            })
        );

 

posted @ 2019-01-07 10:12  狐狸家的鱼  阅读(1148)  评论(2编辑  收藏  举报