解决OpenLayers加载鹰眼图时出现的闪烁空白问题

问题描述

上次使用OpenLayers加载了天地图，但是在加载OverviewMap时，会出现视图闪烁，要么鹰眼图空白，要么主视图空白等问题。

分析原因

刚一开始不知道是什么原因，后来猛然发现鹰眼图和主视图的Layers使用的是相同图层，为了判断是不是使用相同图层造成的，在OverviewMap的Layers上重新new了两个图层，居然解决了这个问题。

解决方案

避免鹰眼图和主视图使用相同图层(Layers)，但是其图层使用相同的数据源(layer->source)不会有影响。

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { XYZ } from "ol/source";
import { Tile as TileLayer } from "ol/layer";
import { OverviewMap, defaults } from "ol/control";
export default {
  data() {
    return {
      map: null,
      tianMapUrl:
        "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的天地图key",
      tianMapUrl2:
        "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=你的天地图key"
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    /**
     * @description 地图初始化
     */
    initMap() {
      // 天地图
      var tianMapLayer = new TileLayer({
        source: new XYZ({
          url:this.tianMapUrl,
          wrapX: false
        })
      });

      // 天地图注记
      var tianMapLayer2 = new TileLayer({
        source: new XYZ({
          url:this.tianMapUrl2,
        })
      });
      this.map = new Map({
        target: "mapDiv",
        layers: [tianMapLayer, tianMapLayer2],
        view: new View({
          projection: "EPSG:4326",
          center: [104.06531800244139, 30.65852484539117],
          zoom: 8
        }),
        controls: defaults().extend([
          new OverviewMap({
          	// 不使用主视图使用过的图层
            layers: [
              new TileLayer({
                source: new XYZ({
                  url:this.tianMapUrl,
                  wrapX: false
                })
              }),
              new TileLayer({
                source: new XYZ({
                  url:this.tianMapUrl2
                })
              })
            ],
            collapsed: false,
            view: new View({
              projection: "EPSG:4326",
              center: [104.06531800244139, 30.65852484539117]
              // zoom: 8
            })
          })
        ])
      });
    }
  }
};
</script>