openlayers+vueCli

openlayers+vue-cli入门

vue-cli安装好后下载openlayers:

npm install ol

然后自己创建一个vue文件，创建一个div,设置好宽和高

<div id="map"></div>

再引入一下模块：

import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import {fromLonLat} from 'ol/proj';

在script里写入openlayers代码：

 var map = new Map({
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        target: "map",
        view: new View({
          center: new fromLonLat([117.41, 28.82]),
          zoom: 8,
        }),
      });

效果如下：

注意：地图初始化的时候，有时候经纬度写进去后，图层还是会在[0,0]位置保持不变，这时候就要引入

import { fromLonLat } from "ol/proj";

具体代码如下：

<template>
  <div class="att">
    <div id="map" class="stdent"></div>
  </div>
</template>
<script>
import "ol/ol.css";
import Map from "ol/Map";
import OSM from "ol/source/OSM";
import TileLayer from "ol/layer/Tile";
import View from "ol/View";
import { fromLonLat } from "ol/proj";
export default {
  data() {
    return {
      map: "",
      view: "",
    };
  },
  mounted() {
    this.openlayerTxt();
  },
  methods: {
    openlayerTxt() {
      var map = new Map({
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        target: "map",
        view: new View({
          center: new fromLonLat([117.41, 28.82]),
          zoom: 8,
        }),
      });
    },
  },
};
</script>