gisthreemap
Version:
基于webGL的三维api
852 lines (763 loc) • 20.5 kB
JavaScript
import transform from "./utils/transform";
class ThreeMapClass {
constructor(options) {
this.options = options;
this.ClassType = ThreeMapClass.ClassType;
this.CustomEntitysArray = {}
this.mydataSources = []
this.ThreeMapInstance = new ThreeMapClass.Class(options);// 创建地图 Class在index文件赋值
}
init(callback) {
this.ThreeMapInstance.init(callback)
}
// 初始化EntitysClass，可自定义操作Entity
createEntitysClass(dataSource) {
return new this.ThreeMapInstance.CustomEntitys(this.getViewer(), dataSource)
}
// 初始化EntitysEffectClass，可自定义操作Entity特效类
createEntitysEffectClass(dataSource) {
console.log(dataSource)
return new this.ThreeMapInstance.CustomEntitysEffect(this.getViewer(), dataSource)
}
/**
* handler 鼠标事件类
*
* 所有鼠标事件
* 管理鼠标事件
*/
get handlerAction() {
return this.ThreeMapInstance.handlerAction
}
/**
* 拾取坐标
* 坐标转换
* 基础类
*/
get mouseManager() {
return this.ThreeMapInstance.mouseManager
}
/**
* entitys 实体类
* 管理实体模型
* 创建
* 销毁
*/
get mentitys() {
return this.ThreeMapInstance.mentitys
}
/**
* 获取通用工具类
*/
get commonTools() {
return this.ThreeMapInstance.commonTools
}
/**
* 绘制类
*/
get draw() {
return this.ThreeMapInstance.draw
}
/**
* 动态绘制类
*/
get drawDynamicTool() {
return this.ThreeMapInstance.drawDynamicTool
}
/**
* 弹窗类
*/
get popup() {
return this.ThreeMapInstance.popup
}
/**
* 弹窗类
*/
get trackEntity() {
return this.ThreeMapInstance.trackEntity
}
/**
* 添加wmts图层
* @param {} option
* @returns
*/
addWmtsLayer(option) {
return this.ThreeMapInstance.addWmtsLayer(option)
}
/**
* 添加切片图层
* @param {*} option
* @returns
*/
addWebTileLayer(option) {
return this.ThreeMapInstance.addWebTileLayer(option)
}
/**
* 添加3dTile模型
* @param {*} option
* @returns
*/
add3DTileModels(option) {
return this.ThreeMapInstance.add3DTileModels(option)
}
/**
* 修改模型颜色
* @param {*} modelid
* @param {*} rgba
*/
change3DTileModelsColor(modelid, rgba) {
this.ThreeMapInstance.change3DTileModelsColor(modelid, rgba)
}
/**
* 添加点位
* @param {} points 点位数据
* @param {*} name soureData名称
* @returns
*/
addMakers(points, name) {
return this.ThreeMapInstance.addMakers(points, name)
}
/**
* 添加点位
* @param {} points 点位数据
* @param {*} name soureData名称
* @returns
*/
addGlbModels(points, name) {
return this.ThreeMapInstance.addGlbModels(points, name)
}
/**
* 通过name删除DataSource
* @param {*} name
* @returns
*/
removeDataSource(name) {
if (this.CustomEntitysArray.hasOwnProperty(name)) {
delete this.CustomEntitysArray[name]
}
return this.ThreeMapInstance.removeDataSource(name)
}
/**
* 获取Viewer
* @returns
*/
getViewer() {
return this.ThreeMapInstance.getViewer()
}
/**
*
* @returns 获取dataSource的集合
*/
getDataSources() {
return this.ThreeMapInstance.getDataSources()
}
/**
* 通过name获取DataSource
* @param {*} name
* @returns
*/
getDataSourceByName(name) {
return this.ThreeMapInstance.getDataSourceByName(name)
}
/**
* 获取范围
* @param {*} option
* @returns
*/
getBoundingSphere(option) {
return this.ThreeMapInstance.getBoundingSphere(option)
}
/**
*
* @returns 获取三维范围
*/
getCurrentExtent() {
return this.ThreeMapInstance.getCurrentExtent()
}
/**
* 获取相机姿态位置
* @returns
*/
getcameraPosInfo() {
return this.ThreeMapInstance.getcameraPosInfo()
}
/**
* 根据经纬度获取笛卡尔三维坐标
* @param {*} longitude
* @param {*} latitude
* @param {*} height
* @returns
*/
getCartesian3fromDegrees(longitude, latitude, height = 0) {
return this.ThreeMapInstance.getCartesian3fromDegrees(longitude, latitude, height)
}
/**
* 根据笛卡尔三维坐标 获取屏幕坐标
* @param {*} Cartesian3
* @returns
*/
getCanvasCoordfromcartesian(Cartesian3) {
return this.ThreeMapInstance.getCanvasCoordfromcartesian(Cartesian3)
}
/**
* 根据笛卡尔三维坐标 获取经纬度
* @param {*} Cartesian3
* @returns
*/
getWGS84FromCartesian3(Cartesian3) {
return this.ThreeMapInstance.getWGS84FromCartesian3(Cartesian3)
}
/**
* 根据3dtile的id获取模型
* @param {*} modelid
* @returns
*/
getModel(modelid) {
return this.ThreeMapInstance.getModel(modelid)
}
primitiveadd(model) {
this.ThreeMapInstance.primitiveadd(model)
}
primitivedeletes(model) {
this.ThreeMapInstance.primitivedeletes(model)
}
primitiveRemoveall() {
this.ThreeMapInstance.primitiveRemoveall()
}
/**
* 根据eid获取实体
* @param {} eid
* @param {*} sourcetype
* @returns
*/
getEntityByEid(eid, sourcetype) {
return this.ThreeMapInstance.getEntityByEid(eid, sourcetype)
}
/**
* 根据id获取实体
* @param {*} id
* @param {*} sourcetype
* @returns
*/
getEntityById(id, sourcetype) {
return this.ThreeMapInstance.getEntityById(id, sourcetype)
}
/**
* 根据eid删除实体
* @param {*} eid
* @param {*} sourcetype
* @returns
*/
removeEntityByEid(eid, sourcetype) {
return this.ThreeMapInstance.removeEntityByEid(eid, sourcetype)
}
/**
* 根据id删除实体
* @param {*} eid
* @param {*} sourcetype
* @returns
*/
removeEntityById(eid, sourcetype) {
return this.ThreeMapInstance.removeEntityById(eid, sourcetype)
}
/**
* 删除所有实体
* @param {*} sourcetype 此参数存在删除对应dataSource的，不存在删除所有
*/
removeAllEntity(sourcetype) {
this.ThreeMapInstance.removeAllEntity(sourcetype)
}
/**
* 设置图层显示与隐藏
* @param {*} param0
* @param {*} visable
*/
setLayerVisable({ layerid, layer = null }, visable) {
this.ThreeMapInstance.setLayerVisable({ layerid, layer }, visable)
}
/**
* 创建dataSource
* @param {} sourcetype
* @returns
*/
CreateDataSource(sourcetype) {
return this.ThreeMapInstance.CreateDataSource(sourcetype)
}
/**
* 相机飞到指定范围
* @param {*} boundingSphere
* @param {*} option
*/
flyToBoundingSphere(boundingSphere, option = {
duration: 100
}) {
this.ThreeMapInstance.flyToBoundingSphere(boundingSphere, option)
}
/**
* 相机移动到指定地点
* @param {} lon
* @param {*} lat
* @param {*} height
* @param {*} additional
*/
flyTo(lon, lat, height = 1500, additional = {
orientation: {
heading: 0,
pitch: -45,
roll: 0
}
}) {
this.ThreeMapInstance.flyTo(lon, lat, height = 1500, additional = {
orientation: {
heading: 0,
pitch: -45,
roll: 0
}
})
}
/**
* 相机飞行普通事件
* @param {} target
* @param {*} options
* @returns
*/
CommonflyTo(target, options = {}) {
return this.ThreeMapInstance.CommonflyTo(target, options)
}
/**
* 是否开启光照
* @param {} sun
*/
sunshine(sun) {
this.ThreeMapInstance.sunshine(sun)
}
/**
* 事件注册
* @param {*} type
* @param {*} callback
*/
registerterMapEvent(type, callback) {
this.ThreeMapInstance.mapevent.registerterMapEvent(type, callback)
}
/**
* 事件移除
* @param {} type
*/
removeMapEvent(type) {
this.ThreeMapInstance.mapevent.removeMapEvent(type)
}
// 控制是否开启实体点击
checkEntityEventMap(type) {
this.ThreeMapInstance.mapevent.checkEntityEventMap(type)
}
// 鼠标移动获取坐标
moveMouseGetCoordinate(callback) {
this.ThreeMapInstance.mapevent.moveMouseGetCoordinate(callback)
}
// 新增preRender事件
addPreRenerEvent(callback) {
return this.ThreeMapInstance.mapevent.addPreRenerEvent(callback)
}
// 删除preRender事件
removePreRenerEvent(removeHandler) {
this.ThreeMapInstance.mapevent.removePreRenerEvent(removeHandler)
}
// 坐标串转换为cesium格式的坐标点
pointsToDegreesArray(lnglats, height) {
return this.ThreeMapInstance.pointsToDegreesArray(lnglats, height)
}
// 添加面
addPolygon(polygon, Additional, dataSource) {
if (dataSource) {
if (this.CustomEntitysArray.hasOwnProperty(dataSource._name)) {
return this.CustomEntitysArray[dataSource._name].createPolygon(polygon, Additional)
} else {
this.CustomEntitysArray[dataSource._name] = new this.ThreeMapInstance.CustomEntitys(this.getViewer(), dataSource, this.mydataSources)
return this.CustomEntitysArray[dataSource._name].createPolygon(polygon, Additional)
}
} else {
return this.ThreeMapInstance.defaultEntitys.createPolygon(polygon, Additional)
}
}
// 创建缓冲区
createBuffer(lon, lat, radius, units = 'miles') {
return this.ThreeMapInstance.createBuffer(lon, lat, radius, units)
}
// 添加具有拉伸效果的面状要素
addStretchingPolygon(polygon, Additional) {
return this.ThreeMapInstance.defaultEntitysEffect.createPolygon(polygon, Additional)
}
// 添加线
addPolyline(polyline, Additional) {
return this.ThreeMapInstance.defaultEntitys.createPolyline(polyline, Additional)
}
// 添加三维线
addPolylineVolume(polyline, Additional) {
return this.ThreeMapInstance.defaultEntitys.createPolylineVolume(polyline, Additional)
}
// 添加点
addPoint(lnglathei, label = false, point = false, billboard = false) {
return this.ThreeMapInstance.defaultEntitys.createPoint(lnglathei, label, point, billboard)
}
// 添加道路交错发光线
addSpriteline(
polyline,
duration,
image,
Additional
) {
return this.ThreeMapInstance.defaultEntitysEffect.createSpriteline(
polyline,
duration,
image,
Additional)
}
// 添加流动线
addTrailline(
polyline,
duration,
image,
color,
Additional
) {
return this.ThreeMapInstance.defaultEntitysEffect.createTrailline(
polyline,
duration,
image,
color,
Additional)
}
/**
* 添加飞线
* @param {*} center
* @param {*} num
* @param {*} eid
* @param {*} LineFlowMaterial
* @returns
*/
addlineFlow(center, num, eid, LineFlowMaterial) {
return this.ThreeMapInstance.defaultEntitysEffect.createlineFlow(
center, num, eid, LineFlowMaterial
)
}
/**
* 抛物线
* @param {*} _center 起点
* @param {*} _positions 终点坐标集合
* @param {*} _num // 抛物线上的飞线数量
* @param {*} height // 抛物线高度
* @param {*} LineFlowMaterial // 飞线材质
* @param {*} linecolor // 抛物线颜色
*/
addparabolaFlowline(center, positions, num, height, LineFlowMaterial, linecolor) {
debugger
return this.ThreeMapInstance.defaultEntitysEffect.createparabolaFlow(
center, positions, num, height, LineFlowMaterial, linecolor
)
}
/**
* 材质扩散圆
* @param {*} center
* @param {*} eid
* @param {*} color
* @param {*} speed
*/
addcircleDiffuse(center, eid, speed, color) {
this.ThreeMapInstance.defaultEntitysEffect.createcircleDiffuse(
center, eid, speed, color
)
}
/**
* 添加扩散圆
* @param {} center
* @param {*} color
* @param {*} radius
* @param {*} duration
*/
addcircleDiffusion(center, color, radius, duration) {
this.ThreeMapInstance.circleDiffusion.add(center, color, radius, duration)
}
/**
* 清除扩散圆
*/
clearcircleDiffusion() {
this.ThreeMapInstance.circleDiffusion.clear()
}
/**
* 添加扩散圆
* @param {*} center
* @param {*} color
* @param {*} radius
* @param {*} duration
* @param {*} eid
* @param {*} isedit
*/
addhexagonSpread(center, color, radius, duration, eid, isedit) {
this.ThreeMapInstance.hexagonSpread.add(center, color, radius, duration, eid, isedit)
}
/**
* 添加发光线圈
* @param {} center
* @param {*} color
* @param {*} radius
* @param {*} duration
* @param {*} eid
* @param {*} isedit
*/
addScanline(center, color, radius, duration, eid, isedit) {
this.ThreeMapInstance.defaultEntitysEffect.add(center, color, radius, duration, eid, isedit)
}
/**
* 添加发光线圈 EntitysEffect
* @param {} center
* @param {*} color
* @param {*} radius
* @param {*} duration
* @param {*} eid
* @param {*} isedit
*/
addScanlineEntitysEffect(center, color, radius, duration, eid) {
return this.ThreeMapInstance.defaultEntitysEffect.createdScanline(center, color, radius, duration, eid)
}
/**
* 雷达平扫
* @param {*} position
* @param {*} scanColor
* @param {*} maxRadius
* @param {*} duration
*/
addCircleScan(position, scanColor, maxRadius, duration) {
this.ThreeMapInstance.circleScan.add(position, scanColor, maxRadius, duration)
}
addEntityCircleScan(position, scanColor, outlineColor, maxRadius, duration, eid) {
this.ThreeMapInstance.defaultEntitysEffect.createRadarScan(position, scanColor, outlineColor, maxRadius, duration, eid)
}
/**
* 轨迹球体
* @param {*} position 中心点
* @param {*} color 颜色
* @param {*} radii 椭球半径
* @param {*} duration 速度
*/
addEllispoid(position, color, radii, duration, eid) {
this.ThreeMapInstance.defaultEntitysEffect.createellispoid(position, color, radii, duration, eid)
}
/**
* 电弧球体
* @param {*} position 中心点
* @param {*} color 颜色
* @param {*} radii 椭球半径
* @param {*} duration 速度
*/
addElectricEllispoid(position, color, radii, duration, eid) {
this.ThreeMapInstance.defaultEntitysEffect.createElectellispoid(position, color, radii, duration, eid)
}
/**
* 发光穿梭线材质
* @param {} duration 间隔
* @param {*} image 图片
*/
materialforSpriteline(duration, image) {
return new Cesium.Spriteline1MaterialProperty(duration, image)
}
/**
* 光墙材质
* @param {} duration 间隔
* @param {*} image 图片
*/
materialforWallDiffuse(color) {
return new Cesium.WallDiffuseMaterialProperty({
color: new Cesium.Color.fromCssColorString(color)
})
}
/**
* 流动线材质
* @param {} duration 间隔
* @param {*} image 图片
*/
materialforPriteline(image, duration, color = Cesium.Color.RED) {
return new Cesium.TrailLineMaterialProperty(
image,
color,
duration
)
}
// 添加发光墙
addcreateWallDiffuse(positions, height, color) {
this.ThreeMapInstance.defaultEntitysEffect.createWallDiffuse(positions, height, color, eid)
}
/**
* 删除实体和清除绘制状态
*/
clearEntandCloseMe() {
this.ThreeMapInstance.clearEntandCloseMe()
}
/**
* 底图切换
* @param {} layerid
*/
switchBaseLayer(layerid) {
this.ThreeMapInstance.switchBaseLayer(layerid)
}
/**
* 长度
* @param {*} callback // 测量完成的回调
*/
MeasureDistance(callback) {
this.ThreeMapInstance.measure.drawLine(callback)
}
/**
* 面积
* @param {*} callback // 测量完成的回调
*/
MeasureArea(callback) {
this.ThreeMapInstance.measure.drawArea(callback)
}
/**
* 高度
* @param {*} callback // 测量完成的回调
*/
MeasureTriangle(callback) {
this.ThreeMapInstance.measure.drawTriangle(callback)
}
changeEarthColor(color) {
this.ThreeMapInstance.measure.changeEarthColor(color)
}
/**
* 恢复初始相机
* @param {} option
*/
gotoOriginBoundingSphere(option) {
this.ThreeMapInstance.gotoOriginBoundingSphere()
}
/**
* 放大
*/
setMapbig() {
this.ThreeMapInstance.setMapbig()
}
/**
* 缩小
*/
setMapsmall() {
this.ThreeMapInstance.setMapsmall()
}
/**
* 时间轴操作
*/
// 动画暂停
clockPause() {
this.ThreeMapInstance.clockPause()
}
// 动画开始
clockRestar() {
this.ThreeMapInstance.clockRestar()
}
// 动画倍速
clockhastenMultiplier(v) {
this.ThreeMapInstance.clockhastenMultiplier(v)
}
// 动画减倍速
clockdecelerateMultiplier(v) {
this.ThreeMapInstance.clockdecelerateMultiplier(v)
}
// 重置时间轴
clockReset() {
this.ThreeMapInstance.clockReset()
}
// 循环/不循环
// 时间轴执行完后停止（LOOP_STOP为循环，UNBOUNDED为继续读秒）
clockClockRange(type = 'CLAMPED') {
this.ThreeMapInstance.clockClockRange(type)
}
// 添加水面
useDrawRiver(boundary,
waterImg,
extrudedHeight = 0) {
this.ThreeMapInstance.useDrawRiver(boundary,
waterImg,
extrudedHeight)
}
// 下雪
setSnowEffect() {
const criskaplugin = this.ThreeMapInstance.criskaplugin
criskaplugin.setSnowEffect()
}
// 下雨
setRainEffect() {
const criskaplugin = this.ThreeMapInstance.criskaplugin
criskaplugin.setRainEffect()
}
// 雾天
setFogEffect() {
const criskaplugin = this.ThreeMapInstance.criskaplugin
criskaplugin.setFogEffect()
}
// earth water 水系
setWaterEarth(degrees, options = {
baseWaterColor: [0, 127, 255, 1], // 水面基本颜色
blendColor: [127, 127, 127, 0.7], // 水面融合颜色
height: 0.24, // 水面高度
ground: false, // 是否贴底
frequency: 5000, // 水面频率
amplitude: 2, // 水面振幅
animationSpeed: 0.05, // 水面速度
specularIntensity: 0.5, // 水面强度
horizontalSpeed: 10, // 水平方向速度
verticalSpeed: 10, // 水平方向速度
outline: false
}) {
this.ThreeMapInstance.setWaterEarth(degrees, options)
}
// 获取 earth 要素
getEarthObj(refname) {
const earth = this.ThreeMapInstance.earth
let czmObject = earth.sceneTree.$refs[refname].czmObject
return czmObject
}
// 销毁 earth 要素
DestoryEarthObj(refname) {
let czmObject = this.getEarthObj(refname)
czmObject.destroy();
}
// 销毁否一类型的earth 要素
DestoryEarthtype(type) {
const earth = this.ThreeMapInstance.earth
let tree = this.ThreeMapInstance.earth.sceneTree.$refs
let treekeys = Object.keys(tree)
let typetrees = treekeys.filter((item) => {
if (item.includes(type)) {
return item
}
})
if (typetrees.length > 0) {
typetrees.forEach((item) => {
let treesArr = earth.sceneTree.root.children
treesArr.splice(treesArr.indexOf(item), 1)
})
} else {
console.warn(`没有${type}的数据`)
}
}
// 生成光锥体点位
createLightCone (points, options, popupHtml, leftFnc, rightObj) {
return this.ThreeMapInstance.createLightCone(points, options, popupHtml, leftFnc, rightObj)
}
// 生成视频点位
createVideoPoint (points) {
return this.ThreeMapInstance.createVideoPoint(points)
}
// 添加三维热力图
addHeatMap3D(points) {
let data = {
"type": "FeatureCollection",
"features":points
}
console.log(data,'data')
this.ThreeMapInstance.heatMap.loadGeoJsonData(data);
console.log('热力图已添加')
}
removeHeatMap3D() {
this.ThreeMapInstance.heatMap.remove()
}
}
export default ThreeMapClass