openlayer 加载arcgis 切片底图

引入

import TileGrid from "ol/tilegrid/TileGrid";

import TileLayer from "ol/layer/Tile";

import XYZ from "ol/source/XYZ";

import Map from "ol/Map";

import View from "ol/View";

 // 原点
      let origin = [-400.0, 400.0];
      // 地图范围 初始范围
      let initialExtent = [105.19711000000001, 31.31269, 111.52629, 39.97871];
      //
      let fullExtent = [105.4848, 31.7066, 111.2386, 39.5848];
      // 分辨率
      let resolutions = [
        0.014276766034981682, 0.00475892201166056, 0.00237946100583028,
        0.0017845957543727103, 0.00118973050291514, 5.9486525145757e-4,
        2.97432625728785e-4, 1.5228550437313792e-4, 7.614275218656896e-5,
        3.807137609328448e-5, 1.903568804664224e-5, 9.51784402332112e-6,
        4.75892201166056e-6, 2.37946100583028e-6,
      ];
      let tileGrid = new TileGrid({
        origin: origin,
        extent: initialExtent,
        resolutions: resolutions,
      });

      // 浅色底图
      let url1 = "/arcgis/rest/services/shanxi/shanxi/MapServer";
      const layers = [
        new TileLayer({
          source: new XYZ({
            projection: "EPSG:4326",
            tileGrid: tileGrid,
            url: `${url1}/tile/{z}/{y}/{x}`,
          }),
        }),
      ];

      let center = [this.user.centerx, this.user.centery];
      this.map = new Map({
        layers: layers,
        target: "mapId",
        view: new View({
          resolutions: resolutions,
          resolution: 0.00118973050291514,
          projection: "EPSG:4326",
          center: center,
          extent: fullExtent,
        }),
        controls: defaults({
          // 隐藏控件
          zoom: false,
          rotate: false,
          attribution: false,
        }),
      });

 // 原点
      let origin = [-400.0, 400.0];

 

// 地图范围 初始范围

     

 let initialExtent = [105.19711000000001, 31.31269, 111.52629, 39.97871]; 

      let fullExtent = [105.4848, 31.7066, 111.2386, 39.5848];

 // 分辨率
      let resolutions = [
        0.014276766034981682, 0.00475892201166056, 0.00237946100583028,
        0.0017845957543727103, 0.00118973050291514, 5.9486525145757e-4,
        2.97432625728785e-4, 1.5228550437313792e-4, 7.614275218656896e-5,
        3.807137609328448e-5, 1.903568804664224e-5, 9.51784402332112e-6,
        4.75892201166056e-6, 2.37946100583028e-6,
      ];

 

 let tileGrid = new TileGrid({
        origin: origin,
        extent: initialExtent,
        resolutions: resolutions,
      });


      // 浅色底图
      let url1 = "/arcgis/rest/services/shanxi/shanxi/MapServer";
      const layers = [
        new TileLayer({
          source: new XYZ({
            projection: "EPSG:4326",
            tileGrid: tileGrid,
            url: `${url1}/tile/{z}/{y}/{x}`,
          }),
        }),
      ];
      // 中心点
      let center = [this.user.centerx, this.user.centery];

      this.map = new Map({
        layers: layers,
        target: "mapId",
        view: new View({
          resolutions: resolutions,
          resolution: 0.00118973050291514,
          projection: "EPSG:4326",
          center: center,
          extent: fullExtent,
        }),
        controls: defaults({
          // 隐藏控件
          zoom: false,
          rotate: false,
          attribution: false,
        }),
      });