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;
}
—————————————————————————————————————
好了 闆闆整整
相關文章
- css中span元素的width屬性無效果原因及多種解決方案CSS
- vue tsx 原生屬性報錯解決方案Vue
- swiper loop:true引發繫結dom的click事件無效及解決方案OOP事件
- Volatile不保證原子性及解決方案
- lombok 註解無效 已解決Lombok
- 自定義指令在 el-input 節點上無效解決方案
- vue命令無效的解決方法Vue
- After Effects 圖層屬性及屬性組結構詳解
- 有無後效性
- 使用 Dingo 後 Handler 中 render 方法無效的解決辦法Go
- Intellij IDEA 使用spring-boot-devtools無效解決辦法一IntelliJIdeaSpringbootdev
- Idea中Springboot熱部署無效解決方法IdeaSpring Boot熱部署
- 介面冪等性解決方案
- display的flex屬性使用詳解Flex
- Flutter GetX Tag 屬性使用詳解Flutter
- 淺談Flex佈局的屬性及使用Flex
- Android studio 使用ssh方式clone失敗及解決方案Android
- Java限流及常用解決方案Java
- 解決mysqld_multi stop命令無效問題MySql
- netstat -ano檢視埠號無效解決方法
- [bug]”System.InvalidProgramException:公共語言執行時檢測到無效程式“解決方案Exception
- Hexo cdn.jsdelivr.net 等部分CDN引用無效的一種低成本解決方案HexoJSVR
- 快取穿透詳解及解決方案快取穿透
- docker ubuntu 的vi,nano命令無法使用的解決方案DockerUbuntuNaN
- java 執行緒淺解02[方法及屬性]Java執行緒
- 室外無線覆蓋解決方案
- Arch-gnome下網頁只能新建視窗開啟,滾輪無效的解決方案網頁
- CSS字型屬性和文字屬性詳解CSS
- cookie時效無限延長方案Cookie
- centOS修改主機名,重啟後無效解決CentOS
- IDEA Spring-boot-devTools 無效解決辦法二IdeaSpringbootdev
- java.lang.OutOfMemoryError及解決方案JavaError
- 跨域問題及解決方案跨域
- 粘包拆包及解決方案
- Bash漏洞檢測及解決方案
- 盒子屬性,及浮動
- goland中npm無法使用的問題及解決方法GoLandNPM
- 升級到macOS Big Sur後,EasyConnect 無法使用解決方案Mac