Vue集成openlayers

安装

首先，openlayers库已经废弃，开始改用ol库了

cnpm  install ol 

添加地图

在methods中添加地图初始化initMap()方法

import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import 'ol/ol.css'
...
methods:{
    ...
    initMap() {
      let center = proj.transformExtent([103.3, 35.5], "EPSG:4326", "EPSG:3857");
      new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
            })
          }),
          new TileLayer({
            source: new XYZ({
              url: "http://t2.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}"
            }),
            isGroup: true,
            name: "天地图文字标注"
          })
        ],
        view: new View({
          center: [103.3, 35.5],
          zoom: 4
        })
      });
    }
...
}