You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
876 lines
32 KiB
876 lines
32 KiB
3 years ago
|
|
||
|
|
var CLOUD = CLOUD || {};
|
||
|
|
|
||
|
|
|
||
|
|
function BDImageryProvider(options) {
|
||
|
|
|
||
|
|
// this._url = "http://online1.map.bdimg.com/onlinelabel/?qt=tile";
|
||
|
|
this._url = "https://api.map.baidu.com/customimage/tile?udt=20181205&scale=1&ak=1XjLLEhZhQNUzd93EjU5nOGQ&customid=white";
|
||
|
|
|
||
|
|
this._tileWidth = 256;
|
||
|
|
this._tileHeight = 256;
|
||
|
|
this._maximumLevel = 18;
|
||
|
|
|
||
|
|
this._height = 33746824;
|
||
|
|
this._width = 33554054;
|
||
|
|
|
||
|
|
var rectangleSouthwestInMeters = new Cesium.Cartesian2(-this._width, -this._height);
|
||
|
|
var rectangleNortheastInMeters = new Cesium.Cartesian2(this._width, this._height);
|
||
|
|
this._tilingScheme = new Cesium.WebMercatorTilingScheme({ rectangleSouthwestInMeters: rectangleSouthwestInMeters, rectangleNortheastInMeters: rectangleNortheastInMeters });
|
||
|
|
// this._tilingScheme = new Cesium.WebMercatorTilingScheme();
|
||
|
|
|
||
|
|
this._credit = undefined;
|
||
|
|
this._rectangle = this._tilingScheme.rectangle;
|
||
|
|
this._ready = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
function buildImageUrl(imageryProvider, x, y, level) {
|
||
|
|
var url = imageryProvider._url + "&x={x}&y={y}&z={z}";
|
||
|
|
var tileW = imageryProvider._tilingScheme.getNumberOfXTilesAtLevel(level);
|
||
|
|
var tileH = imageryProvider._tilingScheme.getNumberOfYTilesAtLevel(level);
|
||
|
|
|
||
|
|
url = url
|
||
|
|
.replace('{x}', x - tileW / 2)
|
||
|
|
.replace('{y}', tileH / 2 - y - 1)
|
||
|
|
.replace('{z}', level);
|
||
|
|
|
||
|
|
return url;
|
||
|
|
}
|
||
|
|
|
||
|
|
Cesium.defineProperties(BDImageryProvider.prototype, {
|
||
|
|
url: {
|
||
|
|
get: function () {
|
||
|
|
return this._url;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
token: {
|
||
|
|
get: function () {
|
||
|
|
return this._token;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
proxy: {
|
||
|
|
get: function () {
|
||
|
|
return this._proxy;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
tileWidth: {
|
||
|
|
get: function () {
|
||
|
|
//>>includeStart('debug', pragmas.debug);
|
||
|
|
if (!this._ready) {
|
||
|
|
throw new DeveloperError('tileWidth must not be called before the imagery provider is ready.');
|
||
|
|
}
|
||
|
|
//>>includeEnd('debug');
|
||
|
|
|
||
|
|
return this._tileWidth;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
tileHeight: {
|
||
|
|
get: function () {
|
||
|
|
//>>includeStart('debug', pragmas.debug);
|
||
|
|
if (!this._ready) {
|
||
|
|
throw new DeveloperError('tileHeight must not be called before the imagery provider is ready.');
|
||
|
|
}
|
||
|
|
//>>includeEnd('debug');
|
||
|
|
|
||
|
|
return this._tileHeight;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
maximumLevel: {
|
||
|
|
get: function () {
|
||
|
|
//>>includeStart('debug', pragmas.debug);
|
||
|
|
if (!this._ready) {
|
||
|
|
throw new DeveloperError('maximumLevel must not be called before the imagery provider is ready.');
|
||
|
|
}
|
||
|
|
//>>includeEnd('debug');
|
||
|
|
|
||
|
|
return this._maximumLevel;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
minimumLevel: {
|
||
|
|
get: function () {
|
||
|
|
//>>includeStart('debug', pragmas.debug);
|
||
|
|
if (!this._ready) {
|
||
|
|
throw new DeveloperError('minimumLevel must not be called before the imagery provider is ready.');
|
||
|
|
}
|
||
|
|
//>>includeEnd('debug');
|
||
|
|
|
||
|
|
return 0;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
tilingScheme: {
|
||
|
|
get: function () {
|
||
|
|
//>>includeStart('debug', pragmas.debug);
|
||
|
|
if (!this._ready) {
|
||
|
|
throw new DeveloperError('tilingScheme must not be called before the imagery provider is ready.');
|
||
|
|
}
|
||
|
|
//>>includeEnd('debug');
|
||
|
|
|
||
|
|
return this._tilingScheme;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
rectangle: {
|
||
|
|
get: function () {
|
||
|
|
//>>includeStart('debug', pragmas.debug);
|
||
|
|
if (!this._ready) {
|
||
|
|
throw new DeveloperError('rectangle must not be called before the imagery provider is ready.');
|
||
|
|
}
|
||
|
|
//>>includeEnd('debug');
|
||
|
|
|
||
|
|
return this._rectangle;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
tileDiscardPolicy: {
|
||
|
|
get: function () {
|
||
|
|
//>>includeStart('debug', pragmas.debug);
|
||
|
|
if (!this._ready) {
|
||
|
|
throw new DeveloperError('tileDiscardPolicy must not be called before the imagery provider is ready.');
|
||
|
|
}
|
||
|
|
//>>includeEnd('debug');
|
||
|
|
|
||
|
|
return this._tileDiscardPolicy;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
errorEvent: {
|
||
|
|
get: function () {
|
||
|
|
return this._errorEvent;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
ready: {
|
||
|
|
get: function () {
|
||
|
|
return this._ready;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
readyPromise: {
|
||
|
|
get: function () {
|
||
|
|
return this._readyPromise.promise;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
credit: {
|
||
|
|
get: function () {
|
||
|
|
return this._credit;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
usingPrecachedTiles: {
|
||
|
|
get: function () {
|
||
|
|
return this._useTiles;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
hasAlphaChannel: {
|
||
|
|
get: function () {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
layers: {
|
||
|
|
get: function () {
|
||
|
|
return this._layers;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
BDImageryProvider.prototype.getTileCredits = function (x, y, level) {
|
||
|
|
return undefined;
|
||
|
|
};
|
||
|
|
|
||
|
|
BDImageryProvider.prototype.requestImage = function (x, y, level) {
|
||
|
|
|
||
|
|
if (!this._ready) {
|
||
|
|
throw new DeveloperError('requestImage must not be called before the imagery provider is ready.');
|
||
|
|
}
|
||
|
|
|
||
|
|
var url = buildImageUrl(this, x, y, level);
|
||
|
|
return Cesium.ImageryProvider.loadImage(this, url);
|
||
|
|
};
|
||
|
|
function createAMapByUrl(Cesium,options) {
|
||
|
|
options = Cesium.defaultValue(options, {});
|
||
|
|
|
||
|
|
var templateUrl = Cesium.defaultValue(options.url, '//webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}');
|
||
|
|
|
||
|
|
var trailingSlashRegex = /\/$/;
|
||
|
|
var defaultCredit = new Cesium.Credit('AMap');
|
||
|
|
|
||
|
|
var tilingScheme = new Cesium.WebMercatorTilingScheme({ ellipsoid : options.ellipsoid });
|
||
|
|
|
||
|
|
var tileWidth = 256;
|
||
|
|
var tileHeight = 256;
|
||
|
|
|
||
|
|
var minimumLevel = Cesium.defaultValue(options.minimumLevel, 0);
|
||
|
|
var maximumLevel = Cesium.defaultValue(options.minimumLevel, 18);
|
||
|
|
|
||
|
|
var rectangle = Cesium.defaultValue(options.rectangle, tilingScheme.rectangle);
|
||
|
|
|
||
|
|
// Check the number of tiles at the minimum level. If it's more than four,
|
||
|
|
// throw an exception, because starting at the higher minimum
|
||
|
|
// level will cause too many tiles to be downloaded and rendered.
|
||
|
|
var swTile = tilingScheme.positionToTileXY(Cesium.Rectangle.southwest(rectangle), minimumLevel);
|
||
|
|
var neTile = tilingScheme.positionToTileXY(Cesium.Rectangle.northeast(rectangle), minimumLevel);
|
||
|
|
var tileCount = (Math.abs(neTile.x - swTile.x) + 1) * (Math.abs(neTile.y - swTile.y) + 1);
|
||
|
|
//>>includeStart('debug', pragmas.debug);
|
||
|
|
if (tileCount > 4) {
|
||
|
|
throw new Cesium.DeveloperError('The rectangle and minimumLevel indicate that there are ' + tileCount + ' tiles at the minimum level. Imagery providers with more than four tiles at the minimum level are not supported.');
|
||
|
|
}
|
||
|
|
//>>includeEnd('debug');
|
||
|
|
|
||
|
|
var credit = Cesium.defaultValue(options.credit, defaultCredit);
|
||
|
|
if (typeof credit === 'string') {
|
||
|
|
credit = new Cesium.Credit(credit);
|
||
|
|
}
|
||
|
|
|
||
|
|
return new Cesium.UrlTemplateImageryProvider({
|
||
|
|
url: templateUrl,
|
||
|
|
proxy: options.proxy,
|
||
|
|
credit: credit,
|
||
|
|
tilingScheme: tilingScheme,
|
||
|
|
tileWidth: tileWidth,
|
||
|
|
tileHeight: tileHeight,
|
||
|
|
minimumLevel: minimumLevel,
|
||
|
|
maximumLevel: maximumLevel,
|
||
|
|
rectangle: rectangle
|
||
|
|
});
|
||
|
|
}
|
||
|
|
var fixGltf = function (gltf) {
|
||
|
|
if (!gltf.extensionsUsed) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var v = gltf.extensionsUsed.indexOf('KHR_technique_webgl');
|
||
|
|
|
||
|
|
if (v !== -1) {
|
||
|
|
gltf.extensionsRequired.splice(t, 1, 'KHR_techniques_webgl');
|
||
|
|
gltf.extensionsUsed.splice(v, 1, 'KHR_techniques_webgl');
|
||
|
|
gltf.extensions = gltf.extensions || {};
|
||
|
|
gltf.extensions['KHR_techniques_webgl'] = {};
|
||
|
|
gltf.extensions['KHR_techniques_webgl'].programs = gltf.programs;
|
||
|
|
gltf.extensions['KHR_techniques_webgl'].shaders = gltf.shaders;
|
||
|
|
gltf.extensions['KHR_techniques_webgl'].techniques = gltf.techniques;
|
||
|
|
var techniques = gltf.extensions['KHR_techniques_webgl'].techniques;
|
||
|
|
|
||
|
|
gltf.materials.forEach(function (mat, index) {
|
||
|
|
gltf.materials[index].extensions || (gltf.materials[index].extensions = { KHR_technique_webgl: {} }); // vtxf 181025
|
||
|
|
gltf.materials[index].extensions['KHR_technique_webgl'].values = gltf.materials[index].values;
|
||
|
|
gltf.materials[index].extensions['KHR_techniques_webgl'] = gltf.materials[index].extensions['KHR_technique_webgl'];
|
||
|
|
|
||
|
|
var vtxfMaterialExtension = gltf.materials[index].extensions['KHR_techniques_webgl'];
|
||
|
|
vtxfMaterialExtension.technique || (vtxfMaterialExtension.technique = gltf.materials[index].technique); // vtxf 181025
|
||
|
|
|
||
|
|
|
||
|
|
for (var value in vtxfMaterialExtension.values) {
|
||
|
|
var us = techniques[vtxfMaterialExtension.technique].uniforms;
|
||
|
|
for (var key in us) {
|
||
|
|
if (us[key] === value) {
|
||
|
|
vtxfMaterialExtension.values[key] = vtxfMaterialExtension.values[value];
|
||
|
|
delete vtxfMaterialExtension.values[value];
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
if (Cesium.defined(gltf.extensionsRequired)) {
|
||
|
|
var t = gltf.extensionsRequired.indexOf('KHR_technique_webgl');
|
||
|
|
|
||
|
|
techniques.forEach(function (t) {
|
||
|
|
for (var attribute in t.attributes) {
|
||
|
|
var name = t.attributes[attribute];
|
||
|
|
t.attributes[attribute] = t.parameters[name];
|
||
|
|
};
|
||
|
|
|
||
|
|
for (var uniform in t.uniforms) {
|
||
|
|
var name = t.uniforms[uniform];
|
||
|
|
t.uniforms[uniform] = t.parameters[name];
|
||
|
|
};
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Object.defineProperties(Cesium.Model.prototype, {
|
||
|
|
_cachedGltf: {
|
||
|
|
set: function (value) {
|
||
|
|
this._vtxf_cachedGltf = value;
|
||
|
|
if (this._vtxf_cachedGltf && this._vtxf_cachedGltf._gltf) {
|
||
|
|
fixGltf(this._vtxf_cachedGltf._gltf);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
get: function () {
|
||
|
|
return this._vtxf_cachedGltf;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
class CesiumLoader {
|
||
|
|
/**
|
||
|
|
*Creates an instance of CesiumLoader.
|
||
|
|
* @param {Container} container
|
||
|
|
* @param {Object} params
|
||
|
|
* @param {Number} params.longitude 模型初始经度
|
||
|
|
* @param {Number} params.latitude 模型初始纬度
|
||
|
|
* @param {bool} params.useTerrain 是否使用地形
|
||
|
|
* @param {Number} params.clipHeight 模型的剖切高度 单位为 m，不需要高度迫切取undefined 或者 0
|
||
|
|
* @param {Number} params.duration cesium 相机跳转时间，单位为s 默认为5
|
||
|
|
* @memberof CesiumLoader
|
||
|
|
*/
|
||
|
|
constructor(params) {
|
||
|
|
this.container = params.container;
|
||
|
|
this.worldCoordinates = [0, 0];
|
||
|
|
this.worldCoordinates[0] = params.longitude == undefined ? 121.32403 : params.longitude;
|
||
|
|
this.worldCoordinates[1] = params.latitude == undefined ? 31.198192 : params.latitude;
|
||
|
|
this.useTerrain = params.useTerrain == undefined ? false : params.useTerrain;
|
||
|
|
this.imageryLayer = params.imageryLayer == undefined ? CLOUD.EnumCesiumImageryLayerType.AUTO : params.imageryLayer;
|
||
|
|
this.clipHeight = params.clipHeight == undefined ? 0 : params.clipHeight;
|
||
|
|
this.duration = params.duration == undefined ? 5 : params.duration;
|
||
|
|
this.accessToken = params.accessToken;
|
||
|
|
this.globalPlane = undefined;
|
||
|
|
this.viewer = undefined;
|
||
|
|
this.terrainProvider = undefined;
|
||
|
|
this.terrainHeight = {};
|
||
|
|
this.globeMatrix = undefined;
|
||
|
|
this.cameraScale = 0.001;
|
||
|
|
this.viewport = undefined;
|
||
|
|
this.originBimCameraTar = undefined;
|
||
|
|
this.closeToModel = 0.0;
|
||
|
|
this.gdRoadNoLabel = undefined;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* init cesium
|
||
|
|
*
|
||
|
|
* @param {function} callback cesium初始化完成回调函数
|
||
|
|
* @param {Object} para 需要传递的对象
|
||
|
|
* @memberof CesiumLoader
|
||
|
|
*/
|
||
|
|
init(callback, para) {
|
||
|
|
let self = this;
|
||
|
|
|
||
|
|
if (this.accessToken) {
|
||
|
|
Cesium.Ion.defaultAccessToken = this.accessToken;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.useTerrain && !this.accessToken) {
|
||
|
|
console.warn('when useTerrain,the accessToken can not be null');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Query the terrain height of two Cartographic positions
|
||
|
|
this.terrainProvider = Cesium.createWorldTerrain();
|
||
|
|
var positions = [
|
||
|
|
Cesium.Cartographic.fromDegrees(this.worldCoordinates[0], this.worldCoordinates[1])
|
||
|
|
];
|
||
|
|
var promise = Cesium.sampleTerrainMostDetailed(this.terrainProvider, positions);
|
||
|
|
|
||
|
|
//TODO:支持多种地图类型 + 离线地图数据
|
||
|
|
var imageryLayer = undefined;
|
||
|
|
switch (self.imageryLayer) {
|
||
|
|
case CLOUD.EnumCesiumImageryLayerType.AUTO:
|
||
|
|
imageryLayer = self.accessToken == undefined ? new Cesium.TileMapServiceImageryProvider({
|
||
|
|
url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
|
||
|
|
}) : false;
|
||
|
|
break;
|
||
|
|
case CLOUD.EnumCesiumImageryLayerType.BAIDU:
|
||
|
|
imageryLayer = new BDImageryProvider();
|
||
|
|
break;
|
||
|
|
case CLOUD.EnumCesiumImageryLayerType.GAODE:
|
||
|
|
var amapVector = createAMapByUrl(Cesium, { url: "//webst01.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}" });
|
||
|
|
var amapRoad = createAMapByUrl(Cesium, { url: "//wprd04.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8<ype=11", });
|
||
|
|
var amapLabel = createAMapByUrl(Cesium, { url: "//wprd04.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8<ype=12", });
|
||
|
|
imageryLayer = amapVector;
|
||
|
|
break;
|
||
|
|
case CLOUD.EnumCesiumImageryLayerType.MAPBOX:
|
||
|
|
imageryLayer = new Cesium.MapboxImageryProvider({
|
||
|
|
mapId: 'mapbox.streets-satellite'
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
case CLOUD.EnumCesiumImageryLayerType.GOOGLE:
|
||
|
|
imageryLayer = imageryLayer = new Cesium.UrlTemplateImageryProvider({
|
||
|
|
url: "//www.google.cn/maps/vt?lyrs=s&gl=CN&x={x}&y={y}&z={z}",
|
||
|
|
tilingScheme: new Cesium.WebMercatorTilingScheme(),
|
||
|
|
minimumLevel: 1,
|
||
|
|
maximumLevel: 20
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
case CLOUD.EnumCesiumImageryLayerType.ARCGIS:
|
||
|
|
imageryLayer = new Cesium.ArcGisMapServerImageryProvider({
|
||
|
|
url: '//nationalmap.gov.au/proxy/http://services.ga.gov.au/site_3/rest/services/Electricity_Infrastructure/MapServer'
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
imageryLayer = self.createGoogleMapsByUrl(Cesium, { url: "//mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}" });
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (self.useTerrain === true) {
|
||
|
|
Cesium.when(promise, function (updatedPositions) {
|
||
|
|
self.terrainHeight = updatedPositions[0].height;
|
||
|
|
self.viewer.terrainProvider = Cesium.createWorldTerrain();
|
||
|
|
self.initView(imageryLayer, callback, para);
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
} else {
|
||
|
|
self.terrainHeight = 0;
|
||
|
|
self.initView(imageryLayer, callback, para);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
initView(imageryLayer, callback, para) {
|
||
|
|
let self = this;
|
||
|
|
// Init view
|
||
|
|
self.viewer = new Cesium.Viewer(self.container, {
|
||
|
|
useDefaultRenderLoop: true,
|
||
|
|
//shouldAnimate : true,
|
||
|
|
selectionIndicator: false,
|
||
|
|
homeButton: false,
|
||
|
|
sceneModePicker: false,
|
||
|
|
navigationHelpButton: false,
|
||
|
|
infoBox: false,
|
||
|
|
navigationHelpButton: false,
|
||
|
|
navigationInstructionsInitiallyVisible: false,
|
||
|
|
animation: false,
|
||
|
|
timeline: false,
|
||
|
|
fullscreenButton: false,
|
||
|
|
allowTextureFilterAnisotropic: false,
|
||
|
|
contextOptions: {
|
||
|
|
webgl: {
|
||
|
|
alpha: true,
|
||
|
|
antialias: true,
|
||
|
|
preserveDrawingBuffer: true,
|
||
|
|
failIfMajorPerformanceCaveat: false,
|
||
|
|
depth: true,
|
||
|
|
stencil: false,
|
||
|
|
anialias: true
|
||
|
|
},
|
||
|
|
},
|
||
|
|
targetFrameRate: 60,
|
||
|
|
resolutionScale: 0.1,
|
||
|
|
orderIndependentTranslucency: true,
|
||
|
|
imageryProvider: imageryLayer,
|
||
|
|
|
||
|
|
baseLayerPicker: false,
|
||
|
|
geocoder: false,
|
||
|
|
automaticallyTrackDataSourceClocks: false,
|
||
|
|
dataSources: null,
|
||
|
|
clock: null,
|
||
|
|
terrainShadows: Cesium.ShadowMode.DISABLED,
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
self.viewer._cesiumWidget._creditContainer.style.display = "none"; //去除版权信息
|
||
|
|
|
||
|
|
self.viewer.scene.skyBox.show = false;
|
||
|
|
self.viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
|
||
|
|
|
||
|
|
// skyAtmosphere setting
|
||
|
|
// self.viewer.scene.skyAtmosphere = new Cesium.SkyAtmosphere();
|
||
|
|
// self.viewer.scene.skyAtmosphere.brightnessShift = 0.75;
|
||
|
|
// self.viewer.scene.skyAtmosphere.saturationShift = 0.58;
|
||
|
|
// self.viewer.scene.skyAtmosphere.hueShift = -0.09;
|
||
|
|
|
||
|
|
//self.loadGltf(self.worldCoordinates[0]+0.00095, self.worldCoordinates[1]+0.0003,self.terrainHeight+100, '../../../ThirdParty/Cesium/Specs/Data/Models/MaterialsCommon/Cesium_Man.gltf')
|
||
|
|
//self.viewer.camera.switchToPerspectiveFrustum();
|
||
|
|
|
||
|
|
//var scene = this.viewer.scene;
|
||
|
|
//scene.screenSpaceCameraController.minimumZoomDistance = 200;
|
||
|
|
|
||
|
|
// 画坐标系
|
||
|
|
// var hprRollZero = new Cesium.HeadingPitchRoll();
|
||
|
|
// var position = new Cesium.Cartesian3.fromDegrees(self.worldCoordinates[0],self.worldCoordinates[1],self.terrainHeight);
|
||
|
|
// var converter =Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');
|
||
|
|
// var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, hprRollZero, Cesium.Ellipsoid.WGS84, converter);
|
||
|
|
// self.viewer.scene.primitives.add(new Cesium.DebugModelMatrixPrimitive({
|
||
|
|
// modelMatrix: modelMatrix,
|
||
|
|
// length: 400.0,
|
||
|
|
// width: 10.0
|
||
|
|
// }));
|
||
|
|
|
||
|
|
self.updateCesiumOriginPos();
|
||
|
|
|
||
|
|
//增加imageLayer
|
||
|
|
var gdRoadNoLabel = new Cesium.UrlTemplateImageryProvider({
|
||
|
|
url:
|
||
|
|
"//webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&style=8&scale=1",
|
||
|
|
minimumLevel: 3,
|
||
|
|
maximumLevel: 18
|
||
|
|
});
|
||
|
|
self.gdRoad = self.viewer.imageryLayers.addImageryProvider(gdRoadNoLabel);
|
||
|
|
// 透明度
|
||
|
|
self.gdRoad.alpha = 0.5;
|
||
|
|
self.gdRoad.show = false;
|
||
|
|
|
||
|
|
// var pickHandler = new Cesium.ScreenSpaceEventHandler(self.viewer.scene.canvas);
|
||
|
|
// pickHandler.setInputAction(function (movement) {
|
||
|
|
// console.log(movement.position);
|
||
|
|
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
|
|
|
||
|
|
//url = "../cesium/ThirdParty/Cesium/Apps/SampleData/models/CesiumMan/Cesium_Man.gltf"
|
||
|
|
//loadGltf(worldCoordinates[0], worldCoordinates[1], terrainHeight,url)
|
||
|
|
|
||
|
|
//loadSkyBox();
|
||
|
|
|
||
|
|
//url = '../cesium/data/ZheJiangGeo.json'
|
||
|
|
//loadGeoJson(url);
|
||
|
|
|
||
|
|
//滚轮事件监听
|
||
|
|
// var handler = new Cesium.ScreenSpaceEventHandler(self.viewer.canvas);
|
||
|
|
// handler.setInputAction(function (wheelment) {}, Cesium.ScreenSpaceEventType.WHEEL);
|
||
|
|
|
||
|
|
//点击事件监听
|
||
|
|
let handler = new Cesium.ScreenSpaceEventHandler(self.viewer.scene.canvas);
|
||
|
|
handler.setInputAction(function (movement) {
|
||
|
|
let position = self.viewer.scene.pickPosition(movement.position);
|
||
|
|
console.log(position);
|
||
|
|
//let dist = Math.sqrt(Math.pow(position.x - self.viewer.camera.position.x,2.0) + Math.pow(position.y - self.viewer.camera.position.y,2.0) + Math.pow(position.z - self.viewer.camera.position.z,2.0));
|
||
|
|
//console.log(dist);
|
||
|
|
position = self.kadierTollh(position);
|
||
|
|
console.log(position);
|
||
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
|
|
|
||
|
|
self.viewer.camera.flyTo({
|
||
|
|
destination: para.cesiumDestination != undefined ? para.cesiumDestination : self.cesiumOriginPos,
|
||
|
|
orientation: para.cesiumOrientation != undefined ? para.cesiumOrientation : {
|
||
|
|
//direction : new Cesium.Cartesian3( 0.9054182767831188, -0.3771947217141325, 0.19478677054175442) ,
|
||
|
|
//up : new Cesium.Cartesian3(0.0966575350162154, 0.6299571927734148, 0.7705914976157133)
|
||
|
|
heading: Cesium.Math.toRadians(175.0),
|
||
|
|
pitch: Cesium.Math.toRadians(-35.0),
|
||
|
|
roll: 0.0
|
||
|
|
},
|
||
|
|
duration: self.duration,
|
||
|
|
complete: function () {
|
||
|
|
// 到达位置后执行的回调函数
|
||
|
|
// self.viewer.scene.screenSpaceCameraController.enableZoom = false;
|
||
|
|
// self.viewer.scene.screenSpaceCameraController.enableTilt = false;
|
||
|
|
// self.viewer.scene.screenSpaceCameraController.enableRotate = false;
|
||
|
|
// self.viewer.scene.screenSpaceCameraController.enableTranslate = false;
|
||
|
|
// self.viewer.scene.screenSpaceCameraController.enableLook = false;
|
||
|
|
callback && callback(para);
|
||
|
|
|
||
|
|
//renderThreeContext();
|
||
|
|
//renderWebglContext();
|
||
|
|
//initThree3();
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
this.viewer.scene.globe.depthTestAgainstTerrain = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Create GoogleMaps By Url
|
||
|
|
* @param {Object} Cesium Cesium
|
||
|
|
* @param {Object} options 地图参数设置
|
||
|
|
*
|
||
|
|
* @memberof CesiumLoader
|
||
|
|
*/
|
||
|
|
|
||
|
|
createGoogleMapsByUrl(Cesium, options) {
|
||
|
|
options = Cesium.defaultValue(options, {});
|
||
|
|
|
||
|
|
var templateUrl = Cesium.defaultValue(options.url, 'https://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}');
|
||
|
|
|
||
|
|
var trailingSlashRegex = /\/$/;
|
||
|
|
var defaultCredit = new Cesium.Credit('Google Maps');
|
||
|
|
|
||
|
|
var tilingScheme = new Cesium.WebMercatorTilingScheme({ ellipsoid: options.ellipsoid });
|
||
|
|
|
||
|
|
var tileWidth = 256;
|
||
|
|
var tileHeight = 256;
|
||
|
|
|
||
|
|
var minimumLevel = Cesium.defaultValue(options.minimumLevel, 0);
|
||
|
|
var maximumLevel = Cesium.defaultValue(options.minimumLevel, 17);
|
||
|
|
|
||
|
|
var rectangle = Cesium.defaultValue(options.rectangle, tilingScheme.rectangle);
|
||
|
|
|
||
|
|
// Check the number of tiles at the minimum level. If it's more than four,
|
||
|
|
// throw an exception, because starting at the higher minimum
|
||
|
|
// level will cause too many tiles to be downloaded and rendered.
|
||
|
|
var swTile = tilingScheme.positionToTileXY(Cesium.Rectangle.southwest(rectangle), minimumLevel);
|
||
|
|
var neTile = tilingScheme.positionToTileXY(Cesium.Rectangle.northeast(rectangle), minimumLevel);
|
||
|
|
var tileCount = (Math.abs(neTile.x - swTile.x) + 1) * (Math.abs(neTile.y - swTile.y) + 1);
|
||
|
|
//>>includeStart('debug', pragmas.debug);
|
||
|
|
if (tileCount > 4) {
|
||
|
|
throw new Cesium.DeveloperError('The rectangle and minimumLevel indicate that there are ' + tileCount + ' tiles at the minimum level. Imagery providers with more than four tiles at the minimum level are not supported.');
|
||
|
|
}
|
||
|
|
//>>includeEnd('debug');
|
||
|
|
|
||
|
|
var credit = Cesium.defaultValue(options.credit, defaultCredit);
|
||
|
|
if (typeof credit === 'string') {
|
||
|
|
credit = new Cesium.Credit(credit);
|
||
|
|
}
|
||
|
|
|
||
|
|
return new Cesium.UrlTemplateImageryProvider({
|
||
|
|
url: templateUrl,
|
||
|
|
proxy: options.proxy,
|
||
|
|
credit: credit,
|
||
|
|
tilingScheme: tilingScheme,
|
||
|
|
tileWidth: tileWidth,
|
||
|
|
tileHeight: tileHeight,
|
||
|
|
minimumLevel: minimumLevel,
|
||
|
|
maximumLevel: maximumLevel,
|
||
|
|
rectangle: rectangle
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* update Cesium Origin Position
|
||
|
|
*
|
||
|
|
* @memberof CesiumLoader
|
||
|
|
*/
|
||
|
|
updateCesiumOriginPos() {
|
||
|
|
this.cesiumOriginPos = Cesium.Cartesian3.fromDegrees(
|
||
|
|
this.worldCoordinates[0], this.worldCoordinates[1],
|
||
|
|
this.terrainHeight + 100
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 三维坐标转换为经纬度坐标
|
||
|
|
*
|
||
|
|
* @param {Cartesian3} Cartesian3
|
||
|
|
* @returns
|
||
|
|
* @memberof CesiumLoader
|
||
|
|
*/
|
||
|
|
kadierTollh(Cartesian3) {
|
||
|
|
if (Cesium.defined(Cartesian3)) {
|
||
|
|
var cartographic = Cesium.Cartographic.fromCartesian(Cartesian3);
|
||
|
|
var lon_f = Cesium.Math.toDegrees(cartographic.longitude);
|
||
|
|
var lat_f = Cesium.Math.toDegrees(cartographic.latitude);
|
||
|
|
var po_hig = cartographic.height;
|
||
|
|
|
||
|
|
return {
|
||
|
|
'lon': lon_f,
|
||
|
|
'lat': lat_f,
|
||
|
|
'alt': po_hig
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 经纬度坐标转换为三维坐标
|
||
|
|
*
|
||
|
|
* @param {Number} lng 经度
|
||
|
|
* @param {Number} lat 纬度
|
||
|
|
* @param {Number} alt 高度
|
||
|
|
* @returns {Cesium.Cartesian3}
|
||
|
|
* @memberof CesiumLoader
|
||
|
|
*/
|
||
|
|
llhToKadier(lng, lat, alt) {
|
||
|
|
return Cesium.Cartesian3.fromDegrees(lng, lat, alt)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 加载gltf文件
|
||
|
|
* @param {Number} lng 经度
|
||
|
|
* @param {Number} lat 纬度
|
||
|
|
* @param {Number} alt 高度
|
||
|
|
* @param {Number} heading 偏航角
|
||
|
|
* @param {Number} pitch 俯仰角
|
||
|
|
* @param {Number} roll 滚转角
|
||
|
|
* @param {Function} callback 回调函数
|
||
|
|
* @returns {Cesium.Cartesian3}
|
||
|
|
* @memberof CesiumLoader
|
||
|
|
*/
|
||
|
|
loadGltf(url, long, lat, offset, heading, pitch, roll, callback) {
|
||
|
|
|
||
|
|
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
|
||
|
|
Cesium.Cartesian3.fromDegrees(long, lat, offset));
|
||
|
|
|
||
|
|
var position = Cesium.Cartesian3.fromDegrees(long, lat, offset);
|
||
|
|
var h = Cesium.Math.toRadians(heading);
|
||
|
|
var p = Cesium.Math.toRadians(pitch);
|
||
|
|
var r = Cesium.Math.toRadians(roll);
|
||
|
|
var hpr = new Cesium.HeadingPitchRoll(h, p, r);
|
||
|
|
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
|
||
|
|
|
||
|
|
// var model = this.viewer.scene.primitives.add(
|
||
|
|
// Cesium.Model.fromGltf({
|
||
|
|
// url: url,
|
||
|
|
// modelMatrix: modelMatrix,
|
||
|
|
// scale: 200.0
|
||
|
|
// })
|
||
|
|
// );
|
||
|
|
|
||
|
|
// model.readyPromise.then(function (model) {
|
||
|
|
// callback && callback(model);
|
||
|
|
// }).otherwise(function (error) {
|
||
|
|
// console.log(error);
|
||
|
|
// });
|
||
|
|
|
||
|
|
var entity = this.viewer.entities.add({
|
||
|
|
name: url,
|
||
|
|
position: position,
|
||
|
|
orientation: orientation,
|
||
|
|
model: {
|
||
|
|
uri: url,
|
||
|
|
minimumPixelSize: 128,
|
||
|
|
maximumScale: 20000
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
callback && callback(entity);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 加载 3dtiles 数据
|
||
|
|
*
|
||
|
|
* @param {Number} offset 偏移高度
|
||
|
|
* @param {String} url 3dtile json 文件请求路径
|
||
|
|
* @param {Number} maximumScreenSpaceError
|
||
|
|
* @param {Function} callback 加载完成回调函数
|
||
|
|
*/
|
||
|
|
load3dTiles(url, offset,maximumScreenSpaceError,callback) {
|
||
|
|
var self = this;
|
||
|
|
var tileSet = new Cesium.Cesium3DTileset({
|
||
|
|
url: url,
|
||
|
|
maximumScreenSpaceError:maximumScreenSpaceError,
|
||
|
|
});
|
||
|
|
|
||
|
|
tileSet.readyPromise.then(function (tileSet) {
|
||
|
|
self.viewer.scene.primitives.add(tileSet);
|
||
|
|
var boundingSphere = tileSet.boundingSphere;
|
||
|
|
var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);//获取到倾斜数据中心点的经纬度坐标（弧度）
|
||
|
|
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);//倾斜数据中心点的笛卡尔坐标
|
||
|
|
var positions = [Cesium.Cartographic.fromDegrees(cartographic.longitude, cartographic.latitude)];
|
||
|
|
|
||
|
|
var terrainHeight = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, offset);//带高程的新笛卡尔坐标
|
||
|
|
var translation = Cesium.Cartesian3.subtract(terrainHeight, surface, new Cesium.Cartesian3());//做差得到变换矩阵
|
||
|
|
tileSet.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
|
||
|
|
|
||
|
|
// self.viewer.zoomTo(tileSet, new Cesium.HeadingPitchRange(0.5, -0.2, tileSet.boundingSphere
|
||
|
|
// .radius *
|
||
|
|
// 1.0));
|
||
|
|
callback && callback(tileSet);
|
||
|
|
}).otherwise(function (error) {
|
||
|
|
window.alert(error);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 根据具体参数加载 3dtiles 数据
|
||
|
|
*
|
||
|
|
* @param {Number} offset 偏移高度
|
||
|
|
* @param {String} url 3dtile json 文件请求路径
|
||
|
|
* @param {Number} long 经度
|
||
|
|
* @param {Number} lat 纬度
|
||
|
|
* @param {Number} offset 偏移高度
|
||
|
|
* @param {Number} maximumScreenSpaceError
|
||
|
|
* @param {Function} callback 加载完成回调函数
|
||
|
|
*/
|
||
|
|
|
||
|
|
load3dTilesByPosition(url, long, lat, offset, maximumScreenSpaceError,callback) {
|
||
|
|
var self = this;
|
||
|
|
var tileSet = self.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
|
||
|
|
url: url,
|
||
|
|
maximumScreenSpaceError:maximumScreenSpaceError,
|
||
|
|
scale: 1.0
|
||
|
|
}));
|
||
|
|
|
||
|
|
tileSet.readyPromise.then(function (argument) {
|
||
|
|
// 1、旋转
|
||
|
|
let hpr = new Cesium.Matrix3();
|
||
|
|
// new Cesium.HeadingPitchRoll(heading, pitch, roll)
|
||
|
|
// heading围绕负z轴的旋转。pitch是围绕负y轴的旋转。Roll是围绕正x轴的旋转
|
||
|
|
let hprObj = new Cesium.HeadingPitchRoll(Math.PI, Math.PI, Math.PI);
|
||
|
|
|
||
|
|
// Cesium.Matrix3.fromHeadingPitchRoll （headingPitchRoll，result）
|
||
|
|
hpr = Cesium.Matrix3.fromHeadingPitchRoll(hprObj, hpr);
|
||
|
|
|
||
|
|
// 2、平移
|
||
|
|
// 2.3储存平移的结果
|
||
|
|
let modelMatrix = Cesium.Matrix4.multiplyByTranslation(
|
||
|
|
// 2.1从以度为单位的经度和纬度值返回Cartesian3位置
|
||
|
|
// 2.2计算4x4变换矩阵
|
||
|
|
Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(long,
|
||
|
|
lat, offset)), new Cesium.Cartesian3(), new Cesium.Matrix4()
|
||
|
|
);
|
||
|
|
/// 3、应用旋转
|
||
|
|
// Cesium.Matrix4.multiplyByMatrix3 （矩阵，旋转，结果）
|
||
|
|
Cesium.Matrix4.multiplyByMatrix3(modelMatrix, hpr, modelMatrix);
|
||
|
|
tileSet._root.transform = modelMatrix;
|
||
|
|
callback && callback(tileSet);
|
||
|
|
});
|
||
|
|
//self.viewer.zoomTo(tileSet);
|
||
|
|
}
|
||
|
|
|
||
|
|
loadSkyBox() {
|
||
|
|
this.viewer.scene.skyBox = new Cesium.SkyBox({
|
||
|
|
sources: {
|
||
|
|
positiveX: '../cesium/ThirdParty/Cesium/Apps/SampleData/px.jpg',
|
||
|
|
negativeX: '../cesium/ThirdParty/Cesium/Apps/SampleData/nx.jpg',
|
||
|
|
positiveY: '../cesium/ThirdParty/Cesium/Apps/SampleData/py.jpg',
|
||
|
|
negativeY: '../cesium/ThirdParty/Cesium/Apps/SampleData/ny.jpg',
|
||
|
|
positiveZ: '../cesium/ThirdParty/Cesium/Apps/SampleData/pz.jpg',
|
||
|
|
negativeZ: '../cesium/ThirdParty/Cesium/Apps/SampleData/nz.jpg',
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
loadGeoJson(url) {
|
||
|
|
var promise = Cesium.GeoJsonDataSource.load(url);
|
||
|
|
promise.then(function (dataSource) {
|
||
|
|
self.viewer.dataSources.add(dataSource);
|
||
|
|
|
||
|
|
//Get the array of entities
|
||
|
|
var entities = dataSource.entities.values;
|
||
|
|
|
||
|
|
// var colorHash = {};
|
||
|
|
// for (var i = 0; i < entities.length; i++) {
|
||
|
|
// //For each entity, create a random color based on the state name.
|
||
|
|
// //Some states have multiple entities, so we store the color in a
|
||
|
|
// //hash so that we use the same color for the entire state.
|
||
|
|
// var entity = entities[i];
|
||
|
|
// var name = entity.name;
|
||
|
|
// var color = colorHash[name];
|
||
|
|
// if (!color) {
|
||
|
|
// color = Cesium.Color.fromRandom({
|
||
|
|
// alpha: 1.0
|
||
|
|
// });
|
||
|
|
// colorHash[name] = color;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// //Set the polygon material to our random color.
|
||
|
|
// entity.polygon.material = color;
|
||
|
|
// //Remove the outlines.
|
||
|
|
// entity.polygon.outline = false;
|
||
|
|
|
||
|
|
// //Extrude the polygon based on the state's population. Each entity
|
||
|
|
// //stores the properties for the GeoJSON feature it was created from
|
||
|
|
// //Since the population is a huge number, we divide by 50.
|
||
|
|
// entity.polygon.extrudedHeight = entity.properties.Population / 50.0;
|
||
|
|
// }
|
||
|
|
}).otherwise(function (error) {
|
||
|
|
//Display any errrors encountered while loading.
|
||
|
|
window.alert(error);
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
//控制路图透明度以及是否显示
|
||
|
|
setUpGDRoad(enable, alpha) {
|
||
|
|
this.gdRoad.alpha = alpha;
|
||
|
|
this.gdRoad.show = enable;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
CLOUD.CesiumLoader = CesiumLoader;
|