在线地图

在线地图功能主要还有三大类，分别是底图、道路、地形。

底图

IMPORTANT

底图目前含有中科星图白模、中科星图全球影像、天地图全球影像、天地图全球矢量图、天地图全球地形晕渲。

中科星图白模

请求对应图源的 token

/**
 * @description: 获取参数值
 * @param {object} publicKey: 参数key
 * @return {*}
 */
export function getPublicValue(publicKey?: string) {
  return request({
    url: '/admin/param/publicValue/' + publicKey,
    method: 'get'
  })
}

const result = await getPublicValue('GEO_VIS_KEY')
if (result && result.data.publicValue) {
  // 获取到token
  const token = result.data.publicValue
}

进行加载

try {
  const tileset = await LSGlobe.Cesium3DTileset.fromUrl(
    `https: //tiles.geovisearth.com/base/v1/whitemodel/earth/tileset.json?token=${token}`,
    {
      accessToken: code,
      scene: viewer.scene,
      skipLevelOfDetail: true
    }
  )
  // 设置图层名称，后续解析使用
  tileset.name = 'starLandModel'
  // 设置图层是否显示
  tileset.show = true
  // 添加到场景中
  viewer.scene.primitives.add(tileset)
} catch (error) {
  console.log(`Error loading tileset: $ {
		error
	}`)
}

中科星图全球影像

try {
  const lrcPath = `http://10.16.30.161:8555/api/admin/tx/preview/v1.0.0/geovis/zkxt-img.lrc`
  const imageryProvider = await LSGlobe.LSImageryProvider.fromUrl(lrcPath)
  // 设置图层名称，是否依附模型，后续解析使用
  imageryProvider.name = { title: 'zkxt-img', attachType: 0 }
  // 添加到场景中
  const imageryLayer = viewer.imageryLayers.addImageryProvider(imageryProvider)
  // 设置图层是否显示
  imageryLayer.show = true
} catch (error) {
  console.error(`Error loading imagery: ${error}`)
}

天地图全球影像

在线示例

示例代码

try {
  const lrcPath = `http://10.16.30.161:8555/api/admin/tx/preview/v1.0.0/tdt/tdtLayer.lrc`
  const imageryProvider = await LSGlobe.LSImageryProvider.fromUrl(lrcPath)
  // 设置图层名称，是否依附模型，后续解析使用
  imageryProvider.name = { title: 'skyLand', attachType: 0 }
  // 添加到场景中
  const imageryLayer = viewer.imageryLayers.addImageryProvider(imageryProvider)
  // 设置图层是否显示
  imageryLayer.show = true
} catch (error) {
  console.error(`Error loading imagery: ${error}`)
}

天地图全球矢量图

try {
  const lrcPath = `http://10.16.30.161:8555/api/admin/tx/preview/v1.0.0/tdt/tdtvector.lrc`
  const imageryProvider = await LSGlobe.LSImageryProvider.fromUrl(lrcPath)
  // 设置图层名称，是否依附模型，后续解析使用
  imageryProvider.name = { title: 'tdtvector', attachType: 0 }
  // 添加到场景中
  const imageryLayer = viewer.imageryLayers.addImageryProvider(imageryProvider)
  // 设置图层是否显示
  imageryLayer.show = true
} catch (error) {
  console.error(`Error loading imagery: ${error}`)
}

天地图全球地形晕渲

try {
  const lrcPath = `http://10.16.30.161:8555/api/admin/tx/preview/v1.0.0/tdt/tdtrender.lrc`
  const imageryProvider = await LSGlobe.LSImageryProvider.fromUrl(lrcPath)
  // 设置图层名称，是否依附模型，后续解析使用
  imageryProvider.name = { title: 'tdtrender', attachType: 0 }
  // 添加到场景中
  const imageryLayer = viewer.imageryLayers.addImageryProvider(imageryProvider)
  // 设置图层是否显示
  imageryLayer.show = true
} catch (error) {
  console.error(`Error loading imagery: ${error}`)
}

道路

IMPORTANT

道路目前含有天地图中文道路标注、中科星图中文道路标注。

天地图中文道路标注

try {
  const lrcPath = `http://10.16.30.161:8555/api/admin/tx/preview/v1.0.0/tdt/tdtMarker.lrc`
  const imageryProvider = await LSGlobe.LSImageryProvider.fromUrl(lrcPath)
  // 设置图层名称，是否依附模型，后续解析使用
  imageryProvider.name = { title: 'skyLandImage', attachType: 0 }
  // 添加到场景中
  const imageryLayer = viewer.imageryLayers.addImageryProvider(imageryProvider)
  // 设置图层是否显示
  imageryLayer.show = true
} catch (error) {
  console.error(`Error loading imagery: ${error}`)
}

中科星图中文道路标注

try {
  const lrcPath = `http://10.16.30.161:8555/api/admin/tx/preview/v1.0.0/tdt/zkxt-img-annotation.lrc`
  const imageryProvider = await LSGlobe.LSImageryProvider.fromUrl(lrcPath)
  // 设置图层名称，是否依附模型，后续解析使用
  imageryProvider.name = { title: 'zkxt-img-annotation', attachType: 0 }
  // 添加到场景中
  const imageryLayer = viewer.imageryLayers.addImageryProvider(imageryProvider)
  // 设置图层是否显示
  imageryLayer.show = true
} catch (error) {
  console.error(`Error loading imagery: ${error}`)
}

地形

IMPORTANT

地形目前含有天地图地形、中科星图地形。

天地图地形

请求对应图源的 token

/**
 * @description: 获取参数值
 * @param {object} publicKey: 参数key
 * @return {*}
 */
export function getPublicValue(publicKey?: string) {
  return request({
    url: '/admin/param/publicValue/' + publicKey,
    method: 'get'
  })
}

const result = await getPublicValue('TDT_KEY')
if (result && result.data.publicValue) {
  // 获取到token
  const token = result.data.publicValue
}

进行加载

var terrainLayers = viewer.terrainLayers
// 服务域名
var tdtUrl = 'https://t{s}.tianditu.gov.cn/'
// 服务负载子域
var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
var terrainUrls = new Array()
for (var i = 0; i < subdomains.length; i++) {
  var url = tdtUrl.replace('{s}', subdomains[i]) + 'mapservice/swdx?tk=' + token
  terrainUrls.push(url)
}
var terrainLayer = new LSGlobe.TDTTerrainProvider({
  urls: terrainUrls
})
terrainLayer.name = 'nintyTdtTerrain'
oLayer.show = true
var oLayer = terrainLayers.addTerrainProvider(terrainLayer)

中科星图地形

请求对应图源的 token

同白模的 token 获取方式相同

进行加载

try {
  const terrainProvider = await LSGlobe.CesiumTerrainProvider.fromUrl(
    `https://tiles.geovisearth.com/base/v1/terrain/?token=${token}`
  )
  var oLayer = viewer.terrainLayers.addTerrainProvider(terrainProvider)
  terrainProvider.name = 'zkxtTerrain'

  oLayer.show = true
} catch (error) {
  console.error(`Error loading Terrain: ${error}`)
}