Rendering GeoJSON
渲染GeoJson数据,以工程文件夹下data/countries.json为例,来导入此GeoJson数据并渲染。
首先,编辑index.xml
<!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;
background-color: #04041b;
}
</style>
</head>
<body>
<div id="map-container"></div>
</body>
</html>
下面开始导入矢量数据的三个重要元素:
—format 读取和渲染的格式
—vector source 导入数据源和管理空间要素
—vector layer 用于渲染要素的图层
更新main.js来载入和渲染本地的GeoJSON几何要素:
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
new Map({
target: 'map-container',
layers: [
new VectorLayer({
source: new VectorSource({
format: new GeoJSON(),
url: './data/countries.json'
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
在
http://localhost:3000/显示
如下:
通常,我们会多次加载地图,如何实现加载地图时,能够显示上次的位置。需要引入ol-hashed包来实现。(同样这个包一般已经安装,如果没安装,使用以下代码)
npm install ol-hashed@beta
在main.js中导入这个包
import sync from 'ol-hashed';
此时我们调用函数加载地图时,就会加载上次结束时所在位置
sync(map);