SuperMap iClient3D for WebGL 自定义影像服务显示范围

kele

一、前言

影像服务提供了一种影像数据管理和发布的新模式，即通过服务（影像服务）实现大规模影像或栅格数据的管理和发布， 它将改变原有“通过桌面软件管理影像数据和制图，再通过 SuperMap iServer 发布影像地图”的方式， 极大地提升了工作效率。在应用方面，影像服务拥有对海量影像数据的快速管理能力，包括添加影像、删除影像以及查询检索影像；影像服务提供了 WMTS 服务接口，方便第三方客户端以外的产品对接，浏览影像服务所管理的数据。
不通过 SuperMap iDesktop X 处理数据，直接将影像原始文件发布为影像服务，在实际使用中，原始影像范围可能不满足项目使用要求，那么如何自定义影像服务显示范围呢？一起来看看吧！

二、发布影像服务

影像服务介绍与使用，请参考：https://blog.csdn.net/supermapsupport/article/details/128493466
（ps：建议同时发布影像服务与 WMTS100 服务，加载影像服务时，需要获取 WMTS100 服务能力文档中的数据范围）

三、自定义影像服务显示范围

3.1、加载影像服务

使用自定义请求模板接口 UrlTemplateImageryProvider 加载影像服务

let wmtsImageryProvider = new SuperMap3D.UrlTemplateImageryProvider({
    url: 'http://localhost:8090/iserver/services/imageservice-SCuan/restjsr/collections/SCuan/tile.png?z={level}&y={y}&x={x}&transparent=true',
    rectangle: SuperMap3D.Rectangle.fromDegrees(96.89151763916016, 24.93244171142578, 111.83361053466797, 35.054283142089844),//根据wmts服务能力文档获取数据范围
    tileWidth:256,
    tileHeight:256,
    minimumLevel:0,
    maximumLevel:23,
    tilingScheme: new SuperMap3D.GeographicTilingScheme({
        ellipsoid: SuperMap3D.Ellipsoid.WGS84,
    }),
    customTags: {
        level: function(imageryProvider, x, y, level) {
            level = level+1;
            return level
        }
    }
});
let imageryLayer = viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);

3.2、获取自定义范围

通过加载 GeoJson 文件，获取影像服务显示范围

$.get('./SampleData/sichuan.json', function (json) {
    // 从加载的GeoJSON数据中提取坐标
    console.log(json);
    for (let i = 0; i < json.features[0].geometry.coordinates[0].length; i++) {
        // 将坐标添加到 geometries 数组中
        geometries.push(json.features[0].geometry.coordinates[0][i][0]);
        geometries.push(json.features[0].geometry.coordinates[0][i][1]);
        geometries.push(0)
    }
})

3.3、裁剪与清除

裁剪影像服务

$('#clip').click(function (){
        viewer.scene.globe.addImageryClipRegions({
            position: geometries,
            layers: [imageryLayer],
            name: "imglayer"
        })
})

清除裁剪

$('#remove').click(function (){
        viewer.scene.globe.removeImageryClipRegion({
            layers: [imageryLayer],
            name: "imglayer"
        })
})

四、效果展示