openlayers6 使用ol.map>ol.view center屬性無效及解決方案

少年啦1997發表於2020-10-09

openlayers6 使用ol.map>ol.view center屬性無效及解決方案

原因分析:

The initial center for the view. If a user projection is not set, the coordinate system for the center is specified with the projection option. Layer sources will not be fetched if this is not set, but the center can be set later with #setCenter.

以上是來自ol api官方文件的原話,大致意思為如果不設定那麼圖層就不會提取,也就是頁面會一片空白。
在這裡插入圖片描述
很明顯這不是center失效的原因?。
那麼再來看看這段:

The default projection is Spherical Mercator (EPSG:3857).

這裡告知我們ol.view 的預設投射格式是EPSG:3857。但是日常我們使用的經緯度格式是EPSG:4326。所以你給center設定成[109,34]這種當然是沒有效果的,至於為什麼會使用[109,34],相信大家也是深受csdn中一些半吊子的荼毒。很多帖子是直接這樣設定的。也沒有設定ol.view的projection為EPSG:4326,所以問題解決了,設定projection為EPSG:4326就行了。但是得到結果如下:
在這裡插入圖片描述
很明顯檢視已經變形了,這不是我們想要的結果,經過深思熟慮還是想辦法將EPSG:4326轉成EPSG:3857吧,估計是ol.map的適配問題吧(有清楚的跪求告知)。
使用ol/proj中的transform進行轉換,至於為什麼我知道,多翻文件。最終程式碼如下:

<template>
  <div id="ol-container"></div>
</template>
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import {transform} from "ol/proj"
export default {
  name: "OlMap",
  mounted() {
    this.initOl();
  },
  methods: {
    initOl() {
      this.map = new Map({
        target: "ol-container",
        layers: [
          new TileLayer({
            source: new XYZ({
              url:
                "http://t3.tianditu.com/DataServer?T=img_w&tk=我的key差點暴露- - ·&x={x}&y={y}&l={z}",
            }),
          }),
        ],
        view: new View({
          center: transform([109, 34], 'EPSG:4326', 'EPSG:3857'),
            // center:[109,34],
          zoom: 2,
          maxZoom: 15,
        //   projection:'EPSG:4326'
        }),
      });
    },
  },
};
#ol-container {
  width: 100%;
  height: 100vh;
}

在這裡插入圖片描述

—————————————————————————————————————
好了 闆闆整整

相關文章