openlayers6 使用ol.map>ol.view center屬性無效及解決方案
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;
}
—————————————————————————————————————
好了 闆闆整整
相關文章
- js在IE下修改圖片的src屬性無效解決方案JS
- css中span元素的width屬性無效果原因及多種解決方案CSS
- swiper loop:true引發繫結dom的click事件無效及解決方案OOP事件
- vue tsx 原生屬性報錯解決方案Vue
- lombok 註解無效 已解決Lombok
- Volatile不保證原子性及解決方案
- 移動端ios:active偽類無效的相容解決方案iOS
- PowerDesigner16中的物件無效,不允許有擴充套件屬性 問題的解決物件套件
- Delphi 6.0中屬性編輯器的解決方案 (轉)
- 自定義指令在 el-input 節點上無效解決方案
- vue命令無效的解決方法Vue
- SQL物件名無效的解決SQL物件
- 有無後效性
- 績效管理整體解決方案(轉)
- 為什麼<meta name="viewport">的inital-scale屬性無效View
- 資料夾隱藏屬性無法修改的解決方法
- After Effects 圖層屬性及屬性組結構詳解
- a:active在ios上無效解決方法iOS
- 解決XML下無效字元的問題XML字元
- 使用 Dingo 後 Handler 中 render 方法無效的解決辦法Go
- 介面冪等性解決方案
- ios 企業應用"無法安裝應用程式 因為證書無效"的解決方案iOS
- 無線安全八大主流技術及解決方案(轉)
- 解決mysqld_multi stop命令無效問題MySql
- Ehcahe操作無效,希望各位能幫忙解決
- Flutter GetX Tag 屬性使用詳解Flutter
- display的flex屬性使用詳解Flex
- Android taskAffinity屬性使用詳解Android
- 應用程式池屬性詳解及配置
- Java限流及常用解決方案Java
- iPhone 6/Plus常見使用問題及解決方案iPhone
- Q9使用常見問題及解決方案
- 淺談Flex佈局的屬性及使用Flex
- Swift中的迴圈強引用 【使用無主引用以及隱式解析可選屬性解決】Swift
- cookie時效無限延長方案Cookie
- 快取穿透詳解及解決方案快取穿透
- docker ubuntu 的vi,nano命令無法使用的解決方案DockerUbuntuNaN
- 室外無線覆蓋解決方案