快捷導(dǎo)航

vue集成openlayers問題

更新時(shí)間：2023年01月23日 13:00:22 作者：呱呱?.?

這篇文章主要介紹了vue集成openlayers問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue集成openlayers

下載依賴

cnpm i -S ol

創(chuàng)建地圖文件

?<div class="map"></div>

按需引入相應(yīng)的API，具體查看官方文檔

<script>
import Map from "ol/Map";
import View from "ol/View";
// 添加圖層
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import TileWMS from "ol/source/TileWMS.js";
// 格式化地理坐標(biāo)
import { fromLonLat } from "ol/proj.js";
export default {
? data() {
? ? return {
? ? ? map: null,
? ? ? //后臺服務(wù)器地址
? ? ? urlRoot: "http://193.112.110.27:8080/geoserver/gee/wms?",
? ? };
? },
? mounted() {
? ? this.init();
? },
? methods: {
? ? init() {
? ? ? // ?經(jīng)緯度轉(zhuǎn)化
? ? ? var center = fromLonLat([101.34272, 23.6042484]);
? ? ? // ?自定義圖層
? ? ? this.layers = [
? ? ? ? new TileLayer({
? ? ? ? ? source: new TileWMS({
? ? ? ? ? ? url: this.urlRoot, //圖層地址
? ? ? ? ? ? params: { LAYERS: "fangchenggang:other_sea" }, //圖層名稱
? ? ? ? ? ? serverType: "geoserver", //后臺服務(wù)器
? ? ? ? ? ? zIndex: 2 //圖層層級
? ? ? ? ? })
? ? ? ? }),
? ? ? ? new TileLayer({
? ? ? ? ? source: new TileWMS({
? ? ? ? ? ? url: this.urlRoot,
? ? ? ? ? ? params: { LAYERS: "fangchenggang:realm" },
? ? ? ? ? ? serverType: "geoserver"
? ? ? ? ? }),
? ? ? ? ? zIndex: 3
? ? ? ? }),
? ? ? ? new TileLayer({
? ? ? ? ? source: new TileWMS({
? ? ? ? ? ? url: this.urlRoot,
? ? ? ? ? ? params: { LAYERS: "fangchenggang:stockpile" },
? ? ? ? ? ? serverType: "geoserver"
? ? ? ? ? }),
? ? ? ? ? zIndex: 3
? ? ? ? }),
? ? ? ? new TileLayer({
? ? ? ? ? source: new TileWMS({
? ? ? ? ? ? url: this.urlRoot,
? ? ? ? ? ? params: { LAYERS: "fangchenggang:road" },
? ? ? ? ? ? serverType: "geoserver"
? ? ? ? ? }),
? ? ? ? ? zIndex: 3
? ? ? ? }),
? ? ? ? new TileLayer({
? ? ? ? ? source: new TileWMS({
? ? ? ? ? ? url: this.urlRoot,
? ? ? ? ? ? params: { LAYERS: "fangchenggang:railway" },
? ? ? ? ? ? serverType: "geoserver"
? ? ? ? ? ? //crossOrigin: 'anonymous'
? ? ? ? ? }),
? ? ? ? ? zIndex: 3
? ? ? ? }),
? ? ? ? new TileLayer({
? ? ? ? ? source: new TileWMS({
? ? ? ? ? ? url: this.urlRoot,
? ? ? ? ? ? params: { LAYERS: "cesium:storage_yard" },
? ? ? ? ? ? serverType: "geoserver"
? ? ? ? ? }),
? ? ? ? ? zIndex: 3
? ? ? ? })
? ? ? ];
? ? ? // ?加載地圖
? ? ? this.map = new Map({
? ? ? ? target: "map", //地圖容器
? ? ? ? layers: [ ? ? ? ?
? ? ? ? //加載天地圖天地圖
? ? ? ? new TileLayer({
? ? ? ? ? source: new XYZ({
? ? ? ? ? ? url: "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png"
? ? ? ? ? }),
? ? ? ? ? zIndex: 1
? ? ? ? })],
? ? ? ? view: new View({
? ? ? ? ? projection: "EPSG:3857",
? ? ? ? ? //初始化地圖中心
? ? ? ? ? center: center,
? ? ? ? ? zoom: 2,
? ? ? ? ? // 鏡頭
? ? ? ? ? maxZoom: 18,
? ? ? ? ? minZoom: 13
? ? ? ? }),
? ? ? ? logo: false
? ? ? });
? ? ? //添加圖層
? ? ? this.map.addLayer(layers);
? ? }
? }
};
</script>

其他API

從地圖中刪除給定的疊加層。

this.map.removeLayer(layer);

設(shè)置圖層顯示或隱藏

this.layers.road.setOpacity(0)

vue openlayers繪制數(shù)據(jù)時(shí)鼠標(biāo)位置偏移問題

問題：將地圖集成到現(xiàn)有的vue項(xiàng)目中，使用測量/繪制工具，鼠標(biāo)位置和繪制的實(shí)際位置發(fā)生偏移。

如圖，

正常應(yīng)該是鼠標(biāo)位置和實(shí)際繪制位置在同一點(diǎn)，圖：

分析：我能想到可能造成這個(gè)問題的原因有：

顯示器縮放比例不是100%；
地圖dom被拉伸；
組件沖突導(dǎo)致。

解決方案

我的系統(tǒng)是項(xiàng)目本身對body設(shè)置了縮放，因此在瀏覽器大小和預(yù)置大小不一致時(shí)會對body整體進(jìn)行縮放，從而導(dǎo)致map元素被縮放。

body此時(shí)的樣式：

至此，問題找到，取消這個(gè)縮放即可得到正確的鼠標(biāo)定位。

反思一下，地圖出現(xiàn)這個(gè)問題是因?yàn)榈貓D數(shù)據(jù)的展示是憑借canvas實(shí)現(xiàn)的，地理數(shù)據(jù)和展示效果之間的交互是依靠的像素坐標(biāo)和經(jīng)緯度坐標(biāo)之間的轉(zhuǎn)換，而地圖元素的縮放破壞了這個(gè)轉(zhuǎn)換關(guān)系，所以造成了鼠標(biāo)位置和實(shí)際繪制位置的偏移。