<template>
<div class="test1-page">
<div id="map-container-div"></div>
</div>
</template>

<script>
import {Map, View} from "ol";
import TileLayer from "ol/layer/Tile";
import {fromLonLat} from "ol/proj";
import {XYZ} from "ol/source";
import {getTDT_TK} from "@/utils/func";

export default {
name: '',
data() {
return {
map: null,
projectionStr: 'EPSG:3857'
}
},
mounted() {
this.initMap()
this.map.addLayer(this.createSomeoneTdtLayer())
},
methods: {
initMap() {
this.map = new Map({
target: 'map-container-div',
layers: [],
view: new View({
projection: this.projectionStr,
center: fromLonLat([107.00830979189323, 40.329536827760066]),
zoom: 3,
}),
controls: [],
});
},
createXYZLayer(url, projection = 'EPSG:3857') {
return new TileLayer({
source: new XYZ({
url,
projection,
}),
});
},
createSomeoneTdtLayer(){
// 天地图
let tdt_arr = ['img_w', 'vec_w', 'ter_w', 'cia_w', 'cva_w', 'cta_w', 'ibo_w', 'img_c', 'vec_c', 'ter_c', 'cia_c', 'cva_c', 'cta_c', 'ibo_c',]
.map(keyword => {
let projection = 'EPSG:3857';
if (keyword.endsWith('_c')) {
projection = 'EPSG:4326';
}
let url = 'https://t0.tianditu.gov.cn/DataServer?T=' + keyword + '&x={x}&y={y}&l={z}&tk='+getTDT_TK()
let layer = this.createXYZLayer(url, projection)

      layer.set('groupCode', 'bottomMap');
      layer.set('layerCode', `tdt_${keyword}_layer`);
      return layer;
    });

  return tdt_arr.find(layer => layer.get('layerCode') === 'tdt_img_w_layer')
}

}
}
</script>

<style lang="scss" scoped>
.test1-page {

map-container-div {

width: 100vw;
height: 100vh;
border: 10px solid gray;
box-sizing: border-box;

}
}
</style>