影像-Geoserver

框架提供对在线goeserver数据加载

支持地图类型

INFO

sourceUrl：url地址

layer：图层名

style：样式名

format：瓦片格式

tileMatrixSetID：坐标系

maximumLevel：最大层级

alpha：透明度

代码实例

<script setup lang="ts">
import { onMounted, onBeforeUnmount, reactive } from 'vue'
const LarkExplorer = window.LarkExplorer
let map: any
onMounted(() => {
  LarkExplorer.ready({
    baseUrl: './dist/resources/',
  }).then(initMap)
})

function initMap() {
  // 默认谷歌影像地图
  const baseImagery = LarkExplorer.BaseLayer.DefaultTdtImg
  map = new LarkExplorer.Map('map', baseImagery)
  console.log(map)
  initView()
}
function initView() {
  const status = {
    position: {
      x: -32280.464873259167,
      y: 4560004.02650136,
      z: 4447896.518168107,
    },
    hpr: {
      heading: 0.06065760211096549,
      pitch: -0.3772712459757641,
      roll: 0.00004665380886681447,
    },
  }
  map.Navigation.flyToPos(status, 3)
}
const options = reactive({
  sourceUrl: 'https://app.larkview.cn/gwc/service/wmts/rest',
  layer: 'JinNeng:d_insar_5',
  style: '',
  format: 'image/png',
  tileMatrixSetID: 'EPSG:900913',
  maximumLevel: 18,
  alpha: 1.0,
})
let imagery: any
const addLayer = () => {
  removeLayer()
  imagery = map.Layers.Imagery.addGeoserver('wmts', options)
  console.log(imagery)
}
const removeLayer = () => {
  imagery && map.Layers.Imagery.remove(imagery)
}
</script>

运行效果 更多示例