<template>
<div class="supMap-box">
<div id="map" style="width: 100%; height: 100%" />
</div>
</template>
<script>
export default {
name: 'SupMap',
components: {
},
data() {
return {
supMap: null
}
},
mounted() {
this.initMap()
},
methods: {
initMap() {
const that = this
const map = new window.ol.Map({
target: 'map', // 对应div容器的id
view: new window.ol.View({
center: [0, 0], // 地图中心点
zoom: 16.6, // 缩放层级
projection: 'EPSG:4326'// 坐标系
})
})
var url = 'xxx'
// 初始化地图信息
// var map = new window.ol.Map({
// target: 'map',
// controls: window.ol.control.defaults({attributionOptions: {collapsed: false}})
// .extend([new window.ol.supermap.control.Logo()]),
// view: new window.ol.View({
// center: [0, 0],
// zoom: 2,
// projection: 'EPSG:4326'
// })
// });
// 添加图层
var layer = new window.ol.layer.Tile({
source: new window.ol.source.TileSuperMapRest({
url: url,
wrapX: true
}),
projection: 'EPSG:4326'
})
map.addLayer(layer)
// setTimeout(() => {
// map.updateSize() // 地图适配div容器
// }, 100)
map.on('click', function(evt) {
const x = evt.coordinate[0]// 获取点击处的经度
const y = evt.coordinate[1]// 获取点击处的纬度
// const zom = map.getZoom()
console.log(x, '???', y, evt.coordinate, 'lllllll', evt)
// console.log(window.SuperMap.getZoom(), '缩放', map, that.supMap)
console.log(map, '?', window, '着？')
var scaleControl = new window.ol.control.ScaleLine()
map.addControl(scaleControl)
})
this.supMap = map
}
}
}
</script>
<style lang='scss' scoped>
.supMap-box{
width: 100%;
height: 100%;
}
</style>
