一:
npm install ol
二:使用:
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import * as olProj from "ol/proj";
import XYZ from "ol/source/XYZ";
import "ol/ol.css";
this.myMap = new Map({
target: "map", // dom元素的id
layers: [
new TileLayer({
source: new XYZ({
// 官网中的OSM地图不显示,这里用谷歌地图
url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
}),
}),
],
view: new View({
// 投影为墨卡托格式,经纬度需要转换
center: olProj.fromLonLat([116.3, 39.9]),
zoom: 12,
}),
});
三、效果