openlayers 添加OSM底图_openlayers osm-CSDN博客

本文介绍了如何使用Vue.js和OpenLayers库创建一个交互式地图，从头开始构建了一个包含OSM底图、地图容器和视图设置的实例，包括初始化地图和挂载到DOM的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

1、创建个容器

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

2、引入模块，初始化底图

import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

3、初始化底图

methods: {

    // 初始化底图map
    initMap() {

      // 初始化地图
      // const map = new Map({
      //   target: "map",//指定挂载dom，注意必须是id
      //   layers: [
      //     new TileLayer({
      //       source: new OSM(),//加载底图
      //     }),
      //   ],
      //   view: new View({
      //     center: [12914838.35,4814529.9],//视图中心位置
      //     projection: 'EPSG:3857',//指定投影
      //     zoom: 4,
      //   }),
      // });
    },

  }

4、挂载底图

  // 挂载
  mounted() {
    this.initMap()
  },

5、给容器设置一个宽高

#map {
  width: 100%;
  height: 100%;
}

全部代码

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

<script>
// 引入依赖
// import proj from 'ol'
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  // 挂载
  mounted() {
    this.initMap()
  },
  methods: {
    // 初始化底图map
    initMap() {
      const map = new Map({
        target: "map",//指定挂载dom，注意必须是id
        layers: [
          new TileLayer({
            source: new OSM(),//加载底图
          }),
        ],
        view: new View({
          center: [12914838.35,4814529.9],//视图中心位置
          projection: 'EPSG:3857',//指定投影
          zoom: 4,
        }),
      });
    },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* map容器撑开 */
#map {
  width: 100%;
  height: 100%;
}
</style>