GIS基础应用技术分享****
一、GIS数据构成****
1、地图数据：包括地形图，交通图，水系图等基础地理信息，如高德路网图，中国地形图等。
图1-中国地形图
2、遥感数据：通过卫星，无人机等遥感设备获取的影响数据。如天地图和地块管理系统中展示的高清地图
图2-卫星遥感影像与无人机影像
3、属性数据：描述地理实体特征的文字和数字信息。例如一个地块的类型和面积。
图3-地理元素与其属性表
4、元数据：描述地理数据的内容、质量、来源等信息的数据。例如数据的坐标系，数据的层级设置，遥感影像的分辨率等。
二、数据类型****
1、矢量数据：由点、线、多边形等集合对象组成，用于表示地理实体的空间位置信息和属性信息。一般以shape文件或geojson文件的形式保存。
扩展内容：
a. shape文件主要由三个文件构成：.shp，.shx，.dbf。
❏ .shp文件存储的是几何要素的空间信息，即坐标数据，他描述了地理要素的形状和位置。
❏ .shx文件存储的是关于.shp文件的索引信息，记录了空间数据再.shp文件中的存储方式，以及XY坐标的输入点位置与数量，从而加快搜索效率。
❏ .dbf文件以数据表的格式存储每一个几何体的属性数据。
b. shape文件的其他可选文件：.prj，.sbn，.sbx， .shp.xml
❏ .prj文件用于保存地理坐标系统与投影信息，确保数据的地理参考正确。
❏ .sbn和.sbx文件作为空间索引，加速空间数据的读取与处理 。
❏ .shp.xml文件以XML格式保存元数据，包括创建时间等信息
2、栅格数据：由像素或网格组成的二维矩阵，每个像素或网格表示地理实体的一种属性值。一般以tif、tiff或图片格式的文件保存。
3、高程模型：表示地球表面高程的离散点或网格的集合，一般以dem格式的文件保存。
4、地理正摄影像：经过集合纠正和色彩校正的无人机或卫星遥感影像。
三、webGIS简介****
1、定义与特征
a. 定义：webGIS是建立在web技术上的一种特殊环境下的地理信息系统，是IT技术应用与GIS开发的产物。
b. 特征：
是一种浏览器/服务器结构
通过互联网实现空间数据的分享和互操作
是目前分布最广，普及最快的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.org
（2）Api关系导图
（3）常用API导图 kdocs.cn/l/clktdVWcX…
2、openlayers常用API示例
（1）wmts图层的加载
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", // 32648
units: "degrees", // m
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 // 矩阵id 瓦片坐标系z维度各个层级的标识
}),
style: 'if_farm_diff_color',
wrapX: true
})
myCurrentFarmLand.setZIndex(3); // 设置图层显示层级，值越大越在上面
map.addLayer(myCurrentFarmLand);
（2）wms图层的加载
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)矢量图层加载与矢量元素加载
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);
3、Cesium框架简介
（1）Cesium官方地址：cesium.xin/cesium/cn/D…
mars3d服务Api地址： mars3d.cn/api.html
（2）API关系：
（3）常用Api关系 kdocs.cn/l/cl0fBmdMD…
几何类清单
4、mars3d常用Api示例
官方Api教程地址：mars3d.cn/example.htm…
（1）加载wmts图层
扩展内容：
子域名替换符的作用：通过使用子域名，可以增加向服务器发送数据请求的并发量，从而提高地图加载速度。这是因为浏览器对同一个域名服务的并发请求数量有限制，而通过Nginx服务部署多个子域名，可以加大向服务器发送数据请求的并发量，从而达到提升加载速度的目的。
使用方式：在地图请求接口中增加"{s}"符号作为子域名替换符，以全球大屏（global.screen.jsydf.cn/）地块图层加载为例：将原来的"global.screen.jsydf.cn/jsyApi/api/…
"global2.screen.jsydf.cn/jsyApi/api/…"
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图层
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)\
}
（3）加载xyz图层
url: “kaijiangTiles/{z}/{x}/{y}.png”,\
zIndex:10,\
})\
map.addLayer(cbdRsLayer)
（4）加载矢量图层
扩展内容：
Primitive和entity的优缺点：
● Primitive的优点：
● 高性能：当绘制大量Primitive时，可以通过合并为单个Geometry来提高效率，减轻CPU负担，并更好地利用GPU。这种合并操作由Web worker线程执行，保持UI的响应性。
● 灵活性：Geometry与Appearance解耦，允许两者分别进行修改，提供低级别的访问，便于编写GLSL顶点、片段着色器，以及使用自定义的渲染状态。
● 加载效率：由于更接近WebGL底层，没有Entity的各种附加属性，因此在加载时效率更高。
● Primitive的缺点：
● 开发难度高：需要编写更多的代码，并且对图形编程有更深刻的理解，尤其是OpenGL知识。这要求开发者对图形编程和OpenGL有较为深入的了解12。
● 适用性有限：对于组合几何形状，Primitive对静态数据有效，但对于动态数据则不一定有效。
● Entity的优点：
● 易用性：Entity是对Primitive的封装，使得使用者可以专注于数据的呈现，而不用纠结于底层的实现机制。它提供了便捷的接口进行几何体的绘制，并且可以与其他组件集成，如事件处理、拾取和相机控制等。
● 集成能力：Entity可以与其他组件集成，提供了更高层次的抽象，相对降低了开发难度。
● Entity的缺点：
● 性能相对较低：因为涉及更多的自动处理，性能不如Primitive高，因为Primitive使用GPU硬件加速。
● 自定义可视化效果困难：虽然Entity方便于实际可视化的操作，但不利用自定义可视化效果。
由于我们地图上使用的矢量图层都是简单的颜色渲染和图标渲染，这里对大量点、线、面的渲染推荐使用Primitive的方式去渲染点、线、面图层，提高渲染效率。
有时间的同事也可以研究一下合并面渲染(PolygonCombine）、合并线渲染（PolylineCombine）。合并渲染效率更快，但是对需要动态变化样式的元素使用不一定有效。适用于不会发生变化的大量静态数据。
// 创建矢量数据图层\
cameraLayer = new mars3d.layer.GraphicLayer({})\
map.addLayer(cameraLayer) // 添加一个层
// 点\
const graphic = new mars3d.graphic.BillboardPrimitive({\
position:mapPointsWkt.coordinates,\
eventParent:false,\
style: {\
image: icon,\
scale: 1,\
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 图标相对位置 x方向\
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 图标相对位置 y方向\
clampToGround:true, // 贴地\
// 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用\
highlight: {\
scale: 1.5,\
}\
},\
attr:item\
})\
cameraLayer.addGraphic(graphic)
// 线\
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)
// 面\
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)
