vue项目中使用openlayers

最新推荐文章于 2025-07-07 14:23:16 发布

原创最新推荐文章于 2025-07-07 14:23:16 发布 · 376 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

本文介绍了如何使用OpenLayers库创建一个基本的地图应用。首先通过npm安装ol库，然后在Vue项目中引入ol/Map、ol/source/OSM、ol/layer/Tile、ol/View和ol/source/XYZ等模块。在模板中设置地图容器，并在mounted钩子函数中初始化地图，设置中心点和缩放级别。最后展示了完成的地图组件示例。

一、安装(采用目前最新6.9.0)

npm install ol --save

二、使用

<template>
  <!-- 设置宽高时不要使用style内联样式，采用class选择器 -->
  <div id="map" class="map"></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 XYZ from "ol/source/XYZ";

export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            })
          })
        ],
        view: new View({
          center: [0, 0],
          zoom: 2
        })
      });
      console.log("init finished");
    }
  }
};
</script>

<style>
.map {
  width: 100%;
  height: 400px;
}
</style>