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 }) }) ]; } }) );