GIS基础应用技术从0开始-CSDN博客

本文链接：https://blog.csdn.net/m0_67078501/article/details/148338387

一、GIS数据构成

1、地图数据：包括地形图，交通图，水系图等基础地理信息，如高德路网图，中国地形图等。

图1-高德卫星图+路网

2、遥感数据：通过卫星，无人机等遥感设备获取的影响数据。如天地图和地块管理系统中展示的高清地图

图2-卫星遥感影像与无人机影像

3、属性数据：描述地理实体特征的文字和数字信息。例如一个地块的类型和面积。

图3-地理元素与其属性表

4、元数据：描述地理数据的内容、质量、来源等信息的数据。例如数据的坐标系，数据的层级设置，遥感影像的分辨率等。

二、数据类型

1、矢量数据：由点、线、多边形等集合对象组成，用于表示地理实体的空间位置信息和属性信息。一般以shape文件或geojson文件的形式保存。

扩展内容：

shape文件主要由三个文件构成：.shp，.shx，.dbf。

.shp文件存储的是几何要素的空间信息，即坐标数据，他描述了地理要素的形状和位置。
.shx文件存储的是关于.shp文件的索引信息，记录了空间数据再.shp文件中的存储方式，以及XY坐标的输入点位置与数量，从而加快搜索效率。
.dbf文件以数据表的格式存储每一个几何体的属性数据。

shape文件的其他可选文件：.prj，.sbn，.sbx， .shp.xml

.prj文件用于保存地理坐标系统与投影信息，确保数据的地理参考正确。
.sbn和.sbx文件作为空间索引，加速空间数据的读取与处理。
.shp.xml文件以XML格式保存元数据，包括创建时间等信息

2、栅格数据：由像素或网格组成的二维矩阵，每个像素或网格表示地理实体的一种属性值。一般以tif、tiff或图片格式的文件保存。

3、高程模型：表示地球表面高程的离散点或网格的集合，一般以dem格式的文件保存。

4、地理正摄影像：经过集合纠正和色彩校正的无人机或卫星遥感影像。

三、webGIS简介

1、定义与特征

定义：webGIS是建立在web技术上的一种特殊环境下的地理信息系统，是IT技术应用与GIS开发的产物。
特征：

是一种浏览器/服务器结构

通过互联网实现空间数据的分享和互操作

是目前分布最广，普及最快的GIS应用。

2、关键技术

（1）空间数据库技术：webGIS的核心技术，提供高效的空间信息存储，检索和管理功能，支持复杂的空间查询与分析。常用的空间数据库有PostGIS，Oracle等。

（2）地图切片技术：地图切片技术是将地图分成多个小块，然后对每个小块进行渲染和存储。地图切片技术可以快速的加载和显示地图，实现地图的平移和缩放功能。

扩展内容：我们常用的wmts图层和xyz图层就是地图切片技术的应用

（3）矢量地图渲染技术：支持使用矢量数据（点，线，多边形）来渲染地图，支持动态数据更新和实时渲染，使地图表达更精细且丰富。

（4）空间分析技术：webGIS的重要功能之一，用于对地理空间数据的分析和处理。提供常用的如缓冲分析，叠加分析，网络分析等空间分析功能。

（5）地图交互技术：通过提供丰富的交互接口和工具使用户能够与地图交互。常用的地图交互技术有openlayers、leaflet；三维地图交互技术：cesuim.js，Three.js等。

3、webGIS开发平台与工具

1、常见的开发工具：

（1）ArcGIS Sever：优点：功能强大，特别是空间分析和数据可视化方面尤其方便；缺点：收费服务，不开源

（2）GeoServer：开源，支持灵活的地图样式和各种地图服务的发布；

（3）MapServer：优点：开源服务，支持灵活的空间分析和数据可视化；缺点：美国系统，不支持国产化

（4）QGIS Server：基于Qt和C开发的GIS服务，优点：支持基础的空间分析和数据可视化；缺点：用户群体较小，社区生态不完善

总结：目前国内主流的WebGIS开发框架一般是GeoServer+openlayers+postgis和cesuim+geoserver+postgis。这套框架的优点是，开源，支持多种数据源，可扩展性较强。

四、webGIS应用

1、openlayers框架API简介

（1）OpenLayers官方网址：OpenLayers - Welcome

（2）Api关系导图

（3）常用API导图 https://kdocs.cn/l/clktdVWcXTZR

2、openlayers常用API示例

（1）wmts图层的加载

for(let z = 1; z < 18; z++){ 
    resolutions[z] = width / (256 * Math.pow(2, z)); 
    matrixIds[z] = z; 
} 

const myCurrentFarmLand = new ol.layer.Tile({
    source: new ol.source.WMTS({
        url: "/app/api/proxy/map/farmLandMap",
        layer: 'farm:f_farm_land_view',
        matrixSet: "EPSG:4326",
        format: "image/png",
        projection: new ol.proj.Projection({
            code: "EPSG:4326",
            units: "degrees",
            axisOrientation: "neu"
        }),
        tileGrid: new ol.tilegrid.WMTS({
            tileSize: [256, 256],
            extent: [-180.0, -90.0, 180.0, 90.0],
            origin: [-180.0, 90.0],
            resolutions: resolutions,
            matrixIds: matrixIds
        }),
        style: 'if_farm_diff_color',
        wrapX: true
    })
});

myCurrentFarmLand.setZIndex(3);
map.addLayer(myCurrentFarmLand);

（2）wms图层的加载

otherLandLayer = new ol.layer.Tile({
  source: new ol.source.TileWMS({
    url: "/cdszlyManager/farmLandApp/layer/landnotCurrentFarm=true",
    cacheSize: 0,
    params: {
      'FORMAT': "image/png",
      'VERSION': '1.3.0',
      tiled: true,
      STYLES: '',
      LAYERS: 'farm:f_farm_land_view',
    }
  })
});
otherLandLayer.setZIndex(3);
map.addLayer(otherLandLayer);

(3)矢量图层加载与矢量元素加载

landLayer = new ol.layer.Vector({
    source: new ol.source.Vector(),
    zIndex: 6
});

let polygonFeature = new ol.Feature({
    geometry: new ol.geom.Polygon(
        [item.mapPoints] // 面的坐标
    ),
});

polygonFeature.item = item;

polygonFeature.setStyle(
    new ol.style.Style({
        stroke: new ol.style.Stroke({
            width: 3,
            color: [255, 0, 0, 1]
        }),
        fill: new ol.style.Fill({
            color: [0, 0, 255, 0.2]
        })
    })
);

landLayer.getSource().addFeature(polygonFeature);

代码功能说明：

创建矢量图层 landLayer 并设置 zIndex 层级
通过 ol.geom.Polygon 构造多边形几何对象，坐标数据来自 item.mapPoints
为要素添加自定义属性 item
设置红边蓝填充的样式（3px 红色边框，20%透明蓝色填充）
将要素添加到矢量图层的源中

3、Cesium框架简介

（1）Cesium官方地址：Cesium中文api文档 | Index - Cesium Documentation

（2）API关系：

（3）常用Api关系 https://kdocs.cn/l/cl0fBmdMDiIB

几何类清单

4、mars3d常用Api示例

官方Api教程地址：Mars3D 三维可视化平台 | 火星科技 | 地图开发

（1）加载wmts图层

扩展内容：

子域名替换符的作用：通过使用子域名，可以增加向服务器发送数据请求的并发量，从而提高地图加载速度。这是因为浏览器对同一个域名服务的并发请求数量有限制，而通过Nginx服务部署多个子域名，可以加大向服务器发送数据请求的并发量，从而达到提升加载速度的目的。

使用方式：在地图请求接口中增加"{s}"符号作为子域名替换符，将原来的"http://global.screen.cn/api/proxy/map/farmLandMap"修改为"http://global{s}.screen.cn/api/proxy/map/farmLandMap"。最后在浏览器中的请求为

"http://global2.screen.cn/api/proxy/map/farmLandMap"；"http://global3.screen.cn/api/proxy/map/farmLandMap"；"http://global4.screen.cn/api/proxy/map/farmLandMap"

const getWmtsLayer = (params: any) => {
  const mapUrl = params.url;
  const options = {
    id: params.id ? params.id : "",
    url: mapUrl,
    layer: params.layer ? params.layer : "",
    style: params.style ? params.style : "",
    subdomains: '12345', // 子域名替换符 {s}
    getCapabilities: params.getCapabilities ? params.getCapabilities : false,
    format: "image/png",
    tileMatrixSetID: params.tileMatrixSetID,
    crs: params.crs ? params.crs : mars3d.CRS.EPSG4326,
    tileMatrixLabels: params.tileMatrixLabels,
    zIndex: 1000
  };
  
  wmtsLayer = new mars3d.layer.WmtsLayer(options);
  map.addLayer(wmtsLayer);
};

（2）加载wms图层

export const getWmsLayer = (params: any) => {
  const mapUrl = params.url;
  const options: any = {
    url: mapUrl,
    layer: params.layer ? params.layer : "",
    style: params.style ? params.style : "",
    crs: params.crs ? params.crs : mars3d.CRS.EPSG4326,
    subdomains: '12345',
    getCapabilities: false,
    parameters: params.parameters ? params.parameters : {
      transparent: true,
      format: "image/png",
    },
    enablePickFeatures: false, //是否点击发起getFeatureInfo请求
    zIndex: 100000
  };
  
  wmslayer = new mars3d.layer.WmsLayer(options);
  map.addLayer(wmslayer);
};

代码说明：

这是一个用于创建 WMS (Web Map Service) 图层的函数
函数接受一个参数对象 params，包含 WMS 服务的配置信息
提供了默认值处理，如 params.layer 和 params.style 为空时使用空字符串
crs 默认使用 EPSG:4326 坐标系
创建的 WMS 图层会被添加到全局的 map 对象中

（3）加载xyz图层

cbdRsLayer = new mars3d.layer.XyzLayer({
  url: "kaijiangTiles/{z}/{x}/{y}.png",
  zIndex: 10,
})
map.addLayer(cbdRsLayer)

注意事项：

字符串引号建议使用英文双引号（"）而非中文引号（“”）
代码已按照标准JavaScript格式进行缩进排版
该代码实现了一个XYZ瓦片图层的创建和地图添加操作

（4）加载矢量图层

扩展内容：

Primitive和entity的优缺点：

Primitive的优点‌：

1. 高性能‌：当绘制大量Primitive时，可以通过合并为单个Geometry来提高效率，减轻CPU负担，并更好地利用GPU。这种合并操作由Web worker线程执行，保持UI的响应性‌。
2. 灵活性‌：Geometry与Appearance解耦，允许两者分别进行修改，提供低级别的访问，便于编写GLSL顶点、片段着色器，以及使用自定义的渲染状态‌。
3. 加载效率‌：由于更接近WebGL底层，没有Entity的各种附加属性，因此在加载时效率更高‌。

Primitive的缺点‌：

1. 开发难度高‌：需要编写更多的代码，并且对图形编程有更深刻的理解，尤其是OpenGL知识。这要求开发者对图形编程和OpenGL有较为深入的了解‌

12。

1. 适用性有限‌：对于组合几何形状，Primitive对静态数据有效，但对于动态数据则不一定有效‌。

Entity的优点‌：

1. 易用性‌：Entity是对Primitive的封装，使得使用者可以专注于数据的呈现，而不用纠结于底层的实现机制。它提供了便捷的接口进行几何体的绘制，并且可以与其他组件集成，如事件处理、拾取和相机控制等‌。
2. 集成能力‌：Entity可以与其他组件集成，提供了更高层次的抽象，相对降低了开发难度‌。

Entity的缺点‌：

1. 性能相对较低‌：因为涉及更多的自动处理，性能不如Primitive高，因为Primitive使用GPU硬件加速‌。
2. 自定义可视化效果困难‌：虽然Entity方便于实际可视化的操作，但不利用自定义可视化效果‌。

由于我们地图上使用的矢量图层都是简单的颜色渲染和图标渲染，这里对大量点、线、面的渲染推荐使用Primitive的方式去渲染点、线、面图层，提高渲染效率。

有时间的同事也可以研究一下合并面渲染(PolygonCombine）、合并线渲染（PolylineCombine）。合并渲染效率更快，但是对需要动态变化样式的元素使用不一定有效。适用于不会发生变化的大量静态数据。

以下是按照Mars3D API规范编写的点、线、面三种图形创建的代码示例：

创建矢量图层

// 创建矢量数据图层
const cameraLayer = new mars3d.layer.GraphicLayer({})
map.addLayer(cameraLayer)

const townLayer = new mars3d.layer.GraphicLayer({})
map.addLayer(townLayer)

const farmLandsLayer = new mars3d.layer.GraphicLayer({})
map.addLayer(farmLandsLayer)

点要素（Billboard）

const graphic = new mars3d.graphic.BillboardPrimitive({
  position: mapPointsWkt.coordinates,
  eventParent: false,
  style: {
    image: icon,
    scale: 1,
    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    clampToGround: true,
    highlight: {
      scale: 1.5
    }
  },
  attr: item
})
cameraLayer.addGraphic(graphic)

线要素（Polyline）

const graphic = new mars3d.graphic.PolylinePrimitive({
  positions: options.positions,
  style: {
    color: "#00ffff",
    depthFail: true,
    width: 2,
    materialType: mars3d.MaterialType.LineFlow,
    clampToGround: true
  }
})
townLayer.addGraphic(graphic)

面要素（Polygon）

const polygonGraphic = new mars3d.graphic.PolygonPrimitive({
  positions: options.positions,
  style: {
    fill: true,
    color: "rgba(15,249,3,0.1)",
    outlineColor: "#0FF903",
    outlineWidth: 4,
    outlineOpacity: 0.8,
    clampToGround: true
  },
  attr: options.attr
})
farmLandsLayer.addGraphic(polygonGraphic)