openlayer加载arcgis切片服务

<template>
    <div id="map" class="map" ref="domRef"></div>
</template>
<script setup lang="ts">
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import { defaults as defaultControls } from 'ol/control';
import { onMounted, ref } from 'vue';
import { useMapStore } from '@/store';

import XYZ from 'ol/source/XYZ';
import TileGrid from 'ol/tilegrid/TileGrid';
const maps = ref<Map>();
const domRef = ref();
const mapStore = useMapStore();


const tileGrid = new TileGrid({
    //原点
    origin: [
        -2.0037508342787E7,
        2.0037508342787E7
    ],
    tileSize: 256,
    //范围
    extent: [
        -2.0037507067161843E7,
        -1.819812769412998E7,
        2.0037507067161843E7,
        2.8686510967305996E7,
    ],
    //各级分辨率
    resolutions: [
        156543.03392800014,
        78271.51696399994,
        39135.75848200009,
        19567.87924099992,
        9783.93962049996,
        4891.96981024998,
        2445.98490512499,
        1222.992452562495,
        611.4962262813797,
        305.74811314055756,
        152.87405657041106,
        76.43702828507324,
        38.21851414253662,
        19.10925707126831,
        9.554628535634155,
        4.77731426794937,
        2.388657133974685,
        1.1943285668550503,
        0.5971642835598172,
        0.29858214164761665
    ]
})
const layer = new TileLayer({
    source: new XYZ({
        tileGrid,
        projection: "EPSG:3857",
        url: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'

    }),
});
layer.set("id", '午夜蓝')
const layers = [layer];
onMounted(() => {

    let map = new Map({
        target: domRef.value,
        layers,
        view: new View({
            center: [113.24981689453125, 23.126468438108688], //视图中心位置,
            projection: "EPSG:4326",
            zoom: 12
        }),
        controls: defaultControls({
            attribution: true,//禁用右下角的地图属性组件
            rotate: false,//禁用旋转组件 alt+shift true旋转交互时会有一个旋转控件显示出来
            zoom: false//禁用右上角缩放组件
        })
    });
    maps.value = map;
    // 
    mapStore.setMap(map);

})
</script>
<style scoped lang="less">
#map {
    width: 100%;
    height: 100%
}
</style>