最近准备从头开始好好学习下Openlayers，于是找到了官方的Openlayers指南，打算从头开始来学习一下，加深对Openlayers的理解，特意使用写博客的方式来记录下。
1.介绍
OpenLayers 是一个专为Web GIS客户端开发提供的JavaScript类库包，用于实现标准格式发布的地图数据访问。OpenLayers 主要包括以下几种图层：
OpenLayers图层
- Tile layers ：切片图层，用于加载切片数据。切片是指利用网格将一幅地图切成大小相等的小正方形。切片尺寸一般是
256x256或者是512x512。- Image layers ：图片图层，主要是指服务器端渲染的图像，可能是已经渲染好的图像，或者是每一次请求，都根据请求内容定制化地生成一幅图片，该图层类型支持任意的范围和分辨率。
- Vector layers ：矢量图层，是指在客户端渲染的图层类型，服务器返回的数据或者文件会通过 OpenLayers 进行渲染，得到相应的矢量图层。
- Vector tile：矢量切片图层，和栅格切片一样的思路，以金字塔的方式切割矢量数据，只不过切割的不是栅格图片，而是矢量数据的描述性文件，目前矢量切片主要有以下三种格式：
GeoJSON，TopoJSON和MapbBox Vector Tile(MVT)。
2.创建html标签
加载地图需要借助于div元素作为地图的容器，首先创建一个标准的HTML页面，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenLayers</title>
<style>
html, body, #map-container {
margin: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="map-container"></div>
</body>
</html>
3.加载地图
创建完html标签后，就需要引入js文件了，这里使用npm进行引入，执行以下命令来导入Openlayers的库。
npm install ol
然后在创建一个main.js文件，在添加如下代码：
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';
import {fromLonLat} from 'ol/proj';
new Map({
target: 'map-container',
layers: [
new TileLayer({
source: new XYZSource({
url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
})
})
],
view: new View({
center: fromLonLat([0, 0]),
zoom: 2
})
});
在引入文件的时候，不要忘记导入ol/ol.css。导入完所有的文件后，需要进行如下步骤来创建地图。
- 使用
new Map来创建一个map对象。- 设置
target，为地图容器div元素的id。- 设置
layers，为地图添加图层。- 设置
view，使用new View创建一个地图视图，并可以默认指定center,zoom等信息。
创建后的效果如下所示：
map.png
个人博客
网友评论