vue中使用OpenLayers(一)：引入谷歌地圖

第一步

npm install ol

package.json 中可以看到

第二步

引入

import "ol/ol.css";

import Map from "ol/Map";

import Feature from "ol/Feature";

import View from "ol/View";

import XYZ from "ol/source/XYZ";

import Point from "ol/geom/Point";

import { fromLonLat } from "ol/proj";//這里要注意

openlayers不僅僅是可以繪制地圖，還可以繪制很多的圖形和定位，所有都需要換算自己的格式，所以按照自己的需求 引入 fromLonLat 。

第三步

html中，這里要設置一個id

methods中

initPointMap() {

this.map = new Map({

target: "mainDiv",//這里是填的是上面的id

view: new View({

center: fromLonLat([119.60753817138888, 30.49043631527778]),//地圖加載的中心點

projection: "EPSG:3857",

zoom: 12//加載地圖的層級

}),

layers: [

new TileLayer({

source: new XYZ({

url: "**********************",//這里是引用的本地

wrapX: true

})

})

]

});

},//繪制第一層地圖

總結

以上是生活随笔為你收集整理的vue全局引入openlayers_vue中使用OpenLayers（一）：引入谷歌地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。