开发环境的搭建在上一篇教程中已有描述，如果不知道怎么搭建，请移步Vue+OpenLayers入门（加载OSM在线地图）
此代码为加载高德在线地图以及清除地图上的默认控件：
<template><div class="map-box" id="map-box" ref="mapBox"></div></template><script>import 'ol/css';import {fromLonLat} from 'ol/proj';import Map from 'ol/Map';import View from 'ol/View';import {Tile as TileLayer} from 'ol/layer';import {defaults as Defaults} from 'ol/control';import XYZ from 'ol/source/XYZ';export default {data() {return {map: null,}},mounted() {this.initMap();},methods: {/** 初始化地图 */initMap() {this.map = new Map({layers: [new TileLayer({source: new XYZ({url: 'http://wprd0{1-4}./appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',}),})],view: new View({center: fromLonLat([104.06, 30.67]), // 成都zoom: 10, // 设置初始化时的地图缩放层级projection: 'EPSG:3857', // 坐标系maxZoom: 18, // 最大缩放层级minZoom: 4, // 最小缩放层级}),target: 'map-box', // 地图的domcontrols: new Defaults({// 清除地图上的控件attribution: false,rotate: false,zoom: false,})});},}}</script><style>.map-box {width: 100%;height: 100%;}</style>
