塗鴉

官網範例：https://openlayers.org/en/latest/examples/draw-features.html
在openlayers中有很多我稱作【互動】的功能可以使用，這些互動功能是【隸屬】於map下面的，當我們要使用的時候要在地圖上面【新增互動】或是【移除互動】，如此一來便可以依照需求來控制塗鴉的時機。

特別要注意的點是，我們需要把source資料獨立出來，因為layer與interaction都需要使用到(ol.interaction.Draw)，當我們有很多互動元素的話，就需要好好考慮變數的問題囉。

JS

const map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: "https://wmts.nlsc.gov.tw/wmts/EMAP5/default/EPSG:3857/{z}/{y}/{x}.png",
        crossOrigin: "anonymous",
        minZoom: 6,
        maxZoom: 20,
      }),
    }),
  ],
  target: "map",
  view: new ol.View({
    projection: "EPSG:3857",
    center: ol.proj.fromLonLat([120.846642, 23.488793]),
    zoom: 7.5,
    maxZoom: 20,
    minZoom: 5,
    enableRotation: false,
  }),
  controls: [],
});

// 1.建立新增features(點)圖層的資源
const drawFeaturesSource = new ol.source.Vector();

// 2.建立新增features(點)圖層的layer
const drawFeaturesLayer = new ol.layer.Vector({
  source: drawFeaturesSource,
});

// 3.加入此layer到map
map.addLayer(drawFeaturesLayer);

// 4.增加Interaction
let draw; // 全域變數，後續我們可以控制他刪除Interaction
function addInteraction() {
  // 4-1.建立draw的互動
  draw = new ol.interaction.Draw({
    source: drawFeaturesSource,
    type: 'Point', // 這些是可以使用的type：Point, LineString, Polygon, Circle
  });

  // 4-2.加入此互動到map中, 如果不想要的話就從map移除變數draw的interaction
  map.addInteraction(draw);
}

// 5.跑這個function
addInteraction();

參考

https://github.com/weijung0923/learning-openlayers-micromastery/tree/day16