---
# System prepended metadata

title: 地理資訊系統開發課程Week6
tags: [Openlayers]

---

---
title : 地理資訊系統開發課程Week6
tags: Openlayers 
creat-date: 2022-10-19 
update_date : 2022-10-19
---
---
## 地理資訊系統開發課程Week6
---
### 一、 圖形繪製基礎
#### 1. Main.js 加入建立OSM地圖為raster圖層的來源
```Javascript=4
//建立OSM地圖為raster圖層的來源
const rasterSource = new ol.source.OSM();
//建立raster圖層
const raster = new ol.layer.Tile({
  source: rasterSource,
});
```

![](https://i.imgur.com/FC0YVYA.png)


#### 2. Main.js 建立地圖時 layers更改為放置raster圖層
```Javascript=20
//建立地圖
var map = new ol.Map({
  controls: defaultControls().extend([zoomSliderControl]),
  target: 'map',
  layers: [raster],
  view: view,
});
```
如下圖，左方紅框內容改為右方紅框處
![](https://i.imgur.com/QhPhuHK.png)


#### 3. Main.js 加入圖形樣式相關的套件變數
```Javascript=3
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類別
```

![](https://i.imgur.com/GBhVW1h.png)


#### 4. Main.js 加入向量圖層的來源、圖層的樣式設定 (在rasterSource下方)
####### 網頁色碼 https://zh.wikipedia.org/zh-tw/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2
```Javascript=15
//建立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',
    }),
  }),
})
```

![](https://i.imgur.com/7cvtzcc.png)


#### 5. Main.js 建立Vector圖層
```Javascript=35
//建立Vector圖層
const vector = new ol.layer.Vector({
  source: vectorSource,
  style: vectorStyle,
});
```

![](https://i.imgur.com/hnhTVYH.png)


#### 6. Main.js 調整建立地圖時 layers再加入vector
![](https://i.imgur.com/9xQ5h99.png)


#### 7.Main.js 加入繪圖套件變數
```Javascript=7
const Draw = ol.interaction.Draw; //取用繪圖套件
```

![](https://i.imgur.com/qgnRUQ1.png)


#### 8.Main.js 在最下方加入 draw變數及addInteraction()函式
```Javascript=59
//宣告一個draw變數給繪圖用
let draw;

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

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

![](https://i.imgur.com/TaBCZ26.png)


#### 9.Main.js 建立drawingStyle為繪圖操作時的樣式設定
```Javascript=62
//建立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)',
    }),
  }),
})
```

![](https://i.imgur.com/LhlBooJ.png)


#### 10. Main.js 調整 draw樣式 為drawingStyle
![](https://i.imgur.com/HZjZKiD.png)


#### 11. Main.js 調整 draw裡的type 為 'Polygon'
![](https://i.imgur.com/s0JUMsM.png)



### 二、 圖形繪製控制
#### 1. 在Html檔案加入 圖形類別選擇 操作介面
```html=25
  <form class="form-inline">
    <!-- 圖形類別選擇 -->
    <label for="VectorType">圖形類別 &nbsp;</label>
    <select id="VectorType" onchange="typeSelectChanged();">
      <option value="LineString">線段</option>
      <option value="Polygon">多邊形</option>
    </select>
  </form>
```

![](https://i.imgur.com/M7LDOi9.png)


#### 2. Main.js 加入 取得下拉選單物件
```Javascript=62
//取得下拉選單物件
const typeSelect = document.getElementById('VectorType');
```

![](https://i.imgur.com/hS7hq56.png)


#### 3. Main.js 調整 draw裡的type 為 下拉選單的值 typeSelect.value
![](https://i.imgur.com/NsgeX2z.png)


#### 4. Main.js 加入 typeSelectChanged() 函式
```Javascript=96
//當改變圖形選擇後
function typeSelectChanged() {
  map.removeInteraction(draw);  //先移除draw
  addInteraction();  //呼叫addInteraction()函式來重建draw
};
```

![](https://hackmd.io/_uploads/Syrg6sdM6.png)


#### 5. 在Html檔案加入 清除圖徵 操作按鈕
```html=32
    &nbsp;&nbsp;
    <!-- 清除圖徵按鈕 -->
    <input type="button" id="btnClear" name="btnClear" class="btn btn-primary" data-toggle="tooltip"
      data-placement="bottom" title="清除圖徵圖徵" value="清除圖徵" onclick="clearVectorFeature();" />
```

![](https://i.imgur.com/ead4rBb.png)


#### 6. Main.js 加入 clearVectorFeature() 函式
```Javascript=102
//清除向量圖徵
function clearVectorFeature() {
  vectorSource.clear();
}
```

![](https://i.imgur.com/YGActhr.png)
