xczm-helper

Usage

npm install xczm-helper

import {CesiumHelper} from "xczm-helper";

let token = 'Your CesiumIon Access Token';

let czmHelper = null
let Cesium = null;
let viewer = null;

czmHelper = new CesiumHelper(token);
czmHelper.createMap("map");
viewer = this.czmHelper.viewer;
Cesium = this.czmHelper.Cesium;

API

Constructor

/***
 * 构造函数
 * @param baseUrl Cesium 加载需要用到的静态js包的存放路径,默认为"/static/Cesium", {@link https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/}
 * @param CesiumIonToken Cesium Ion 的 token
 */
constructor(CesiumIonToken, baseUrl)

createMap(document, options)

/***
 * 创建地图
 * @see {@link https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html#.ConstructorOptions 官网}
 * @param document 地图 Canvas 的载体
 * @param options 创建地图时的参数
 */
createMap(document, options)

loadGeoJson(data, options)

/***
 * 加载GeoJson
 * @see {@link https://cesium.com/learn/cesiumjs/ref-doc/GeoJsonDataSource.html?classFilter=GeoJson#.load 官网}
 * @param {Object | String} data 可以是GeoJson 或 TopoJson 的 Json 对象， 也可以是可以拉取到 Json 对象的 url 地址
 * @param {String} options.sourceUri 可选 - 可以拉取到 Json 对象的 url 地址，会覆盖data
 * @param {Cesium.GeoJsonDataSource.describe} options.describe  可选 -
 * @param {Number} options.markerSize 可选 - 如果矢量类型为点, 表示点的大小，以像素为单位
 * @param {String} options.markerSymbol 可选 - 如果矢量类型为点, 表示点的样式
 * @param {String} options.markerColor 可选 - 如果矢量类型为点, 表示点的颜色。Css样式风格
 * @param {String} options.stroke 可选 - 如果矢量类型为多边形或线, 表示线的颜色。Css样式风格
 * @param {Number} options.strokeWidth 可选 - 如果矢量类型为多边形或线, 表示线或多边形的边的宽度(注意：MultiPolygon 的此属性不生效)
 * @param {String} options.fill 可选 - 如果矢量类型为多边形, 表示多边形内部填充的颜色。Css样式风格
 * @param {Boolean} options.clampToGround 可选 - 是否将矢量图形固定在地面上
 * @param {String} options.credit 可选 - 数据源信息
 * @returns {Promise<DataSource>}
 */
loadGeoJson(data, options)

flyTo(target, option)

/***
 * 视角飞行到某物。若需要指定相机飞行到某个位置，请使用 {@link cameraFlyTo}
 * @see {@link https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html?classFilter=Viewer#flyTo Cesium.Viewer.flyTo}
 * @param {any} target 必需 - 可以是很多东西，基本囊括可以显示到地球上的任意东西及其集合
 * @param option 可选 - 飞行时参数
 * @param {Number} option.duration 可选 - 飞行过程持续的时间
 * @param {Number} option.maximumHeight 可选 - 飞行时相机的最大高度, 以米为单位
 * @param {Number} option.heading 可选 - 飞行到目标后相机的航向角, 以角度为单位。
 * @param {Number} option.pitch 可选 - 飞行到目标后相机的俯仰角, 以角度为单位。
 * @param {Number} option.range 可选 - 飞行到目标后相机距离目标的距离, 以米为单位。
 * @returns {Promise<Boolean>}  
 */
flyTo(target, option)

cameraFlyTo(option)

/***
 * 相机飞行到指定位置
 * @see {@link https://cesium.com/learn/cesiumjs/ref-doc/Camera.html?classFilter=camera#flyTo Cesium.Camera.flyTo}
 * @param option 相机飞行的参数
 * @param {{lng,lat,height} | {west, south, east, north}}option.destination 相机最终停留的位置,或相机最终显示的长方形
 * @param {{heading, pitch, roll}} option.orientation 相机飞行后的朝向，heading: 航向角; pitch: 俯仰角; roll: 翻滚角
 * @param {Number} option.duration 飞行持续时间，以秒为单位
 * @param {Function} option.complete 飞行完成时的回调
 * @param {Function} option.cancel 飞行被取消时的回调
 * @param {Number} option.maximumHeight 飞行的最高高度，以米为单位
 * @param {Number} option.pitchAdjustHeight
 * @param {Number} option.flyOverLongitude
 * @param {Number} option.flyOverLongitudeWeight
 * @param {Boolean} option.convert
 * @param {Cesium.EasingFunction.Callback} option.easingFunction 飞行动画的线性变化
 */
cameraFlyTo(option)

loadGltf(url, {longitude, latitude, height}, HPR)

/***
 * 加载 Gltf/Glb 模型，返回 {@link Cesium.Model} 对象
 * @description 本方法适用于加载相对独立的模型，如需要与其他组件一起使用模型，请使用{@link viewer.entities.add}方法
 * @param {string} url .gltf/.glb 文件路径
 * @param {object} position 模型需要放置的位置(84坐标-EPSG:4326)
 * @param {number} position.longitude 经度
 * @param {number} position.latitude 纬度
 * @param {number} position.height 高度
 * @param {Object} HPR 可选 - 模型加载后的转向参数
 * @param {number} HPR.heading [角度] 模型航向角,即左右转向
 * @param {number} HPR.pitch [角度] 模型俯仰角,即上下转向
 * @param {number} HPR.roll [角度] 模型翻滚角,即水平翻滚
 * @returns {Model}
 */
loadGltf(url, {longitude, latitude, height}, HPR)

geoJsonToLightingLine(data, type, options)

/***
 * 加载 GeoJson 使其样式为流动
 * @param {Object | string} data GeoJson 对象或 GeoJson 的 url
 * @param {string} type 可选 - 流动线的样式 line: 线条; pipe: 管道
 * @param {Object} options 可选 - GeoJson 加载后的参数
 * @param {number} options.width 线条或管道的宽度/直径
 * @param {Object | string} options.image 流动效果的图片
 * @param {string} options.color [HEX] 线条/管道的颜色
 * @param {string} options.color2 [HEX] 仅 type 为 pipe 时生效,管道流光的颜色
 * @param {boolean} options.hasWell 是否判断包含收尾相连的线，如果有,则认为线段为井
 * @param {number} options.wellHeight 仅 hasWell 为 true 时生效,井的深度
 * @param {number} options.wellThickness 仅 hasWell 为 true 时生效,井壁的厚度
 * @param {string} options.wellColor [HEX] 仅 hasWell 为 true 时生效,井的颜色
 * @param {number} options.duration [ms] 每段管线流动的时长
 * @return Promise<Entity[]> 返回Entity数组
 */
geoJsonToLightingLine(data, type,  options)

getLinkedPointList(startPoint, endPoint, angularityFactor, numOfSingleLine)

/**
 * 传入两个点，返回一个弧线点集
 * @param {Cesium.Cartesian3} startPoint 开始节点
 * @param {Cesium.Cartesian3} endPoint 结束节点
 * @param {number} angularityFactor 曲率,曲率越高,曲线弧度越大
 * @param {number} numOfSingleLine 点集数量,点集数量约大,弧线约圆滑
 * @returns {Array<Cesium.Cartesian3>} 点的集合
 */
getLinkedPointList(startPoint, endPoint, angularityFactor, numOfSingleLine)

drawODLine(startPoint, endPoint, angularityFactor, numOfSingleLine, options)

/***
 * 传入两个点,绘制一条OD线
 * @param {Cesium.Cartesian3} startPoint 起始点
 * @param {Cesium.Cartesian3} endPoint 结束点
 * @param {number} angularityFactor 曲率
 * @param {number} numOfSingleLine od线中点的数量
 * @param {Object} options OD线的样式参数
 * @param {number} options.width 线的宽度
 * @param {string | Object} options.image 可选 - 线的样式图片
 * @param {string} options.color 可选 - [HEX] 线的颜色
 * @param {number} options.duration 可选 - [ms] 线条流动的时长
 * @return Cesium.Entity
 */
drawODLine(startPoint, endPoint, angularityFactor, numOfSingleLine, options)

drawLightingWall(positions, groundHeight, wallHeight, style)

/***
 * 绘制一道光墙
 * @param {Array<Cesium.Cartesian3>} positions 墙的路径
 * @param {number} groundHeight 墙的底边高度，可理解为墙体距离地面的高度
 * @param {number} wallHeight 墙的高度
 * @param {Object} style 可选 - 墙的样式
 * @param {string} style.color 墙的颜色
 * @param {Object | string} style.image 光墙的流光样式图片
 * @param {Object | string} style.image2 光墙的流光样式图片
 * @param {number} style.duration 光墙的流光循环时长
 */
drawLightingWall(positions, groundHeight, wallHeight, style)