openlayers+vueCli

最新推荐文章于 2026-03-13 11:04:41 发布

原创最新推荐文章于 2026-03-13 11:04:41 发布 · 373 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 同时被 2 个专栏收录

5 篇文章

订阅专栏

笔记

4 篇文章

订阅专栏

本文详细介绍如何使用Vue CLI搭建项目，并集成OpenLayers实现地图显示功能。通过安装依赖、创建组件及配置OpenLayers，最终成功展示指定经纬度的地图。

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>