网站对比分析,中铁局哪个局实力最大,比价网,邯郸哪个公司做网站好目录
一、数据格式
二、COG特点
三、使用GDAL生成COG格式的数据
四、使用ArcGIS Maps SDK for JavaScript加载COG格式数据 一、数据格式
COG#xff08;Cloud optimized GeoTIFF#xff09;是一种GeoTiff格式的数据。托管在 HTTP 文件服务器上#xff0c;可以代替geose…目录
一、数据格式
二、COG特点
三、使用GDAL生成COG格式的数据
四、使用ArcGIS Maps SDK for JavaScript加载COG格式数据 一、数据格式
COGCloud optimized GeoTIFF是一种GeoTiff格式的数据。托管在 HTTP 文件服务器上可以代替geoserver/arcgis server发布栅格数据比wms/wmts节省服务器空间和内存。
二、COG特点 在GeoTIFF图片中保存除原始像元数据外的瓦片tile和概览overview 使用HTTP范围请求获取单一文件的所需部分
三、使用GDAL生成COG格式的数据 已有tif格式的栅格数据使用gdal.Translate函数。代码如下 参考gdal_translate接口文档
from osgeo import gdal, gdalconst获取相应统计数据
def compute_stat(srcDS):outBand srcDS.GetRasterBand(1)stat outBand.ComputeStatistics(True)outBand Nonestat Nonedel outBanddel stat# 将文件转为cog
file ./Data/DSM22000108.tif # 输入数据
out ./Data/DSM22000108-COG.tif #输出数据
cal_area gdal.Open(file) # 读取# ---------------------
#----写法1添加多个参数设定COG格式----
options gdal.TranslateOptions(formatCOG,creationOptions[COMPRESSDEFLATE,TILING_SCHEMEGoogleMapsCompatible,QUALITY100,BLOCKSIZE256,BIGTIFFYES,NUM_THREADSALL_CPUS],outputTypegdalconst.GDT_Int32
)
# 转换为COG格式数据
desImg gdal.Translate(out, cal_area, optionsoptions, overwriteTrue)#----写法2使用默认参数----
desImg gdal.Translate(out, cal_area, formatCOG)# ---------------------#计算COG的栅格值生成xml
n_desImg gdal.Open(out)
compute_stat(n_desImg)print(out img---------------)
print(n_desImg)n_desImg None
得到的结果为 四、使用ArcGIS Maps SDK for JavaScript加载COG格式数据
ArcGIS JS 提供接口ImageryTileLayer可以直接加载。 【官网示例代码】ImageryTileLayer with COG
我们将GDAL计算得到的COG数据以静态文件形式封装成服务用url进行访问。
核心代码
const url http://127.0.0.1:8000/DemData/LocalData/ele-COG.tif; //封装成自己的文件服务view.graphics.removeAll();
const eleImageLayer new ImageryTileLayer({ //使用ImageryTileLayer加载COGurl: url, // 文件的url可访问opacity: 1.0 //透明度
});
map.add(eleImageLayer);//添加到地图
完整代码可直接使用。
!DOCTYPE html
html
headmeta charsetutf-8meta nameviewport contentinitial-scale1,maximum-scale1,user-scalablenotitleArcGIS JS - Elevation Data/titlelink relstylesheet hrefhttps://js.arcgis.com/4.22/esri/themes/light/main.cssscript srchttps://js.arcgis.com/4.22//scriptstylehtml, body, #viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}/style
/head
bodydiv idviewDivbutton idloadElevationDataLoad Elevation Data/buttondiv idresponseMessage/div/divscriptrequire([esri/Map,esri/views/MapView,esri/layers/ImageryTileLayer,dojo/domReady!], function(Map, MapView, ImageryTileLayer) {// Create a mapconst map new Map({basemap: topo-vector});// Create a view for the mapconst view new MapView({container: viewDiv,map: map,center: [0, 0],zoom: 2});// Function to zoom to the layerfunction zoomToLayer(layer) {view.whenLayerView(layer).then(function(layerView) {view.goTo(layerView.fullExtent);});}// Button click event to fetch elevation data and add it to the mapdocument.getElementById(loadElevationData).addEventListener(click, function() {const url http://127.0.0.1:8000/DemData/LocalData/ele-COG.tif; document.getElementById(responseMessage).textContent Elevation data loaded successfully. /nurl;view.graphics.removeAll();const eleImageLayer new ImageryTileLayer({url: url,opacity: 1.0});map.add(eleImageLayer);zoomToLayer(eleImageLayer);});});/script
/body
/html
效果如下
