【Gis地图】Openlayers + SuperMap 实现范围查询和缓冲区查询

最新推荐文章于 2026-06-22 15:47:02 发布

原创

最新推荐文章于 2026-06-22 15:47:02 发布 · 3k 阅读

标签

#typescript #gis

本文介绍了如何结合Openlayers和SuperMap实现GIS中的范围查询和缓冲区查询功能。首先，详细阐述了功能需求，即通过绘制区域来查询区域内设备。接着，讨论了加载Openlayers时遇到的按需加载问题，以及如何通过封装解决。对于SuperMap，由于其友好的模块组织，使用变得更加便捷。实现步骤包括初始化Map、创建Layer、Draw控件和Snap控件，以及监听绘制事件进行查询。最后，指出了在使用SuperMap的RESTData服务时需要注意的细节，如POST请求和获取特定属性的方法变化。

功能需求

绘制区域，查询该区域内的存在的设备（此功能涉及空间查询算法，故而使用gis厂商——超图）。
在这里插入图片描述

加载依赖

Openlayers

因为 ol 的源码 index 文件，其导出模块方式是这样的：
在这里插入图片描述
所以项目加载 ol 模块的时候，必须指定类级别，按需加载，如此十分麻烦。

我的做法是将其模块二次封装，使 ol 依赖只有一个出口，而项目使用引用此文件即可。

SuperMap

SuperMap 的源码 index 文件如下，将所有的模块都封装成一个出口。
在这里插入图片描述使用十分方便。

import {
   
   FeatureService, SuperMap} from '@supermap/iclient-ol';

实现步骤

初始化Map，创建Layer作为绘图层和 Source接收绘制源。
创建Draw控件和Snap控件捕捉绘图。
Draw控件绘制监听，获取绘制源Features。
通过绘制元素的Coordinates，实现范围查询和缓冲区查询。

import {
   
   OLDrawArea} from '../gis-core/drawArea';
  penOptions = [
    {
   
   value:'LineString', name: '线'},
    {
   
   value:'Polygon', name: '多边形'},
    {
   
   value:'Square', name: '正方形'},
    {
   
   value:'Rectangle', name: '长方形'},
    {
   
   value:'Clear', name: '清空'},
    {
   
   value:'None', name: '无'}
  ]; // 绘制图形集合
  // 初始化地图
  initMap() {
   
   
    // 地图实例*
    this.map = new Map({
   
   
      target: 'map',
      layers: this.layersData,
      view: new View({
   
   
        center: this.mapAttr.projection === 'EPSG:3857' ? fromLonLat([this.mapAttr.x, this.mapAttr.y]) : [this.mapAttr.x, this.mapAttr.y],
        projection: this.mapAttr.projection,
        zoom: this.mapAttr.scale,
      }),
      // 比例尺：ScaleLine({units: 'metric'})，全屏按钮：FullScreen
      controls: defaultControls().extend([new ScaleLine({
   
    units: 'metric' })]),
    });
  }
  // penOptions选择绘制类型
  drawQueryArea(drawType) {
   
   
    // 实例化绘图
    this.OLDrawArea = new OLDrawArea(drawType, this.sharedService);
    // 创建Layer作为绘图层和 Source接收绘制源
    this.map.addLayer(this.OLDrawArea.vectorLayer);
    //创建Draw控件
    if (drawType === 'LineString') {
   
   
      this.OLDrawArea.createLine();

最低0.47元/天解锁文章