arcgis JavaScript api 实现加载不同坐标系的底图和三维服务

gislaozhang

于 2024-06-25 17:53:18 发布

阅读量223

点赞数 2

分类专栏： JS 三维文章标签： arcgis javascript 前端

本文链接：https://blog.csdn.net/gislaozhang/article/details/139965402

版权

JS 同时被 2 个专栏收录

20 篇文章 3 订阅

订阅专栏

三维

12 篇文章 8 订阅

订阅专栏

需求：

底图服务和三维场景服务坐标系不一致，如何使用arcgis JavaScript api进行加载。如果直接加载会报切片方案不一致错误，“The spatial reference of this scene layer is incompatible with the spatial reference”

例如加载4547的三维白膜服务和天地图4490的底图服务。

思路：

让底图通过高版本影像切片所具备的新特性去适配三维服务，从而实现2个坐标系不同的底图和三维场景服务也能正常加载。

①发布一个手动缓存的影像切片服务，不切片，该影像数据需要为全球范围的数据，例如，全球的dem，发布之后的效果。

②在server admin找到刚刚发布的影像切片服务，给其加上minlod和maxlod两个参数，其中maxlod的值和底图切了多少级保持一致。

③前端加载。

<html lang="en">
 
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>
    4490tianditu(img)+4547scenelayer
  </title>
 
  <link rel="stylesheet" href="https://js.arcgisonline.cn/4.29/esri/themes/dark/main.css" />
  <script src="https://js.arcgisonline.cn/4.29/init.js"></script>
 
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
 
  <script>
    require([
      "esri/Map",
      "esri/Basemap",
      "esri/views/SceneView",
      "esri/layers/ImageryTileLayer",
      "esri/geometry/SpatialReference",
      "esri/layers/SceneLayer",
      "esri/config",
      "esri/widgets/LayerList",
      "esri/widgets/BasemapGallery",
      "esri/widgets/BasemapLayerList",
      "esri/widgets/Expand",
    ], (Map, Basemap, SceneView, ImageryTileLayer, SpatialReference, SceneLayer, esriConfig, LayerList, BasemapGallery, BasemapLayerList, Expand) => {
      const spatialReference = new SpatialReference({
        wkid: 4547
      });
      const img4490_basemap = new Basemap({
        baseLayers: [
          new ImageryTileLayer({
            url: "https://ncportal.geoscene.cn/server/rest/services/tianditu_baseLayer_4490/ImageServer",
            title: "天地图-影像",
          })
        ],
        referenceLayers: [
          new ImageryTileLayer({
            url: "https://ncportal.geoscene.cn/server/rest/services/tianditu_referenceLayer_4490/ImageServer",
            title: "天地图-影像注记",
          })
        ],
        spatialReference,
        thumbnailUrl: "https://www.arcgis.com/sharing/rest/content/items/7c55676b41e74f4e928db1d158e59a86/info/thumbnail/thumbnail1629179809862.png",
        title: "天地图-影像（CGCS2000）"
      });
      const sceneLayer = new SceneLayer({
        url: "https://ncportal.geoscene.cn/server/rest/services/Hosted/hyszbaimo4547/SceneServer/layers/0"
      });
      const map = new Map({
        basemap: img4490_basemap,
        layers: [sceneLayer],
        ground: {
          surfaceColor: [40, 75, 58]
        }
      });
      const view = new SceneView({
        container: "viewDiv",
        map: map,
        spatialReference,
        viewingMode: "local",
        camera: {
          position: {
            x: 521066.30151,
            y: 3372094.63476,
            z: 5243.280,
            spatialReference: 4547
          },
          heading: 0.00,
          tilt: 54.74
        }
      });
      view.ui.add(
        [
          new Expand({
            content: new BasemapLayerList({
              view: view
            }),
            view: view,
            expandIcon: "basemap",
            group: "top-left"
          })
        ],
        "top-left"
      );
      view.ui.add(
        [
          new Expand({
            content: new LayerList({
              view: view
            }),
            view: view,
            expandIcon: "list",
            group: "top-left"
          })
        ],
        "top-left"
      );
      esriConfig.request.interceptors.push({
        urls: /ImageServer\/tile/,
        before: function(params) {
          const urlRegex = /(ImageServer\/tile\/[^\s]+)/g;
          const urlParts = params.url.match(urlRegex);
          const xyz = urlParts[0].split('/');
          if (params.url.indexOf("baseLayer") > 0) {
            params.url = `https://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=img&STYLE=default&FORMAT=tiles&TILEMATRIXSET=c&TILEMATRIX=${parseInt(xyz[2]) + 1}&TILEROW=${xyz[3]}&TILECOL=${xyz[4]}&tk=4267820f43926eaf808d61dc07269beb`
          } else {
            params.url = `https://t0.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cia&STYLE=default&FORMAT=tiles&TILEMATRIXSET=c&TILEMATRIX=${parseInt(xyz[2]) + 1}&TILEROW=${xyz[3]}&TILECOL=${xyz[4]}&tk=4267820f43926eaf808d61dc07269beb`
          }
        }
      });
    });
  </script>
</head>
 
<body>
  <div id="viewDiv"></div>
</body>
 
</html>

效果图：

天地图矢量底图也是类似的思路：

<html lang="en">
 
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>
    4490tianditu(vec)+4547scenelayer
  </title>
 
  <link rel="stylesheet" href="https://js.arcgisonline.cn/4.29/esri/themes/dark/main.css" />
  <script src="https://js.arcgisonline.cn/4.29/init.js"></script>
 
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
 
  <script>
    require([
      "esri/Map",
      "esri/Basemap",
      "esri/views/SceneView",
      "esri/layers/ImageryTileLayer",
      "esri/geometry/SpatialReference",
      "esri/layers/SceneLayer",
      "esri/config",
      "esri/widgets/LayerList",
      "esri/widgets/BasemapGallery",
      "esri/widgets/BasemapLayerList",
      "esri/widgets/Expand",
    ], (Map, Basemap, SceneView, ImageryTileLayer, SpatialReference, SceneLayer, esriConfig, LayerList, BasemapGallery, BasemapLayerList, Expand) => {
      const spatialReference = new SpatialReference({
        wkid: 4547
      });
      const vec4490_basemap = new Basemap({
        baseLayers: [
          new ImageryTileLayer({
            url: "https://ncportal.geoscene.cn/server/rest/services/tianditu_baseLayer_4490/ImageServer",
            title: "天地图-矢量",
          })
        ],
        referenceLayers: [
          new ImageryTileLayer({
            url: "https://ncportal.geoscene.cn/server/rest/services/tianditu_referenceLayer_4490/ImageServer",
            title: "天地图-矢量注记",
          })
        ],
        spatialReference,
        thumbnailUrl: "https://www.arcgis.com/sharing/rest/content/items/24f2862ddba74de88bb5e99328b7db29/info/thumbnail/thumbnail1629179208957.png",
        title: "天地图-矢量（CGCS2000）"
      });
      const sceneLayer = new SceneLayer({
        url: "https://ncportal.geoscene.cn/server/rest/services/Hosted/hyszbaimo4547/SceneServer/layers/0"
      });
      const map = new Map({
        basemap: vec4490_basemap,
        layers: [sceneLayer],
        ground: {
          surfaceColor: [174, 201, 241]
        }
      });
      const view = new SceneView({
        container: "viewDiv",
        map: map,
        spatialReference,
        viewingMode: "local",
        camera: {
          position: {
            x: 521066.30151,
            y: 3372094.63476,
            z: 5243.280,
            spatialReference: 4547
          },
          heading: 0.00,
          tilt: 54.74
        }
      });
      view.ui.add(
        [
          new Expand({
            content: new BasemapLayerList({
              view: view
            }),
            view: view,
            expandIcon: "basemap",
            group: "top-left"
          })
        ],
        "top-left"
      );
      view.ui.add(
        [
          new Expand({
            content: new LayerList({
              view: view
            }),
            view: view,
            expandIcon: "list",
            group: "top-left"
          })
        ],
        "top-left"
      );
      esriConfig.request.interceptors.push({
        urls: /ImageServer\/tile/,
        before: function(params) {
          const urlRegex = /(ImageServer\/tile\/[^\s]+)/g;
          const urlParts = params.url.match(urlRegex);
          const xyz = urlParts[0].split('/');
          if (params.url.indexOf("baseLayer") > 0) {
            params.url = `https://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=c&TILEMATRIX=${parseInt(xyz[2]) + 1}&TILEROW=${xyz[3]}&TILECOL=${xyz[4]}&tk=4267820f43926eaf808d61dc07269beb`
          } else {
            params.url = `https://t0.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=c&TILEMATRIX=${parseInt(xyz[2]) + 1}&TILEROW=${xyz[3]}&TILECOL=${xyz[4]}&tk=4267820f43926eaf808d61dc07269beb`
          }
        }
      });
    });
  </script>
</head>
 
<body>
  <div id="viewDiv"></div>
</body>
 
</html>