做個標示

現在來開始地圖常見的標示了。同樣的，先給個地圖：

在 OpenLayers 裡面要做標示的話，就要做兩個圖層：一個是底圖的圖層、另一個是標示的圖層。你可以想成在現實的地圖要寫指示：我們會在地圖上面放一張半透明紙，接著在那張半透明紙上寫東西。這樣把標示與底圖分離，會方便我們更改標示、也方便我們更換風格不同的底圖。

這就是為什麼在引用地圖的 new ol.Map 我要這樣寫：layers: [osm_layer , marker_layer],：osm_layer 放的是 OSM 圖層，這裡不多談。這裡的重頭戲是 marker_layer 圖層。

var marker_layer = new ol.layer.Vector
({
    source: new ol.source.Vector
    ({
        features: [london , new_delhi , tokyo]
    })
});

因為標示是點，要用向量資料讀取它，所以我們會用 ol.layer.Vector，用向量的形式載入標示圖層。接著在 source 裡面，我們加了三個城市的標記：倫敦、新德里、還有東京。

先從倫敦來看。

var london = new ol.Feature
({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.12755, 51.507222]))
});
london.setStyle(new ol.style.Style
({
    image: new ol.style.Icon
    (({
      color: '#4271AE',
      crossOrigin: 'anonymous',
      src: 'https://openlayers.org/en/v4.2.0/examples/data/dot.png'
    }))
}));

我們需要倫敦的向量標示，所以首先要有 new ol.Feature 物件，並在裡面增加 ol.geom.Point 這個物件。接著，告訴這個物件倫敦的座標。

標記資訊完成後，就要設定它的樣式了。我們在這裡指定了顏色、CORS 選項、還有圖片來源。

把地圖移到印度的新德里，再看看原始碼，有什麼東西改變了呢？

如果想要換成其他圖片呢？去修改 ol.style.Icon 的 src 就是了。你可以把地圖移到日本的東京看看。

不過這東京都標誌直接放下去會太大，所以必須要修改 scale。

標示的修改可以參考 API。