vue中使用OpenLayers（一）：引入谷歌地图

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
              })
            })
          ]
        });
      },//绘制第一层地图