关于地图openlayers layers 使用TileArcGISRest发布到环境后图片空白改用 XYZ，以及多个layers叠加

1.原先
mapLayer = new TileLayer({
visible: true,
source: new TileArcGISRest({
url: ‘’
})
});
所有图片都报了500的错误然后点击还是能够选择到地理位置
2. 几经波折后改为xyz切片

<template>
  <div class="map-show-page">
    <!-- 地图 -->
    <div
      ref="MapShowRef"
      class="map"
    />

    <!-- 经纬度的显示
    <div class="click-center">
      {{ clickCenter }}
    </div> -->
  </div>
</template>

<script>
import 'ol/ol.css';
import { Map, View,Feature} from 'ol';
import TileGrid from 'ol/tilegrid/TileGrid';
import TileLayer from 'ol/layer/Tile';
import {  XYZ,TileArcGISRest } from 'ol/source';
import { Vector as VectorLayer   } from 'ol/layer';
import {  Vector as VectorSource   } from 'ol/source';
import {Style,Icon} from 'ol/style';
import { Point } from 'ol/geom';
import mapConfig from './config/map-config';
export default {
  name: 'MapShow',
  components: {
  },
  props: ['inputData'],
  data() {
    return {
      mapData: null,
      mapCenter: [117.792450 ,26.397300],
      // mapCenter: [118.089425, 24.479883],
      mapZoom: 20,
      clickCenter: [0, 0],
      defaultIconImage: require('./images/red_mark.png'),
      streetMap: 3,
      sl: null,
      sx: null,
      iconLayer: null
    };
  },
  watch: {
    inputData(newV) {
      console.log(newV);
    },
  },
  mounted() {
    this.initMap(); // 初始化地图
  },
  methods: {
    /**
     * 初始化地图
     */
    initMap() {
      	var tileGrid = new TileGrid({
        tileSize: 256,
        origin: [-180.0, 90.0],
        //地图服务中Full Extent
        extent: [117.49909311532974, 26.051648408174515, 118.15577566623688, 26.725468933582306],
        //地图服务中每个layers Resolution
        resolutions: [
          5.36441802978515E-06,
          2.68220901432155E-06,
          1.341104507446289E-6]
      });
      // 矢量注记
      this.sl = new TileLayer({
        id: 'cva',  
       
        source: new XYZ({
          url: '服务地址/tile/{z}/{y}/{x}',
          projection: 'EPSG:4490',
          tileGrid: tileGrid,
        }),
        //设置层级 注记显示在地图上面
        zIndex: 10
      });
     
      // 地图
      this.base = new TileLayer({
        id: 'base',   
        source: new XYZ({
          url: '服务地址/tile/{z}/{y}/{x}',
          projection: 'EPSG:4490',
          tileGrid: tileGrid,
        }),
        zIndex: 9
      });
      const mapContainer = this.$refs.MapShowRef;
      // const fullScreen = new olControl.FullScreen(); // 全屏控件，显示在右上角
      const map = new Map({
        layers: [this.sl ,this.base  ],
        // controls: [fullScreen],
        target: mapContainer,
        view: new View({
          projection: 'EPSG:4326',
          center: this.mapCenter,
          // minZoom: 18,
          moveFlag: true,
          rotation: 0,
          popupOffset: [0, 0],
          zoom: 20,
          // maxZoom: 20
        })
      });
      // 添加鼠标点击事件
      map.on('click', (evt) => this.mapClick(evt));
      // 添加鼠标经过事件
      // map.on('pointermove', (evt) => this.mapPointerMove(evt));
      this.mapData = map;
    },
    // 获取当前位置
    getLocation() {
      new Promise((resolve, reject) => {
        navigator.geolocation.getCurrentPosition((pos) => {
          const coords = pos.coords || {};
          const { latitude, longitude } = coords;
          const position = wgs84ToGCJ02(longitude, latitude);
          this.mapCenter = position;
        }, (e) => {
          reject(e);
        }, {
          timeout: 10000,
          maximumAge: 10000
        });
      });
    },
    /**
     * 地图点击
     */
    mapClick(evt) {
      // console.log(evt);
      this.clickCenter = evt.coordinate; // 获取点击的中心点
      if(evt.coordinate) {
        this.$emit('clickData',evt.coordinate);
      }
      this.removeIcon();
      // 创建矢量容器
      const vectorSource = new VectorSource({});
      // 创建图标特性
      const iconFeature = new Feature({
        type: 'icon',
        name: 'mapIconMark',
        geometry: new Point(evt.coordinate)
      });
      // 图标特性添加到矢量容器
      vectorSource.addFeature(iconFeature);
      // 创建矢量层
      this.iconLayer = new VectorLayer({
        className: 'map-icon-mark',
        source: vectorSource,
        zIndex: 100000,
        // 创建图标样式
        style: new Style({
          image: new Icon({
            src: require('@/assets/images/blueLocation.svg'),
            scale: 0.1
          }),
        })
      });
      this.mapData.addLayer(this.iconLayer);
    },
    // 取消图标
    removeIcon() {
		  if (this.iconLayer) {
		  	// 移除图层
		    this.mapData.removeLayer(this.iconLayer);
		    this.iconLayer = null;
		  }
    },
    /**
     * 鼠标划过地图事件
     */
    mapPointerMove(evt) {
      if (evt.dragging) {
        return false;
      }
    },
   
    
  }
};
</script>

<style scoped lang="less">
  .map-show-page {
    position: relative;
    width: 48vw;
    height: 48vh;

    .map {
      width: 100%;
      height: 100%;
    }

    .click-center {
      position: absolute;
      top: 10px;
      right: 60px;
      padding: 10px;
      z-index: 2;
      background: #000;
      color: #fff;
      border-radius: 4px;
    }

    .show-btn-block {
      position: absolute;
      display: flex;
      flex-flow: column;
      top: 5px;
      left: 5px;
      z-index: 2;

      .row {
        margin-bottom: 5px;
      }
    }
  }
</style>

 

3.openlayser 带有的projection是4326和3857
但是天地图等服务偶尔projection不一样，例如4490，具体看服务里面的地址：Spatial Reference
所以要使用proj4注入
方法：
npm install proj4
新建4490.js文件
import proj4 from ‘proj4’;
import {register} from ‘ol/proj/proj4’;
import { Projection,addProjection} from ‘ol/proj’;
proj4.defs(‘EPSG:4490’,‘+proj=longlat +ellps=GRS80 +no_defs’);
register(proj4);
var projection = new Projection({
code: ‘EPSG:4490’,
units: ‘degrees’,
axisOrientation: ‘neu’
});
projection.setExtent([-180, -90, 180, 90]);
projection.setWorldExtent([-180, -90, 180, 90]);
addProjection(projection);
main 引入4490.js文件