OpenLayers调用最新WMTS服务遥感影像

最新推荐文章于 2024-06-09 20:17:27 发布

摇曳甜梨

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量661

点赞数 10

文章标签：前端 javascript

本文链接：https://blog.csdn.net/dingsiww/article/details/135823849

版权

WMTS（Web Map Tile Service）是最常用的网络地图服务之一，基于OGC的开放标准，可以兼容常用的桌面GIS和WebGIS框架。

OpenLayers是一个专为WebGIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问，目前最新版本为8.2.0。

目前，网上最新的遥感影像是四维地球影像(四维地球遥感云服务平台)，时效性为2023年中期，超过了天地图和谷歌地球，也是奥维互动地图的默认影像地图。

四维地球影像接口API文档如下：

四维地球遥感云服务平台https://siweiearth.com/sw-nav/helpDoc?file=API%2FWMTS%E6%9C%8D%E5%8A%A1%E6%B5%8F%E8%A7%88.md&title=WMTS%E6%9C%8D%E5%8A%A1%E6%B5%8F%E8%A7%88OpenLayers提供WMTS服务接口，一般使用墨卡托投影（EPSG:3857），所以使用如下WMTS链接：

https://swapi.siweiearth.com/sj_raster/v6/wmts/image_tile_mg/{terminal}/{data_id}/{data_version}?service=wmts&request=gettile

此外，还需要申请ak，用于获取影像调用权限，ak获取方法如下：

四维地球遥感云服务平台https://siweiearth.com/sw-nav/helpDoc?file=dev%2F%E8%AE%A4%E8%AF%81%E9%89%B4%E6%9D%83.md&title=%E8%AE%A4%E8%AF%81%E9%89%B4%E6%9D%83具体代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OpenLayers调用四维地球示例</title>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>

    <style>
        html, body, #map {
            border: 0;
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="map"></div>
</body>
<script type="text/javascript">
    window.onload = function() {

        let projection = ol.proj.get('EPSG:3857');          // 获取web墨卡托投影坐标系
        let projectionExtent = projection.getExtent();      // web墨卡托投影坐标系的四至
        let width = ol.extent.getWidth(projectionExtent);   // web墨卡托投影坐标系的水平宽度，单位米
        let resolutions = [];                               // 瓦片分辨率
        let matrixIds = [];                                 // 可以在元数据中找到
        for(let z = 0; z < 19; z++){
            resolutions[z] = width / (256 * Math.pow(2, z)); 
            matrixIds[z] = z;
        }
        let wmtsTileGrid = new ol.tilegrid.WMTS({
            origin: ol.extent.getTopLeft(projectionExtent), // 原点（左上角）
            resolutions: resolutions,                       // 分辨率数组
            matrixIds: matrixIds                            // 矩阵ID，就是瓦片坐标系z维度各个层级的标识
        }); 
        
        // WMTS数据源与地图
        let wmtsSource = new ol.source.WMTS({
            url: "https://swapi.siweiearth.com/sj_raster/v6/wmts/image_tile_mg/system/12621098501/1?service=wmts&request=gettile&ak=",
            matrixSet: 'EPSG:3857',             // 投影坐标系参数矩阵集
            format: 'image/png',                // 图片格式
            projection: projection,             // 投影坐标系
            tileGrid: wmtsTileGrid
        });
        let wmtsLayer = new ol.layer.Tile({
            source: wmtsSource
        });
        var osmSource = new ol.source.OSM();

        //实例化地图对象
        var map = new ol.Map({
            //目标容器
            target: 'map',
            //图层
            layers: [
                //加载瓦片网格图层
                wmtsLayer,
                //瓦片行列号图层，可隐藏
                new ol.layer.Tile({
                    source: new ol.source.TileDebug({
                        projection: 'EPSG:3857',             //地图投影坐标系
                        tileGrid: osmSource.getTileGrid()    //获取瓦片网格信息
                    })
                })
            ],
            //实例化视图对象
            view: new ol.View({
                //视图中心
                center: ol.proj.transform([114.76116, 30.397947], 'EPSG:4326', 'EPSG:3857'),
                //视图缩放等级
                zoom: 11
            })
        });
    };
</script>

</html>

效果如下图所示：

摇曳甜梨

关注

10
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
OpenLayers调用最新WMTS服务遥感影像

OpenLayers是一个专为WebGIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问，目前最新版本为8.2.0。WMTS（Web Map Tile Service）是最常用的网络地图服务之一，基于OGC的开放标准，可以兼容常用的桌面GIS和WebGIS框架。，时效性为2023年中期，超过了天地图和谷歌地球，也是奥维互动地图的默认影像地图。目前，网上最新的遥感影像是四维地球影像
复制链接

扫一扫