WebGIS實戰系列 三 項目的重新開始

說明

離上次更新該系列文章已經快四個多月。這段時間工作上比較忙以及自己也換了份工作就沒有更新過相關內容，最近在做一個管網系統，自己也寫了一些小的demo，github 地址（歡迎star），裏面有一些用到的天地圖的key跟bing地圖的key需要大家自己去獲取。最近我打算會陸陸續續的更新完這個系列的文章。將自己在項目上的經驗進行分享。

---

上面的項目截圖：

界面搭建使用模板 vue-element-admin

該項目是Geoserver+openlayers5的一些例子，
完成的功能如下：

1. 地圖控件

1.1  導航控件

1.2 zoomslider

1.3 鼠標位置

2. 屬性查詢

3. 空間查詢

4. 在線編輯

5. 測量

5.1 長度測量

5.2 面積測量

5.3 面積測量填充

6. 加載天地圖

7. 加載天地圖投影轉換

8. 緩衝區繪製（turf）

9. 拉框放大縮小

10. 點生成緩衝範圍查詢（√）

11. 軌跡回放（√）

12. 位置監控（√）

13. 面添加標註（√）

---

設置高亮顯示關鍵代碼：

if (this.resultVterSource.clear) {
  this.resultVterSource.clear();
}
const feature = this.vectorSource.getFeatureById(item.id);
this.resultVterSource.addFeature(feature);
// 設置顯示區域偏移
this.getMap.getView().fit(this.resultVterSource.getExtent(), {
  padding: [0, 0, 0, document.body.clientWidth * 0.5]
});

取消地圖雙擊放大事件

      const dblClickInteraction = this.map.getInteractions().getArray().find(interaction => {
        return interaction instanceof DoubleClickZoom
      })
      dblClickInteraction.setActive(false)
      // this.map.removeInteraction(dblClickInteraction)

生成凸包多邊形代碼：

        import Polygon from 'ol/geom/Polygon'
		import VectorLayer from 'ol/layer/Vector'
		import VectorSource from 'ol/source/Vector'
      // 測試代碼
      const vector = new VectorLayer({ source: new VectorSource() })
      const hull = new Feature(new Polygon([[0, 0]]))
      vector.getSource().addFeature(hull)
      this.map.addLayer(vector)
      const pts = [
        [114.220879661414, 22.975200845151],
        [114.220860930313, 22.975184518253],
        [114.220860930313, 22.975184518253],
        [114.220828365764, 22.9752191658701],
        [114.220828365764, 22.9752191658701],
        [114.220833528445, 22.9752275112574],
        [114.220833528445, 22.9752275112574],
        [114.220821206418, 22.9752423824677],
        [114.220828365764, 22.9752191658701],
        [114.220720072206, 22.9751794500514],
        [114.220720072206, 22.9751794500514],
        [114.220658387028, 22.9754358833445],
        [114.220658387028, 22.9754358833445],
        [114.220620679617, 22.9755946167627],
        [114.220658387028, 22.9754358833445],
        [114.22065148011, 22.9754344030389],
        [114.220620679617, 22.9755946167627],
        [114.220531663839, 22.9759503527799],
        [114.220531663839, 22.9759503527799],
        [114.22040763731, 22.9764204097126],
        [114.22040763731, 22.9764204097126],
        [114.220397895536, 22.9764448850231],
        [114.220397895536, 22.9764448850231],
        [114.220394308619, 22.9764520687121]
      ]
      hull.setGeometry(new Polygon([this.convexHull(pts)]))
      this.map.getView().fit(vector.getSource().getExtent())
     convexHull(points) {
      let i
      points.sort(function (a, b) {
        return a[0] === b[0] ? a[1] - b[1] : a[0] - b[0]
      })
      console.log(points)
      const lower = []
      for (i = 0; i < points.length; i++) {
        while (lower.length >= 2 && this.clockwise(lower[lower.length - 2], lower[lower.length - 1], points[i])) {
          lower.pop()
        }
        lower.push(points[i])
      }
      const upper = []
      for (i = points.length - 1; i >= 0; i--) {
        while (upper.length >= 2 && this.clockwise(upper[upper.length - 2], upper[upper.length - 1], points[i])) {
          upper.pop()
        }
        upper.push(points[i])
      }

      upper.pop()
      lower.pop()
      return lower.concat(upper)
    },
    clockwise(a, b, o) {
      return ((a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]) <= 0)
    },

可以加我QQ：951796696 一起交流討論webgis相關技術。