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
})
})
]
});
},//繪制第一層地圖