OpenLayers是一个专为Web GIS开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问。
安装OpenLayers
npm i openlayers -s
集成使用
全局引入并注册成全局变量
import ol from 'openlayers';
import 'openlayers/css/ol.css';
Vue.prototype.$ol = ol;
在组件中使用
createMap() {
let ol = this.$ol;
new ol.Map({
layers: [
new ol.layer.Tile({
opacity: 1,
source: new ol.source.XYZ({
projection: "EPSG:4326",
url: "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png"
})
})
],
view: new ol.View({
center: [0, 0],
zoom: 2,
projection: "EPSG:4326"
}),
target: "map"
});
}
最后在 mounted()
加载调用即可。