vue openlayers创建地图
yuelianng0921 人气:0vue项目中使用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>
页面截图如下:
加载全部内容