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