gisthreemap
Version:
基于webGL的三维api
499 lines (453 loc) • 12.7 kB
Markdown
##### 暂时注释掉在package.json 中 "cesium": "^1.91.0"
##### 本插件暂不支持npm模式载入cesium
##### 因ceisum 静态文件的限制，无法在你的项目中使用 npm的方式安装cesium，除非在vue.config.js中手动配置
##### 建议使用CDN的方式引入 cesium
##### cesium CDN 地址:
##### <script src="https://cesium.com/downloads/cesiumjs/releases/1.91/Build/Cesium/Cesium.js"></script>
##### <link href="https://cesium.com/downloads/cesiumjs/releases/1.91/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
```javascript
class ThreeMapClass {
constructor(options) {
this.options = options;
this.ClassType = ThreeMapClass.ClassType;
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) {
return new this.ThreeMapInstance.CustomEntitysEffect(this.getViewer(),dataSource)
}
/**
* 添加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 {} points 点位数据
* @param {*} name soureData名称
* @returns
*/
addMakers (points, name) {
return this.ThreeMapInstance.addMakers(points, name)
}
/**
* 通过name删除DataSource
* @param {*} name
* @returns
*/
removeDataSource (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)
}
/**
* 根据经纬度获取笛卡尔三维坐标
* @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)
}
/**
* 根据3dtile的id获取模型
* @param {*} modelid
* @returns
*/
getModel (modelid) {
return this.ThreeMapInstance.getModel(modelid)
}
/**
* 根据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)
}
// 添加面
addPolygon (polygon, Additional,dataSource) {
const CustomEntitys = new this.ThreeMapInstance.CustomEntitys(this.getViewer(),dataSource)
return this.ThreeMapInstance.defaultEntitys.createPolygon(polygon, Additional)
}
// 添加具有拉伸效果的面状要素
addStretchingPolygon (polygon, Additional) {
return this.ThreeMapInstance.defaultEntitysEffect.createPolygon(polygon, Additional)
}
// 添加线
addPolyline (polyline, Additional) {
return this.ThreeMapInstance.defaultEntitys.createPolyline(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)
}
/**
* 添加飞线
* @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) {
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)
}
/**
* 删除实体和清除绘制状态
*/
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)
}
}
```