...

by Zengjing 2019-03-21

Vue开发札记:当OpenLayers遇上Vue

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() 加载调用即可。

收获点赞: 0

评论

...