脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue openlayers创建地图

vue使用openlayers创建地图

 更新时间：2022年04月15日 09:55:45   作者：yuelianng0921  
这篇文章主要为大家详细介绍了vue项目中使用openlayers创建地图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

vue项目中使用openlayers创建地图，供大家参考，具体内容如下

前期准备

  • 安装node环境
  • 安装cnpm
  • 安装vue-cli

以上步骤网上都有很多教程

搭建vue项目

vue create vue-ol

按照提示一步步搭建vue项目

cd vue-ol
npm run serve

浏览器打开 http://localhost:8080/ 就可以看到初始化的vue项目页面

vue项目安装openlayers

cnpm i ol --s

main.js中引入ol.css

import 'ol/ol.css';

创建地图组件MapContainer.vue

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

<script>
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 {
    name: "MapContainer",
    methods:{
        createMap(){
            let map = new Map({
                layers: [new TileLayer({
                    source: new OSM(),
                }) ],
                target: 'map',
                view: new View({
                    maxZoom: 18,
                    center: fromLonLat([108.92,34.28]),
                    zoom: 10,
                }),
            });
        }
    },
    mounted(){
        this.createMap()
    }
};
</script>

<style scoped>
.map {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    background: #1f3064;
}
</style>

在home.vue中引入地图组件

<template>
  <div class="home">
    <MapContainer msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import MapContainer from '@/components/MapContainer.vue'
export default {
  name: 'Home',
  components: {
    MapContainer
  }
}
</script>
<style>
.home{
    height: 100%;
    position: relative;
}
</style>

页面截图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论