openlayers加载天地图
前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。本人不是专业GIS开发，只是记录，方便后续查找。
参考资料：
openlayers官网：/
geojson下载网站：/portal/school/atlas/area_selector
地图坐标拾取网站：https://api./lbsapi/getpoint/index.html
openlayers核心：Map对象、View视图、Layer图层、Source来源、Feature特征等
<template><!-- 承载地图的容器，注意宽高一定要有，否则不显示 （后面将该文件封装为组件，以便调用） --><div class="base-map" id="base-map" /></template>
<script>import Map from 'ol/Map'import View from 'ol/View'import {defaults as Defaults } from 'ol/control.js'import TileLayer from 'ol/layer/Tile'import XYZ from 'ol/source/XYZ'export default {name: 'BaseMap',data () {return {// 地图实例对象map: null}},mounted () {// 窗口拖拉，更新地图大小window.addEventListener('resize', () => {if (this.map) {this.map.updateSize()}})this.$nextTick(() => {this.initMap()})},methods: {// 加载地图initMap () {// T=vec_c表示请求的是路网数据，x 表示切片的 x 轴坐标，y 表示切片的y轴坐标，z表示切片所在的缩放级别。// 使用 ol.source.XYZ 加载切片，并将获取的数据初始化一个切片图层 ol.layer.Tile：// 天地图底图var source = new XYZ({url: '/DataServer?T=vec_w&tk=b9031f80391e6b65bd1dd80dcde1b097&x={x}&y={y}&l={z}'})var tileLayer = new TileLayer({title: '天地图',source: source})// 标注图层(就是我们所看见的行政区名称，道路)var sourceMark = new XYZ({url: '/DataServer?T=cva_w&tk=b9031f80391e6b65bd1dd80dcde1b097&x={x}&y={y}&l={z}'})var tileMark = new TileLayer({title: '标注图层',source: sourceMark})// 创建地图对象this.map = new Map({target: 'base-map', // 地图容器 对应idlayers: [tileLayer, tileMark], // 图层view: new View({// 视图projection: 'EPSG:4326', // 坐标系// 初始化地图中心 可以去地图坐标拾取网站获取想要的坐标center: [118.339408, 32.261271],// 缩放zoom: 12,// 最大缩放maxZoom: 18,// 最小缩放minZoom: 1}),// 地图自带控件，这里我们不需要，后续自己做类似功能controls: new Defaults({zoom: false,rotate: false})})// 将地图对象抛出去this.$emit('getMap', this.map)}}}</script>
<style scoped>.base-map {width: 100%;height: 100%;z-index: -1;}</style>
包版本
若加载不成功，请自行申请天地图key，天地图官网：https://www./
加载成功效果
