效果图
1、创建一个容器 ；再给一个容器宽高
<template><div id="map"></div></template>
<style scoped>#map {width: 100%;height: 100%;}</style>
2、引入模块 并初始化底图 并挂载底图
<script>// 引入依赖// import proj from 'ol'import { Map, View } from 'ol';import TileLayer from 'ol/layer/Tile';import XYZ from 'ol/source/XYZ' //xyzexport default {name: 'HelloWorld',props: {msg: String},// 挂载mounted() {this.initMap()},methods: {// 初始化底图mapinitMap() {// 初始化地图const map = new Map({layers: [new TileLayer({visible: true,source: new XYZ({visible: true,url: 'http://wprd0{1-4}./appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',})})],target: 'map',view: new View({center: [12914838.35,4814529.9],zoom: 8,maxZoom: 18,projection: 'EPSG:3857',constrainResolution: true, // 设置缩放级别为整数 smoothResolutionConstraint: false, // 关闭无级缩放地图}),});},}}</script>
全部代码
<template><div id="map"></div></template><script>// 引入依赖// import proj from 'ol'import { Map, View } from 'ol';import TileLayer from 'ol/layer/Tile';import XYZ from 'ol/source/XYZ' //xyzexport default {name: 'HelloWorld',props: {msg: String},// 挂载mounted() {this.initMap()},methods: {// 初始化底图mapinitMap() {// 初始化地图const map = new Map({layers: [new TileLayer({visible: true,source: new XYZ({visible: true,url: 'http://wprd0{1-4}./appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',})})],target: 'map',view: new View({center: [12914838.35,4814529.9],zoom: 8,maxZoom: 18,projection: 'EPSG:3857',constrainResolution: true, // 设置缩放级别为整数 smoothResolutionConstraint: false, // 关闭无级缩放地图}),});},}}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>/* map容器撑开 */#map {width: 100%;height: 100%;}</style>
