OpenLayers集成天地图

1、安装OpenLayers

使用以下方式将OpenLayers添加为对您的应用程序的依赖

npm i -S ol

此时，您可以要求NPM通过运行以下命令来添加所需的开发依赖项

npm i --save-dev parcel-bundler

2、注册天地图

注册地址：https://uums.tianditu.gov.cn/register

3、创建新应用

创建新应用地址：https://console.tianditu.gov.cn/api/key

4、创建新页面

<template><div id='map' class='map'></div>
</template><script>import 'ol/ol.css'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import View from 'ol/View'
import XYZ from 'ol/source/XYZ'export default {name: 'disHome',mounted() {const map = new Map({target: 'map',layers: [new TileLayer({title: '天地图卫星影像',source: new XYZ({url: 'http://t4.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=*****************************'})}),new TileLayer({title: '天地图路网',source: new XYZ({url: 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=*****************************'})}),new TileLayer({title: '天地图文字标注',source: new XYZ({url: 'http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=*****************************'})})],view: new View({center: [111.003957, 35.022778],zoom: 10,projection: 'EPSG:4326'})})}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>#map {width: 100%;height: 500px;
}</style>

注意：将以上*****************************替换为自己注册的key