织梦网站安装,阿里云 wordpress 建站,2022房地产行业现状及前景,wordpress定義小工具文章目录 概要OGC技术名词解释cesium 应用案例openlayers 中应用实例XYZ服务OSM服务WMS服务WMTS服务WFS服务 mapbox 应用实例矢量瓦片服务栅格瓦片服务WMS服务WFS服务 leaflet 中 地图服务实例加载OpenStreetMap瓦片图层加载自定义XYZ瓦片图层加载WMS服务图层加载WFS服务图层加… 文章目录 概要OGC技术名词解释cesium 应用案例openlayers 中应用实例XYZ服务OSM服务WMS服务WMTS服务WFS服务 mapbox 应用实例矢量瓦片服务栅格瓦片服务WMS服务WFS服务 leaflet 中 地图服务实例加载OpenStreetMap瓦片图层加载自定义XYZ瓦片图层加载WMS服务图层加载WFS服务图层加载ArcGIS Vector Basemap图层 arcgis for javascript 地图服务实例加载ArcGIS Online地图服务加载动态地图服务加载缓存地图服务加载WMS服务加载WMTS服务 概要
一、GIS行业基础知识 概念 地理信息系统GIS是一种用于采集、存储、管理、分析和展示地理空间数据的系统。它将地理空间数据如地形、地貌、土地利用、人口分布等与属性数据如建筑物的用途、道路的名称等相结合通过空间分析和建模为资源管理、城市规划、环境监测等众多领域提供决策支持。例如在城市规划中GIS可以分析土地利用现状、交通流量等因素帮助规划师确定最佳的土地开发区域和交通线路规划。空间数据空间数据是GIS的核心。它包括矢量数据和栅格数据。矢量数据是由点、线、面等几何对象组成例如地图上的城市边界面、道路线、建筑物位置点等。栅格数据则是像元矩阵常用于表示连续的地理现象如遥感影像中的地形高程、土地覆盖类型等。以土地覆盖分类为例栅格数据的每个像元可以表示该区域是森林、农田还是城市建设用地等不同类型。地理坐标系和投影坐标系地理坐标系是基于地球的经纬度来确定地球上点的位置如WGS - 84是一种广泛使用的地理坐标系。而投影坐标系是将地球表面的经纬度坐标转换为平面坐标以便在地图上进行显示和测量。例如墨卡托投影是一种常用的投影方式它在航海和网络地图中广泛应用因为它能保持角度不变方便导航但会使高纬度地区的面积变形较大。 实例应用 资源管理方面林业部门利用GIS管理森林资源。通过卫星遥感获取森林覆盖范围栅格数据结合实地调查的树木种类、胸径等属性数据矢量数据可以准确评估森林的蓄积量、生长状况等。例如在森林火灾监测中利用GIS可以实时监测火灾发生地点通过卫星定位获取坐标分析火势蔓延方向根据地形、植被等空间数据进行模拟为灭火决策提供支持。交通领域交通管理部门使用GIS进行智能交通系统建设。例如通过在道路上安装传感器获取交通流量数据属性数据结合道路的地理位置矢量数据可以分析交通拥堵情况进行交通信号的智能调控。同时在物流配送中GIS可以根据送货地址的地理位置、道路状况等因素规划最优的配送路线提高配送效率。
二、常用的地图服务
概念 在线地图服务如百度地图、高德地图这些是通过互联网提供地图浏览、导航、地点查询等功能的服务。它们基于大量的地理空间数据利用云计算和网络技术为用户提供便捷的地图应用。例如用户可以在手机上使用这些应用查找附近的餐厅、酒店或者获取从当前位置到目的地的导航路线。这些地图服务通常会定期更新数据以保证地图的准确性和时效性。Web GIS服务如ArcGIS Online它是一种基于Web的GIS平台提供了地图发布、共享和分析功能。用户可以在浏览器中访问和使用GIS功能如创建自定义地图、进行空间分析等。对于企业和政府部门来说Web GIS服务可以方便地将地理信息共享给不同的用户群体例如环保部门可以通过Web GIS服务发布空气质量监测数据让公众可以在网页上查看污染分布情况。 实例应用 百度地图 出行导航用户在城市中开车或步行时百度地图可以根据用户的实时位置通过手机的GPS定位结合道路网络数据矢量数据规划最佳的行驶或步行路线。它还会考虑交通拥堵情况通过与交通管理部门的数据共享或用户反馈动态调整路线。例如在上下班高峰期会引导用户避开拥堵路段。生活服务提供周边查询功能比如查找附近的超市、银行、医院等。当用户搜索“附近的餐厅”时百度地图会根据用户位置在其地理数据库中查找附近符合条件的餐厅并在地图上显示它们的位置和相关信息如评分、菜系等。 ArcGIS Online 城市规划城市规划师可以利用ArcGIS Online发布城市土地利用现状地图包括不同功能区如商业区、住宅区、工业区的分布情况。同时他们可以在这个平台上进行空间分析如评估某一区域的开发潜力通过叠加地形、交通、基础设施等数据图层计算出适合进行新的建设项目的区域。应急响应在自然灾害发生时应急管理部门可以通过ArcGIS Online快速发布受灾区域地图包括洪水淹没范围、地震破坏区域等。同时结合人口分布等数据可以进行救援资源的分配和调度确定需要优先救援的区域。
OGC
OGCOpen Geospatial Consortium协议OGC 是一个国际非营利性组织致力于制定地理空间信息如地图数据、地球观测数据等共享和互操作的标准规范。OGC 协议本质上是一系列的接口和编码规则使得不同地理信息系统GIS软件、在线地图服务以及各种地理空间数据提供者之间能够更好地进行数据交换、共享和集成。 这些协议涵盖了地理空间数据从获取、处理、传输到可视化展示等多个环节。例如它规定了如何请求地理数据数据应该以什么样的格式进行传输如地理标记语言 - GML 格式以及如何在不同的系统中对相同的数据进行正确的解读和展示。
技术名词解释
OGC联盟非盈利国际标准组织制定地理信息数据和服务标准确保GIS软件和数据互操作曾用名Open GIS Consortium后更名为OGC。WMSWeb地图服务 规范利用地理空间数据制作地图定义HTTP接口支持GET和POST请求多基于GET可返回PNG、GIF、JPEG等栅格或SVG、WEB CGM等矢量形式地图。操作及参数 GetCapabilities以xml文档返回服务元数据如版本号、参数、图层信息等。GetMap返回地图影像参数有版本号、请求名称、图层、样式、坐标系统、包围盒、图片宽高、格式等还有可选参数如图层样式文件URL、背景颜色、透明度等。GetFeatureInfo可选返回地图上特定要素信息。DescribeLayer可选图层描述信息。GetLegendGraphic可选获取图层图例图片。 WFSWeb矢量服务 规范返回矢量级GML编码数据支持对矢量的增删改查操作通过OGC Filter构造查询条件支持多种查询方式。操作 GetCapabilities生成服务性能描述文档XML。DescribeFeatureType返回矢量结构描述文档XML。GetFeature获取矢量实例。LockFeature处理事务期间矢量类型实例上锁请求。Transaction编辑现有矢量类型创建、更新、删除。 WCSWeb栅格服务 规范面向空间影像数据将地理空间数据作为“栅格”或“覆盖”在网上交换。操作 GetCapabilities返回描述服务和数据集的XML文档。GetCoverage在确定查询和数据获取方式后用通用栅格格式返回地理位置值或属性。DescribeCoverageType请求覆盖层完整描述。 WPS网络处理服务用于在Web上提供和执行地理空间处理的国际规范GeoServer可通过插件支持可降低数据处理复杂性、连接处理操作、开发可重用过程、集中处理流程和模型、利用服务器运算性能、方便公共使用复杂模型。WMTSWeb地图瓦片服务 规范OGC缓存技术标准定义操作允许用户访问瓦片地图支持RESTful访问采用预定义图块方法发布地图提升服务器伸缩性降低载荷但牺牲定制地图灵活性。操作 GetCapabilities获取服务元信息。GetTile获取切片。GetFeatureInfo可选获取点选要素信息。 WMS-CWeb Mapping Service - Cached由OSGeo制定目的是预先缓存数据提升地图请求速度已被WMTS和TMS取代基于其实现有TileCache曾用参数如bbox和resolutions决定地图层级后有软件改进为level/x/y参数。TMS切片地图服务规范OSGeo制定操作允许用户访问切片地图将切片存本地提升访问速度支持修改坐标系是纯RESTful服务与WMTS本质类似遵循相同切片规则。常见服务对比 WMS动态地图服务实时切片根据请求返回地图可视化结果速度慢GeoServer常用。WMTS预定义图块发布地图提升服务速度牺牲灵活性如天地图使用。WFS返回纯地理数据支持矢量事务操作。WCS面向空间影像数据交换。WPS提供和执行地理空间处理服务。WMSCWMS-C已被取代曾用于预先缓存数据提升速度。TMS瓦片地图服务与WMTS类似。常见的有WMS、WFS、WMTS、TMS。
cesium 应用案例
理解Cesium中的地理服务框架 Cesium是一个用于创建三维地球和地图的JavaScript库。它通过ImageryProvider接口来加载各种地理影像服务。这个接口的不同实现类用于支持不同类型的地理服务如ArcGisMapServerImageryProvider用于ArcGIS地图服务BingMapsImageryProvider用于Bing地图服务等。对于自定义地理服务主要是通过实现或扩展合适的ImageryProvider来完成数据的加载和展示。 自定义瓦片地图服务以自定义瓦片URL为例 使用UrlTemplateImageryProvider 原理UrlTemplateImageryProvider允许用户通过一个URL模板来加载瓦片地图。在这个模板中{x}、{y}和{z}是变量分别代表瓦片的X坐标、Y坐标和缩放级别。代码示例let customTileLayer new Cesium.UrlTemplateImageryProvider({url: https://your-custom-tile-server-url/{z}/{x}/{y}.png,// 其他可选参数如最小和最大缩放级别minimumLevel: 0,maximumLevel: 18
});
let viewer new Cesium.Viewer(cesiumContainer);
viewer.imageryLayers.addImageryProvider(customTileLayer);注意事项 确保自定义的URL模板正确并且服务器能够正确响应瓦片请求。如果服务器返回的瓦片格式不是PNG等常见格式可能需要指定fileExtension参数来匹配正确的格式。根据服务器的性能和数据范围合理设置minimumLevel和maximumLevel参数避免请求不存在的瓦片或者超出服务器处理能力的缩放级别。 自定义WMSWeb Map Service服务应用 创建自定义ImageryProvider如果需要或直接使用WebMapServiceImageryProvider进行配置 原理如果自定义的WMS服务与标准的WMS服务有一些差异可能需要创建一个继承自ImageryProvider的类来处理特殊情况。但如果服务比较标准可以直接使用Cesium.WebMapServiceImageryProvider。这个类通过发送WMS标准请求如GetMap来获取地图图像。代码示例var wmsLayer new Cesium.WebMapServiceImageryProvider({url: http://your-custom-wms-server-url,layers: your-custom-layers,format: image/png,// 可以设置代理如果需要的话proxy: new Cesium.DefaultProxy(/proxy/)
});
var viewer new Cesium.Viewer(cesiumContainer);
viewer.imageryLayers.addImageryProvider(wmsLayer);注意事项 正确配置layers参数确保请求的是所需的图层。不同的WMS服务器可能对图层命名和组织方式有所不同需要根据实际情况设置。format参数应与服务器返回的图像格式一致。如果服务器支持多种格式可以根据性能和兼容性选择合适的格式。如果遇到跨域问题可能需要设置合适的代理。Cesium.DefaultProxy可以用于简单的代理配置但在实际应用中可能需要根据服务器环境和安全策略进行更复杂的代理设置。 自定义WFSWeb Feature Service服务与Cesium的集成间接方式 原理Cesium本身主要用于地图影像和地形的展示没有直接支持WFS的功能用于显示矢量数据。但是可以通过将WFS数据转换为合适的格式如GeoJSON然后使用Cesium的DataSource来加载和显示矢量数据。步骤和代码示例 获取并转换WFS数据 首先需要使用JavaScript的fetch或其他HTTP请求库从WFS服务器获取数据。假设服务器返回的是GML格式的数据需要将其转换为GeoJSON格式。 async function getWfsData() {let response await fetch(http://your-custom-wfs-server-url?requestGetFeatureserviceWFSversion2.0.0typenameyour-feature-type);let gmlData await response.text();// 这里需要一个GML到GeoJSON的转换函数假设为gmlToGeoJsonlet geoJsonData gmlToGeoJson(gmlData);return geoJsonData;
}在Cesium中加载矢量数据getWfsData().then((geoJsonData) {let dataSource new Cesium.GeoJsonDataSource();dataSource.load(geoJsonData).then(() {let viewer new Cesium.Viewer(cesiumContainer);viewer.dataSources.add(dataSource);});
});注意事项 GML到GeoJSON的转换可能比较复杂需要根据GML的具体结构和GeoJSON的规范进行准确的转换。可以使用现有的转换库来简化这个过程。当加载大量矢量数据时可能会影响性能。需要考虑对数据进行简化如降低精度、减少要素数量或者采用合适的加载策略如分层加载、按需加载来提高性能。 自定义WCSWeb Coverage Service服务应用相对复杂 原理WCS主要用于提供栅格数据的原始值在Cesium中应用需要将其转换为合适的影像格式并正确地进行地理定位。这可能涉及到对WCS返回数据的处理和与Cesium的地形或影像系统的集成。步骤和代码示例简化概念 获取和处理WCS数据假设获取高程数据async function getWcsElevationData() {let url http://your-custom-wcs-server-url?serviceWCSrequestGetCoverageversion2.0.1coverageyour-elevation-coverage;let response await fetch(url);let wcsData await response.arrayBuffer();// 这里需要对WCS数据进行处理如解析格式、转换为合适的高程数据格式let processedElevationData processWcsElevationData(wcsData);return processedElevationData;
}在Cesium中应用高程数据创建地形提供者getWcsElevationData().then((elevationData) {let terrainProvider new Cesium.HeightmapTerrainProvider({url: Cesium.createDataUri({buffer: elevationData,format: binary}),// 其他地形参数如水平和垂直精度horizontalScale: 1,verticalScale: 1});let viewer new Cesium.Viewer(cesiumContainer);viewer.terrainProvider terrainProvider;
});注意事项 处理WCS数据需要深入了解WCS返回的格式如NetCDF、GRIB等和数据结构。不同的WCS服务器提供的数据格式可能不同需要根据实际情况进行解析和转换。在创建地形提供者时要根据数据的精度和范围合理设置horizontalScale和verticalScale等参数以确保地形的正确显示。同时要注意数据的坐标系统和Cesium的坐标系统之间的匹配可能需要进行坐标转换。
openlayers 中应用实例
XYZ服务
import TileLayer from ol/layer/Tile;
import XYZ from ol/source/XYZ;// 创建Stamen Maps图层
const stamenLayer new TileLayer({source: new XYZ({url: https://stamen-tiles-{a-d}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png})
});OSM服务
import TileLayer from ol/layer/Tile;
import OSM from ol/source/OSM;// 创建OpenStreetMap图层
const osmLayer new TileLayer({source: new OSM()
});WMS服务
import TileLayer from ol/layer/Tile;
import TileWMS from ol/source/TileWMS;// 创建WMS图层
const wmsLayer new TileLayer({source: new TileWMS({url: https://your-geoserver-url/wms,params: {LAYERS: your-layer-name,TILED: true}})
});WMTS服务
import TileLayer from ol/layer/Tile;
import WMTS from ol/source/WMTS;
import WMTSTileGrid from ol/tilegrid/WMTS;
import { get as getProjection } from ol/proj;
import { getWidth, getTopLeft } from ol/extent;const projection getProjection(EPSG:900913);
const projectionExtent projection.getExtent();
const size getWidth(projectionExtent) / 256;
const resolutions new Array(19);
const matrixIds new Array(19);
for (let z 0; z 19; z) {resolutions[z] size / Math.pow(2, z);matrixIds[z] z;
}
const tileGrid new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: matrixIds
});const tiandituLayer new TileLayer({source: new WMTS({url: http://t{s}.tianditu.com/vec_c/wmts,layer: vec,matrixSet: c,format: tiles,tileGrid: tileGrid,style: default,wrapX: true})
});WFS服务
import VectorSource from ol/source/Vector;
import VectorLayer from ol/layer/Vector;
import GeoJSON from ol/format/GeoJSON;const vectorSource new VectorSource({format: new GeoJSON(),url: https://your-geoserver-url/wfs?servicewfsversion1.1.0requestgetfeaturetypenameyour-feature-typeoutputformatapplication/jsonsrsnameEPSG:4326,
});const vectorLayer new VectorLayer({source: vectorSource,style: new Style({stroke: new Stroke({color: rgba(0, 0, 255, 1.0),width: 2})})
});mapbox 应用实例
矢量瓦片服务
mapboxgl.accessToken YOUR_ACCESS_TOKEN;
var map new mapboxgl.Map({container: map,style: mapbox://styles/mapbox/streets-v11,center: [-73.985, 40.748],zoom: 10
});map.on(load, function () {map.addSource(my_vector_source, {type: vector,url: mapbox://your-username.tileset-id});map.addLayer({id: my_vector_layer,type: fill,source: my_vector_source,source-layer: layer-name,paint: {fill-color: #008000,fill-opacity: 0.5}});
});栅格瓦片服务
mapboxgl.accessToken YOUR_ACCESS_TOKEN;
var map new mapboxgl.Map({container: map,style: mapbox://styles/mapbox/satellite-v9,center: [-73.985, 40.748],zoom: 10
});map.on(load, function () {map.addSource(my_raster_source, {type: raster,url: https://your-raster-tile-service-url/{z}/{x}/{y}.png,tileSize: 256});map.addLayer({id: my_raster_layer,type: raster,source: my_raster_source});
});WMS服务
mapboxgl.accessToken YOUR_ACCESS_TOKEN;
var map new mapboxgl.Map({container: map,style: {version: 8,sources: {wms-source: {type: raster,tiles: [https://your-wms-server-url?SERVICEWMSVERSION1.1.1REQUESTGetMapLAYERSyour-layer-nameSTYLESSRSEPSG:3857BBOX{bbox-epsg-3857}WIDTH256HEIGHT256FORMATimage/png],tileSize: 256}},layers: [{id: wms-layer,type: raster,source: wms-source}]},center: [-73.985, 40.748],zoom: 10
});WFS服务
mapboxgl.accessToken YOUR_ACCESS_TOKEN;
var map new mapboxgl.Map({container: map,style: mapbox://styles/mapbox/streets-v11,center: [-73.985, 40.748],zoom: 10
});map.on(load, function () {// 使用fetch或其他HTTP请求库获取WFS数据fetch(https://your-wfs-server-url?SERVICEWFSVERSION2.0.0REQUESTGetFeatureTYPENAMEyour-feature-typeSRSNAMEEPSG:4326OUTPUTFORMATapplication/json).then(response response.json()).then(data {// 将WFS数据转换为GeoJSON格式var geoJSONData {type: FeatureCollection,features: data.features};map.addSource(wfs-source, {type: geojson,data: geoJSONData});map.addLayer({id: wfs-layer,type: circle,source: wfs-source,paint: {circle-radius: 5,circle-color: #FF0000}});});
});leaflet 中 地图服务实例
加载OpenStreetMap瓦片图层
var map L.map(map).setView([51.505, -0.09], 13);
L.tileLayer(https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png, {attribution: copy; a hrefhttps://www.openstreetmap.org/copyrightOpenStreetMap/a contributors
}).addTo(map);加载自定义XYZ瓦片图层
var map L.map(map).setView([37.7749, -122.4194], 14);
L.tileLayer(https://your-tile-server-url/{z}/{x}/{y}.png, {attribution: Your Attribution,maxZoom: 18
}).addTo(map);加载WMS服务图层
var map L.map(map).setView([40.7128, -74.0060], 10);
var wmsLayer L.tileLayer.wms(https://your-wms-server-url, {layers: your-layer-name,format: image/png,transparent: true,attribution: WMS Layer Attribution
});
wmsLayer.addTo(map);加载WFS服务图层
var map L.map(map).setView([37, 104], 3);
function loadWFS(url, layer, callback, crsEPSG:4326, options{}) {const params {service: WFS,version: 1.1.0,request: GetFeature,typeName: layer,outputFormat: application/json,srsName: crs};const url_str url L.Util.getParamString(params, url);$.ajax({url: url_str,dataType: json,success: function (geojson) {var wfsLayer L.geoJson(geojson, options);callback(wfsLayer);}});
}loadWFS(http://localhost:8080/geoserver/rest_workspace/ows, china_province, function (layer) {layer.addTo(map);
});加载ArcGIS Vector Basemap图层
const apiKey your_api_key;
const basemapEnum arcgis/navigation;
const startCoords [-122.4194, 37.7749];
const zoomLevel 14;const map L.map(map, {minZoom: 2
}).setView(startCoords, 6);const tileLayer L.esri.vector.vectorBasemapLayer(basemapEnum, {apiKey: apiKey
});
tileLayer.addTo(map);arcgis for javascript 地图服务实例
加载ArcGIS Online地图服务
require([esri/Map,esri/views/MapView,esri/layers/FeatureLayer
], function(Map, MapView, FeatureLayer) {var map new Map({basemap: streets});var view new MapView({container: viewDiv,map: map,center: [-122.4194, 37.7749],zoom: 12});
});加载动态地图服务
require([esri/Map,esri/views/MapView,esri/layers/ArcGISDynamicMapServiceLayer
], function(Map, MapView, ArcGISDynamicMapServiceLayer) {var map new Map({basemap: topo});var dynamicLayer new ArcGISDynamicMapServiceLayer(https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer);map.addLayer(dynamicLayer);var view new MapView({container: viewDiv,map: map,center: [-98.5795, 39.8282],zoom: 4});
});加载缓存地图服务
require([esri/Map,esri/views/MapView,esri/layers/ArcGISTiledMapServiceLayer
], function(Map, MapView, ArcGISTiledMapServiceLayer) {var map new Map({basemap: gray});var tiledLayer new ArcGISTiledMapServiceLayer(https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer);map.addLayer(tiledLayer);var view new MapView({container: viewDiv,map: map,center: [0, 0],zoom: 2});
});加载WMS服务
require([esri/Map,esri/views/MapView,esri/layers/WMSLayer
], function(Map, MapView, WMSLayer) {var map new Map({basemap: osm});var wmsLayer new WMSLayer(http://localhost:8080/geoserver/wms, {format: png,resourceInfo: {copyright: GeoServer,description: Test WMS,extent: new esri.geometry.Extent(-180, -90, 180, 90, { wkid: 4326 }),featureInfoFormat: text/html,layerInfos: [new WMSLayerInfo({ name: test_layer, title: Test Layer, queryable: true, showPopup: true })],spatialReferences: [4326],version: 1.1.1},version: 1.1.1,visibleLayers: [test_layer]});map.addLayer(wmsLayer);var view new MapView({container: viewDiv,map: map,center: [0, 0],zoom: 2});
});加载WMTS服务
require([esri/Map,esri/views/MapView,esri/layers/WMTSLayer
], function(Map, MapView, WMTSLayer) {var map new Map({basemap: satellite});var wmtsLayer new WMTSLayer({url: http://your-wmts-server-url/ogc/wmts,layer: your_layer_name,style: default,format: image/png,tileMatrixSet: your_tile_matrix_set,showLegend: true});map.addLayer(wmtsLayer);var view new MapView({container: viewDiv,map: map,center: [0, 0],zoom: 2});
});
