您的当前位置：首页 Vue+OpenLayer

Vue+OpenLayer

来源：赴品旅游

初始化vue项目：

打开cmd，输入命令

npm install -g cnpm --registry=

安装Vue需要npm的版本大于3，所以我们先升级一下npm，输入命令

cnpm install cnpm -g

安装vue，输入命令

cnpm install vue

安装vue-cli，输入命令

cnpm install --global vue-cli

vue init webpack projectName

cd "项目所在文件夹“

然后依次执行下面的命令

cnpm install

cnpm run dev

引入openlayer包， cnpm i -S ol

新建ol.vue，配置router，注释掉helloWorld，使用ol.vue;

在ol.vue中加入以下代码；

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

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
export default {
  name: "ol",
  data() {
    return {
      message: "ol-test",
      map: null,
    };
  },
  mounted() {
    var mapcontainer = this.$refs.rootmap;
    this.map = new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        projection: "EPSG:4326", //使用这个坐标系
        center: [114.0839, 22.8857], //深圳
        zoom: 12,
      }),
    });
  },
  methods: {},
};
</script>

<style scoped>
#map {
  height: 100%;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
  display: none;
}
</style>

保存运行，bingo.

随笔记录

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文