【高清影像如何调用】基于TMS/WMTS协议加载吉林一号切片影像套件

吉林一号网

已于 2024-04-16 10:22:17 修改

阅读量2k

点赞数

分类专栏：吉林一号数据文章标签： arcgis 时序数据库大数据

于 2024-04-16 10:19:41 首次发布

原文链接：https://www.jl1mall.com/forum/PostDetail?postId=202306152108000169890

版权

吉林一号数据专栏收录该内容

4 篇文章

订阅专栏

吉林一号切片影像套件的服务地址，坐标系投影为 Web Mercator（EPSG:3857），可按需选择TMS/WMTS协议的地址加载，其中TMS坐标原点在地图左下角，WMTS坐标原点在地图左上角。下面列举目前经过测试的基于TMS/WMTS协议的加载方式。

如何获取套件：

【免费底图调用】亚米级分辨率！Vue3和Openlayers加载“吉林一号“切片影像套件

直接看图

基于TMS协议地址的三种加载方式如下：

基于 OpenLayers / QGIS / Leaflet

https://api.jl1mall.com/getMap/{z}/{x}/{-y}?mk=图层MK&tk=套件TK&pro=项目id

基于 Cesium

https://api.jl1mall.com/getMap/{z}/{x}/{reverseY}?mk=图层MK&tk=套件TK&pro=项目id

基于 Mapbox

https://api.jl1mall.com/getMap/{z}/{x}/{y}?mk=图层MK&tk=套件TK&pro=项目id

一个完整的切片影像套件服务地址样例如下(以 Mapbox 为例)：

https://api.jl1mall.com/getMap/{z}/{x}/{y}?mk=226bf902749f1630bc25fc720ba7c29f&tk=0073bbg5c4266498b8f18225fe63a3fa

基于WMTS协议地址的两种加载方式如下：

基于GeoScene Portal / ArcGIS Portal / ArcGIS js api

https://api.jl1mall.com/getMap/{z}/{x}/{y}?mk=图层MK&tk=套件TK&pro=项目id&sch=wmts

基于OpenLayers

https://api.jl1mall.com/getMap?mk=图层MK&tk=套件TK&pro=项目id&sch=wmts

(注：斜体字部分是购买了企业版切片服务地址必填项，具体参数请到吉林一号网-遥感商城-切片影像套件→个人中心→我的项目→分享链接里获取)

示例说明（TMS）：

OpenLayers中加载

let map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.XYZ({
                projection: 'EPSG:3857',
                maxZoom: 18,
                minZoom: 0,
                url:'https://api.jl1mall.com/getMap/{z}/{x}/{-y}?mk=图层MK&tk=套件TK&pro=项目id '
            })
        })
    ],
    view: new ol.View({
        projection: 'EPSG:3857',
        center: ol.proj.fromLonLat([116.243, 40.042]),
        zoom: 10
    })
});

Cesium中加载（需要将上述地址中“-y”改为“reverseY”）

let layer=new Cesium.UrlTemplateImageryProvider({
    url: 'https://api.jl1mall.com/getMap/{z}/{x}/{reverseY}?mk=图层MK&tk=套件TK&pro=项目id '
});
this.cesiumViewer.imageryLayers.addImageryProvider(layer);

QGIS中加载

示例说明（WMTS）：

GeoScene Portal / ArcGIS Portal加载

在ArcGIS js api中加载

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Intro to MapView - Create a 2D map | Sample | ArcGIS Maps SDK for
      JavaScript 4.26
    </title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.26/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.26/"></script>
    <script>
      require(["esri/Map", "esri/views/MapView","esri/layers/BaseTileLayer"], (Map, MapView,BaseTileLayer) => {
	    const Layer = BaseTileLayer.createSubclass({
			properties: {
			  urlTemplate: "https://api.jl1mall.com/getMap/{z}/{x}/{y}?mk=图层MK&tk=套件TK&sch=wmts"
			},
			getTileUrl: function (z, y, x) {
			  return this.urlTemplate
				.replace("{z}", z)
				.replace("{x}", x)
				.replace("{y}", y);
			},
		  });
		  
	const layer = new Layer();
        const map = new Map({
           layers:[layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

在OpenLayers中加载

let projection = ol.proj.get ('EPSG:3857');
let projectionExtent = projection.getExtent();
let size = ol.extent.getWidth(projectionExtent) / 256;
let resolutions = new Array(18);
let matrixIds = new Array(18);
for (let z = 1; z < 19; ++z) {
	resolutions[z] = size / Math.pow(2, z);
	matrixIds[z] = z;
}
let map = new ol.Map({
 target: 'map',
 layers: [
 new ol.layer.Tile({
      source: new ol.source.WMTS({
                url:'https://api.jl1mall.com/getMap?mk=图层MK&tk=套件TK&pro=项目id&sch=wmts',
		format: 'webp',
		tileGrid: new ol.tilegrid.WMTSTileGrid ({
		      origin: ol.extent.getTopLeft(projectionExtent),
		      resolutions: resolutions,
		      matrixIds: matrixIds,
                }),
		wrapX: true,
	})
 })
 ],
 view: new ol.View({
     projection: 'EPSG:3857',
     center: ol.proj.fromLonLat([116.243, 40.042]),
     zoom: 10
 })
});

文章来源：吉林一号网