vue加载openlayers入门教程（超简单）

很简单，很简单，很简单

学会了vue，开始测试mapbox的搭配，学会了mapbox，有整了一下openlayers的导入，刚开始简直崩溃，一脸懵逼，怎么导包都导不进去，试了无数次的npm install ol的那种，而且贼慢，后来自己研究了一下，超简单的那种！简单写一下。。。。

第一步：创建vue项目

cmd运行

vue ui

里面的设置自己根据需要加载一下就ok，最主要的是在依赖的地方导入ol运行依赖就这个东西，搞得我头疼了半天。

第二步 加载openlayer

接下来就是普通的vue项目的加载了

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

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { transform } from "ol/proj";
import OSM from "ol/source/OSM";

export default {
  data() {
    return {};
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new XYZ({
              url:
                "https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=key",
            }),
          }),
          new TileLayer({
            source: new XYZ({
              url:
                "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=key",
            }),
            isGroup: true,
            name: "天地图文字标注",
          }),
          //   new TileLayer({
          //     source: new OSM(),
          //   }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [103.3, 35.5],
          zoom: 4,
        }),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  //   background-color: antiquewhite;
}
</style>

这里也不需要在main.js中import

效果图：