最近正在学习gis,openlayer学习记点笔记。
0penLayer基本概念翻译笔记
MAP
openlayer组件核心是map,它被渲染到一个目标容器 target (e.g. web页面上一个包含map的div元素)。
所有的map参数可以在构建地图时配置,也能使用setter方法设置,e.g. setTarget()。
<div id="map" style="width: 100%, height: 400px"></div>
import Map from 'ol/Map';
var map = new Map({target: 'map'});
View
map不负责地图中心,缩放,投影的功能,相对的是使用View控制,使用map.setView()
import View from 'ol/View';
map.setView(new View({
center: [0, 0],
zoom: 2
}));
View还有一个projection(投影)属性,它决定了以center为中心的坐标系统和地图映射分辨率单位。如果没有指定该属性
(像上面的代码段),则会默认为球墨卡托坐标系(EPSG:3857),以米为单位。
zoom选项用来指定地图分辨率非常方便。可缩放等级由maxZoom(默认为28),zoomFactor(默认为2),和maxResolution(默认由投影有效范围铺满一个256x256的一个像素瓦片的方法计算获得)。起始缩放等级为0,分辨率为每像素的maxResolution单位,后续的缩放级别计算方法是将前一个缩放级别的分辨率除以zoomFactor,直到缩放级别达到maxZoom。
Source
为了获得layer的远程数据,OpenLayer使用source子类,它们可用于OpenStreetMap或Bing等免费和商业地图瓦片服务,也可用于WMS或WMTS等OGC源,以及GeoJSON或KML等格式的矢量数据。
i
mport OSM from 'ol/source/OSM';
var osmSource = OSM();
Layer
layer是对来自于source的数据的虚拟表示,OpenLayer有4种类型的图层:
ol.layer.Tile(瓦片图层):呈现以网格形式提供瓦片图像的源文件,网格由缩放级别组织,以获得特定的分辨率。
ol.layer.Image(图像图层):呈现以任意大小和分辨率提供地图图像的源。
ol.layer.Vector(矢量图层):呈现矢量数据在客户端。
ol.layer.VerctorTile(矢量瓦片图层):呈现以矢量瓦片格式提供的数据。
在map上添加layer用map.addLayer()
import TileLayer from 'ol/layer/Tile';
var osmLayer = new TileLayer({source: osmSource});
map.addLayer(osmLayer);
整体结合
上述代码段可以结合在一块,形成一个script用于渲染一个有单个瓦片图层的地图
import Map from 'ol/Map';
import View from 'ol/View';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/source/Tile';
new Map({
layers: [
new TileLayer({source: new OSM()})
],
view: new View({
center: [0, 0],
zoom: 2
}),
target: 'map'
});