---
title : 地理資訊系統開發課程Week6
tags: Openlayers
creat-date: 2022-10-19
update_date : 2022-10-19
---
---
## 地理資訊系統開發課程Week6
---
### 一、 圖形繪製基礎
#### 1. Main.js 加入建立OSM地圖為raster圖層的來源

//建立OSM地圖為raster圖層的來源
const rasterSource = new ol.source.OSM();
//建立raster圖層
const raster = new ol.layer.Tile({
  source: rasterSource,
});


#### 2. Main.js 建立地圖時 layers更改為放置raster圖層

//建立地圖
var map = new ol.Map({
  controls: defaultControls().extend([zoomSliderControl]),
  target: 'map',
  layers: [raster],
  view: view,
});

如下圖，左方紅框內容改為右方紅框處

#### 3. Main.js 加入圖形樣式相關的套件變數

const Style = ol.style.Style;  //取用style套件Style類別
const CircleStyle = ol.style.Circle;  //取用style套件Circle類別
const Fill = ol.style.Fill;  //取用style套件Fill類別
const Stroke = ol.style.Stroke;  //取用style套件Stroke類別


#### 4. Main.js 加入向量圖層的來源、圖層的樣式設定 (在rasterSource下方)
####### 網頁色碼 https://zh.wikipedia.org/zh-tw/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2

//建立vectorSource為vector圖層的來源
const vectorSource = new ol.source.Vector();

//建立vectorStyle為vector圖層的樣式設定
const vectorStyle = new Style({
  fill: new Fill({  //多邊形的填色
    color: 'rgba(255, 255, 255, 0.3)',    //rgba(red,green,blue,alpha)
  }),
  stroke: new Stroke({  //代表線段的樣式
    color: '#ffcc33',
    width: 2,
  }),
  image: new CircleStyle({  //點位的圓
    radius: 7,  //半徑
    fill: new Fill({  //圓的填色
      color: '#ffcc33',
    }),
  }),
})


#### 5. Main.js 建立Vector圖層

//建立Vector圖層
const vector = new ol.layer.Vector({
  source: vectorSource,
  style: vectorStyle,
});


#### 6. Main.js 調整建立地圖時 layers再加入vector

#### 7.Main.js 加入繪圖套件變數

const Draw = ol.interaction.Draw; //取用繪圖套件


#### 8.Main.js 在最下方加入 draw變數及addInteraction()函式

//宣告一個draw變數給繪圖用
let draw;

//建立addInteraction()函式，加入到地圖交互作用功能(手動繪圖操作)
function addInteraction() {
  draw = new Draw({
    source: vectorSource,
    type: 'LineString',
    style: vectorStyle,
  });
  map.addInteraction(draw);
}

//呼叫addInteraction()函式
addInteraction();


#### 9.Main.js 建立drawingStyle為繪圖操作時的樣式設定

//建立drawingStyle為繪圖操作時的樣式設定 (採半透明色)
const drawingStyle = new Style({
  fill: new Fill({  //多邊形的填色
    color: 'rgba(255, 255, 255, 0.2)',
  }),
  stroke: new Stroke({  //代表線段的樣式
    color: 'rgba(0, 0, 0, 0.5)',
    lineDash: [10, 10],
    width: 2,
  }),
  image: new CircleStyle({  //點位的圓
    radius: 5,  //半徑
    stroke: new Stroke({  //圓的線段
      color: 'rgba(0, 0, 0, 0.7)',
    }),
    fill: new Fill({  //圓的填色
      color: 'rgba(255, 255, 255, 0.2)',
    }),
  }),
})


#### 10. Main.js 調整 draw樣式 為drawingStyle

#### 11. Main.js 調整 draw裡的type 為 'Polygon'

### 二、 圖形繪製控制
#### 1. 在Html檔案加入 圖形類別選擇 操作介面

  <form class="form-inline">
    <!-- 圖形類別選擇 -->
    <label for="VectorType">圖形類別 &nbsp;</label>
    <select id="VectorType" onchange="typeSelectChanged();">
      <option value="LineString">線段</option>
      <option value="Polygon">多邊形</option>
    </select>
  </form>


#### 2. Main.js 加入 取得下拉選單物件

//取得下拉選單物件
const typeSelect = document.getElementById('VectorType');


#### 3. Main.js 調整 draw裡的type 為 下拉選單的值 typeSelect.value

#### 4. Main.js 加入 typeSelectChanged() 函式

//當改變圖形選擇後
function typeSelectChanged() {
  map.removeInteraction(draw);  //先移除draw
  addInteraction();  //呼叫addInteraction()函式來重建draw
};


#### 5. 在Html檔案加入 清除圖徵 操作按鈕

      
    <!-- 清除圖徵按鈕 -->
    <input type="button" id="btnClear" name="btnClear" class="btn btn-primary" data-toggle="tooltip"
      data-placement="bottom" title="清除圖徵圖徵" value="清除圖徵" onclick="clearVectorFeature();" />


#### 6. Main.js 加入 clearVectorFeature() 函式

//清除向量圖徵
function clearVectorFeature() {
  vectorSource.clear();
}