WebGIS实战系列三项目的重新开始

最新推荐文章于 2026-05-06 09:11:24 发布

原创最新推荐文章于 2026-05-06 09:11:24 发布 · 1.4k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

openlayers

说明

离上次更新该系列文章已经快四个多月。这段时间工作上比较忙以及自己也换了份工作就没有更新过相关内容，最近在做一个管网系统，自己也写了一些小的demo，里面有一些用到的天地图的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)
    },