export const createMap = function(element, option) {
this._option = option ? option : {}
this._option.imageryProvider = this._option.imageryProvider ? new Cesium.UrlTemplateImageryProvider({
url:this._option.imageryProvider,
tilingScheme: new Cesium.WebMercatorTilingScheme(),
fileExtension: ‘png’
}) : layer.createImageryProvider({
type: ‘www_tdt’,
layer: ‘img’
});
this._option.terrainProvider = this._option.terrainProvider ? new Cesium.CesiumTerrainProvider({
url:this._option.terrainProvider,
requestVertexNormals: true,
requestWaterMask: true
}) : new Cesium.CesiumTerrainProvider({
url: ‘https://lab.earthsdk.com/terrain/42752d50ac1f11e99dbd8fd044883638',
requestVertexNormals: true,
requestWaterMask: true
});
this._option.orderIndependentTranslucency = this._option.orderIndependentTranslucency ? this._option.orderIndependentTranslucency : false;
this._option.contextOptions = this._option.contextOptions ? this._option.contextOptions : {
webgl: {
alpha: true,
depth:true,
stencil:true,
antialias:true,
premultipliedAlpha:true,
//通过canvas.toDataURL()实现截图需要将该项设置为true
preserveDrawingBuffer:true,
failIfMajorPerformanceCaveat:true
}
};
//需要进行可视化的数据源的集合
this._option.animation = this._option.animation ? this._option.animation : false; //是否显示动画控件
this._option.shouldAnimate = this._option.shouldAnimate ? this._option.shouldAnimate : true;
this._option.homeButton = this._option.homeButton ? this._option.homeButton : false; //是否显示Home按钮
this._option.fullscreenButton = this._option.fullscreenButton ? this._option.fullscreenButton : false; //是否显示全屏按钮
this._option.baseLayerPicker = this._option.baseLayerPicker ? this._option.baseLayerPicker : false; //是否显示图层选择控件
this._option.geocoder = this._option.geocoder ? this._option.geocoder : false; //是否显示地名查找控件
this._option.timeline = this._option.timeline ? this._option.timeline : false; //是否显示时间线控件
this._option.sceneModePicker = this._option.sceneModePicker ? this._option.sceneModePicker : false; //是否显示投影方式控件
this._option.navigationHelpButton = this._option.navigationHelpButton ? this._option.navigationHelpButton : false; //是否显示帮助信息控件
this._option.infoBox = this._option.infoBox ? this._option.infoBox : false; //是否显示点击要素之后显示的信息
this._option.requestRenderMode = this._option.requestRenderMode ? this._option.requestRenderMode : false; //启用请求渲染模式
this._option.scene3DOnly = this._option.scene3DOnly ? this._option.requestRenderMode : true; //每个几何实例将只能以3D渲染以节省GPU内存
this._option.sceneMode = this._option.sceneMode ? this._option.sceneMode : 3; //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式 Cesium.SceneMode
this._option.fullscreenElement = this._option.fullscreenElement ? this._option.fullscreenElement : document.body; //全屏时渲染的HTML元素 暂时没发现用处
this._option.skyAtmosphere = false; //关闭地球光环
let viewer = new Cesium.Viewer(element, this._option);
viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
viewer.scene.screenSpaceCameraController.zoomEventTypes = [
Cesium.CameraEventType.WHEEL,
Cesium.CameraEventType.PINCH,
];
viewer.scene.screenSpaceCameraController.tiltEventTypes = [
Cesium.CameraEventType.PINCH,
Cesium.CameraEventType.RIGHT_DRAG,
];
viewer.scene.skyBox.show = true;
//viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
//去掉entity的点击事件 start
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
//去掉entity的点击事件 end
viewer.scene.globe.depthTestAgainstTerrain = true;//深度检测
return viewer;
}
添加3dtile
new Cesium.Cesium3DTileset(params).readyPromise
.then((tileset) => {
// console.log( tileset )
that.tileset = tileset;
that._scene.primitives.add(tileset);
var position = that.getCartographic(tileset);
that.position = position;
//console.log(that.position)
//that._flyTo(position[0], position[1], position[2]);
that._viewer.zoomTo(tileset);
that._cb.call(that,position);
//添加悬浮样式
if (
that._option.showArea &&
that._option.showArea.show &&
that._option.showArea.material
) {
that.addShowArea(that._option.showArea.material, position);
}
//是否拖拽
if (that._option.drag) {
that.creatArrowPolyLine(tileset, position);
}
//是否旋转
if (that._option.rorate) {
that.createAxisSphere(tileset, position);
}
//是否缩放
if (that._option.scale) {
that.createScaleAxisSphere(tileset, position);
}
that._initEvent2();
})
.otherwise(function(error) {
console.log(error);
});
添加glb
let model = this._scene.primitives.add(Cesium.Model.fromGltf(params));
model.readyPromise.then((model) => {
that.model = model;
try {
// Play and loop all animations at half-spead
// model.activeAnimations.addAll({
// speedup : 0.5,
// loop : Cesium.ModelAnimationLoop.REPEAT
// });
that._flyTo(lng, lat, alt);
that._cb.call(that);
if (that._option.showArea && that._option.showArea.show && that._option.showArea.material) {
that.addShowArea(that._option.showArea.material)
}
//是否拖拽
if (that._option.drag) {
that.creatArrowPolyLine(model, this._option.position)
}
//是否缩放
if (that._option.needscale) {
that.createScaleAxisSphere(model, this._option.position)
}
that._initEvent()
} catch (error) {
console.log(error)
}
})
}
var materials = new farsee3D.materials('EllipsoidFade',{color:Cesium.Color.AQUAMARINE,time:3000});
flyTo
this.viewerFlyTo = function (entity, heading, pitch, range) {
this.viewer.flyTo(entity, {
offset: {
heading: Cesium.Math.toRadians(heading),
pitch: Cesium.Math.toRadians(pitch),
range: range
}
});
}
this.cameraFlyTo = function (pos, heading, pitch, roll) {
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(pos[0], pos[1], pos[2]),
orientation: {
heading: Cesium.Math.toRadians(heading),
pitch: Cesium.Math.toRadians(pitch),
roll: roll
}
});
}
GeoJsonDataSource
GeoJsonDataSource: function (geojsonUrl, callBack) {
var promise = Cesium.GeoJsonDataSource.load(geojsonUrl)
promise.then(function (dataSource) {
callBack(dataSource);
})
return promise
}
camera
// 获取当前镜头位置的笛卡尔坐标
let cameraPos = viewer.camera.position;
// 获取当前坐标系标准
let ellipsoid = viewer.scene.globe.ellipsoid;
// 根据坐标系标准,将笛卡尔坐标转换为地理坐标
let cartographic = ellipsoid.cartesianToCartographic(cameraPos);
// 获取镜头的高度
let height = cartographic.height;
// 根据上面当前镜头的位置,获取该中心位置的经纬度坐标
this.centerLon = parseFloat(Cesium.Math.toDegrees(cartographic.longitude).toFixed(8));
this.centerLat = parseFloat(Cesium.Math.toDegrees(cartographic.latitude).toFixed(8));
this.zoomIn = function () {
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(this.centerLon, this.centerLat, height / 1.8),
duration: 1.0
});
}
this.out = function () {
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(this.centerLon, this.centerLat, height * 1.8),
duration: 1.0
});
}
坐标转换
WHCGCE2000ToWGS84(coord) {
var wgs84 = '+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs ';
var WHCGCE2000 = '+proj=tmerc +lat_0=0 +lon_0=114.3333333333333 +k=1 +x_0=800000 +y_0=-3000000.0 +ellps=GRS80 +units=m +no_defs';
return proj4(WHCGCE2000, wgs84, coord)
},