一、渲染GeoJSON
在進入編輯之前，我們將看一下使用矢量源和圖層進行基本要素渲染。Workshop在 data? 目錄中包含一個 countries.json? GeoJSON文件。我們首先加載該數據并將其渲染在地圖上。
首先，編輯 index.html? 以便向地圖添加深色背景：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>OpenLayers</title><style>@import "node_modules/ol/ol.css";</style><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><script src="./main.js" type="module"></script></body>
</html>?
?
現在我們在mian.js文件中導入處理矢量數據的三個重要要素：
- ‘ol/format/GeoJSON’：用于讀取和寫入序列化數據的格式（本例中為 GeoJSON）
- ‘ol/source/Vector’：用于獲取數據和管理要素空間索引的矢量源
- ‘ol/layer/Vector’：用于在地圖上渲染要素的矢量圖層
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:5173/ 上看到帶有國家邊界的地圖。
?
由于我們將多次重新加載頁面，因此如果地圖重新加載時保留位置，那就太好了。我們可以引入 Link? 交互來完成這項工作。
i/*** 導入Link交互功能。* 該交互功能允許用戶在地圖上創建一個鏈接，將地圖上的兩個位置連接起來。* * 參數無。* * 返回值無，僅為導入模塊。*/
import Link from 'ol/interaction/Link';接下來我們需要將地圖分配給一個變量（名為 map? ），以便我們可以向其中添加交互：
const map = new Map({
?
?
現在我們可以向地圖添加新的鏈接交互：
/*** 向地圖中添加一個交互操作。* 這里的交互操作是指通過`Link`類創建的一個新的交互實例，它允許用戶與地圖進行某種形式的交互。* * new Link() - 創建的一個新的Link交互實例。* 參數通過`new Link()`的方式創建，并直接傳遞給`addInteraction`方法進行添加。* * 該方法沒有返回值，其主要作用是將新的交互實例添加到地圖中，以增強地圖的可用性和用戶體驗。*/
map.addInteraction(new Link());
現在您應該看到頁面重新加載時保持地圖視圖穩定。并且后退按鈕的功能與您預期的一樣。
?
