ly_cesium

说明

最高支持Cesium1.92版

0.6.5后将支持Cesium1.121、不支持Cesium1.92需根据实际情况判断使用

邮箱

[email protected]

安装

需在index.html中引入地形与cesium js文件
<link rel="stylesheet" href="xxxxx/cesium_xxx/Cesium/Widgets/widgets.css">
<script src="xxx/cesium_xxx/Cesium/Cesium.js"></script>
<script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script>

npm install ly_cesium

快速引入

import { Source } from 'ly_cesium'  
const viewer = Source.Map.init(containerId, config, cesiumToken)
添加图层
Source.Map.addLayer(viewer, Source.Layer.tianLayer('天地图Token'))

可用图层

天地图卫星图
Source.Layer.tianLayer('天地图Token')
天地图标注
Source.Layer.tianTagging('天地图Token')
天地图国界
Source.Layer.tianCountryBorder('天地图Token')
天地图地形
Source.Layer.tianTerrainLayer(viewer, '天地图Token')
天地图影像服务
Source.Layer.tianAddImage(viewer, '天地图Token')
百度地图
Source.Layer.baiduLayer()
百度卫星地图
Source.Layer.baiduLayerImage()
高德影像
Source.Layer.gaodeImageLayer()
高德街道标注
Source.Layer.gaodeImageTagLayer()
高德街道图层
Source.Layer.gaodeStreeLayer()

点标绘(entity)

const _draw = new Draw.LyDrawPoint(viewer)
_draw.activate()

线段标绘(Primitive)

const drawLine = new LyDrawLine(viewer)
drawLine.activate()
drawLine.finish = (positions)=>{
}

面标绘(Primitive)

const draw = new LyDrawPolygon(viewer)
draw.activate()
draw.finish = (positions) => {
   
}

面标绘(Entity)可进行贴地绘制

const _draw = new Entity.DrawPolygon(viewer)
_draw.activate()
_draw.finish = ()=>{
  // 结束
}

线段添加(Primitive)

const lineManager = new LyLineManager(viewer)
lineManager.addByPosition(positions)
可添加彩色线段

测距离

const _distance = new Distance(viewer)
_distance.activate()
_distance.finish = (distance, positions) => {
  // distance距离 千米
  // positions 笛卡尔坐标数组
}

测面积

const _measure = new Area(viewer)
_measure.activate()
_measure.finish = (area, positions, coordinates) => {
  // area 面积 单位km²
  // positions 笛卡尔坐标数组
  // coordinates 经纬度坐标数组
}

测高度

const _measure = new Measure.Height(viewer)
_measure.activate()

聚合类

const _cluster = new LyCluster(viewer)
const coordinates = [
  { latitude: 30.2084, longitude: 120.21201, height: 0 },
  { latitude: 31.2084, longitude: 120.21201, height: 0 },
  { latitude: 30.2083, longitude: 120.21201, height: 0 },
  { latitude: 30.2082, lnlongitudeg: 120.21201, height: 0 }
]
coordinates.forEach(e => {
  const entity = Entity.LyCluster.CreatePoint(null, Source.Map.coordinateHeightToCartesian(viewer, e))
  _cluster.addEntity(entity)
})

添加天气

雨天
const weather = new Weather.LyRain(viewer, { tiltAngle: 0.6, size: 0.02, speed: 150 })
weather.add()
雪、雾等类似

动态纹理

模型管理

const _manager = new Model.LyGltfManager(viewer)
_manager.addControl(() => {

})

截图功能

const _screenshot = new Source.Screenshot(viewer)
_screenshot.get({
  success: (e) => {
    // e blob
  },
  fail: () => {

  }
})

自动下载图片
_screenshot.download = true

裁剪功能

const _clippinng = new Clipping.LyClippingPlane(viewer)
_clippinng.activate()

地形多面裁剪 由于Cesium官方对于地形的裁剪只支持一个，通过修改源码实现多面裁剪，最高支持Cesium1.92
版本0.4.19及以上支持该功能

_draw = new Clipping.Index(viewer)
_draw.activate()
// 是否开启土壤填充
_draw.fill = false 

分屏显示

其他动态纹理，以及其他标绘具体使用说明情况请看语雀