2.7.2 影像高程

数据结构

影像数据与高程数据以特定结构存储，其中tms.xml为核心信息文件，在配置数据加载路径时，需指向此xml文件。

数据加载(常规)

使用ImageLayer类实现影像数据加载:

var obj = new CooWasm.ImageLayer({
    url: "http://127.0.0.1:8088/Data/DOM/tms.xml"
}, state => {
    if (state) {//是否加载成功
        obj.Locate();//数据定位
    } else {
        obj = obj.destroy();
    }
})

使用ElevationLayer类实现高程数据加载:

var obj = new CooWasm.ElevationLayer({
    url: "http://127.0.0.1:8088/Data/DEM/tms.xml"
}, state => {
    if (state) {//是否加载成功
        obj.Locate();//数据定位
    } else {
        obj = obj.destroy();
    }
})

WMTS服务代理配置(nginx,conf)

防止wmts服务加载时的跨域问题，需要在nginx.conf中配置代理，其中proxy_pass http://172.17.40.191:8200/geoserver;部分为geoserver地址，http://127.0.0.1部分为CooWasmDemo服务地址ip:

location /geoserver {
    # ... 其他代理设置 ...
    proxy_pass http://172.17.40.191:8200/geoserver; # 指向你的 GeoServer

    # 添加 CORS 头
    add_header 'Access-Control-Allow-Origin' 'http://127.0.0.1' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, HEAD' always;
    add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization' always;
    add_header 'Access-Control-Allow-Credentials' 'false' always; # 或 'true' 如果需要并配置了具体 origin

    # 处理预检请求 (OPTIONS)
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' 'http://127.0.0.1';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, HEAD';
        add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
        add_header 'Access-Control-Max-Age' 1728000; # 缓存时间
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

影像数据加载(OGC)

ogc服务(WMTS,WMS)影像加载以ImageLayer类来实现，需要WMTSConnector、WMTSInformation、WMSConnector、WMSInformation类进行配合加载。以下将以加载WMTS服务为例进行讲解:

1.使用WMTSConnector连接WMTS服务:

// 创建WMTSConnector对象，传入WMTS服务地址
var obj = new CooWasm.WMTSConnector({
    url: "http://127.0.0.1:8088/geoserver/gwc/service/wmts"
});

2.获得该WMTS服务的所有服务信息:

后续操作必须在回调函数中执行，确保获取服务信息后再进行下一步：

obj.getLayersInfo(function(err, layerInfos) {
    if (!layerInfos) {
        console.log('未读取到服务信息，错误:'+ err);
    }else{
        //layerInfos为读取到的所有服务信息列表，根据需要选择加载。
        loadImage(layerInfos);
    }
});

3.根据layerName从layerInfos中筛选想要加载的WMTS服务:

// 声明变量存储筛选出的WMTS服务信息对象，该对象为WMTSInformation类
var wmtsInfoObj;
layerInfos.forEach(layerInfo=>{
    //根据layerName筛选需要加载的服务
    if(layerInfo.layerName === 'GeoServer:杭州市行政区划边界'){
        wmtsInfoObj = layerInfo；
    }
})

4.加载对应的WMTS服务:

// 创建ImageLayer对象，传入WMTS服务地址和筛选出的服务信息
var imageLayerObj = new CooWasm.ImageLayer({
    url: "http://127.0.0.1:8088/geoserver/gwc/service/wmts",
    wmtsInfo: wmtsInfoObj,//上一步筛选出来的服务信息对象
}, state => {
    if (state) {
        // 加载成功，执行数据定位
        imageLayerObj.Locate();
    } else {
        // 加载失败，销毁对象
        imageLayerObj = imageLayerObj.destroy();
    }
})