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相关技术。