优化OpenLayers加载ArcGIS切片服务的解决方案_openlayer加载4490地图-优快云博客

本文介绍如何将OpenLayers源从加载特定EPSG:4490坐标系统的切片服务转换为使用ArcGIS World_Topo_Map服务，并提供了相应的代码调整示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

优化Openlayers加载切片服务(EPSG:4490)

使用 TileArcGISRest 加载服务时地址如下:

https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/export?F=image&FORMAT=PNG32&TRANSPARENT=true&SIZE=256%2C256&BBOX=-11271098.442818949%2C3913575.8482010234%2C-11114555.408890909%2C4070118.8821290643&BBOXSR=3857&IMAGESR=3857&DPI=90

替换后的地址为:

https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/9/176/88

修改后的代码:

import { XYZ } from "ol/source";
import TileGrid from "ol/tilegrid/TileGrid";
export default class CustomTileArcGisSource extends XYZ {
  constructor(options: any) {
    options.crossOrigin = "*";
    options.projection = "EPSG:4490";
    super(options);
    this.createXYZ(options);
  }
  async createXYZ(options: any) {
    const serverUrl = options.url;
    if (typeof serverUrl === "undefined") {
      return;
    }
    const response = await fetch(`${serverUrl}?f=pjson`).then((res) => {
      return Promise.resolve(res.json());
    });
    const {
      tileInfo: { lods, origin },
      fullExtent,
    } = response;
    const resolutions = lods.map((value: { [x: string]: any }) => {
      return value["resolution"];
    });
    const mapOrigin = [origin["x"], origin["y"]];
    const mapFullExtent = [
      fullExtent["xmin"],
      fullExtent["ymin"],
      fullExtent["xmax"],
      fullExtent["ymax"],
    ];
    this.tileGrid = new TileGrid({
      tileSize: 256,
      origin: mapOrigin,
      extent: mapFullExtent,
      resolutions: resolutions,
    });
    const tileUrl = serverUrl.replace(
      "MapServer",
      "MapServer/tile/{z}/{y}/{x}"
    );
    this.setUrl(tileUrl);
  }
}