/* 引入Cesium */ // import * as Cesium from 'Cesium'; import CoordTransform from "./common/CoordTransform"; /** *流动纹理线 */ import PolylineDirectionMaterialProperty from "./PolylineObject/PolylineDirectionMaterialProperty.js"; import WallMaterialProperty from "./WallObject/WallMaterialProperty.js"; /** * 加载各类地图服务 */ class LoadMapData { /** * 默认初始化 * @param {Object} viewer 三维场景 * * @example * * 例1: * const layer = new LoadMapData(viewer); * */ constructor(viewer) { if (!viewer) throw new Cesium.DeveloperError('no viewer object!'); this._viewer = viewer; } /** * 添加ImageryProvider到地图中 * @ignore 忽略注释,注释不生成Doc * @param {Object} provider 图层构建器 * @return {String} 服务Id */ _addImageryProvider(id, provider) { /* 加入到整体图层中 以便可以删除对应的图层 */ window[id] = this._viewer.imageryLayers.addImageryProvider(provider); } /** * 在地图中移除ImageryProvider * @ignore 忽略注释,注释不生成Doc * @param {String} serviceId 服务Id */ _removeImageryProvider(serviceId) { this._viewer.imageryLayers.remove(window[serviceId]); //移除图层 window[serviceId] = null; } /** *Cesium中的地形类是直接通过不同的terrainProvider控制的,然后把某一个实例化的terrainProvider赋值给Viewer.terrainProvider来控制地形数据的显隐。所以Cesium中的地形图层只能有一个。 * 添加terrainProvider到地图中(地形) * @ignore 忽略注释,注释不生成Doc * @param {Object} provider 图层构建器 */ _addTerrainProvider(provider) { this._viewer.terrainProvider = provider; } /** * 移除地形 * @ignore 忽略注释,注释不生成Doc */ _setEllipsoidTerrain() { this._viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider({}); } /** * 添加scene.primitives到地图中(三维实景/白膜) * @ignore 忽略注释,注释不生成Doc * @param {Object} scenePrimitives */ _addScenePrimitives(scenePrimitives) { /* 加入到整体图层中 以便可以删除对应的图层 */ this._viewer.scene.primitives.add(scenePrimitives);; } /** * 在地图中移除scene.primitives * @ignore 忽略注释,注释不生成Doc * @param {String} serviceId 服务Id */ _removeScenePrimitives(serviceId) { this._viewer.scene.primitives.remove(window[serviceId]); //移除图层 window[serviceId] = null; } /** * 创建GUID * @ignore 忽略注释,注释不生成Doc * @return {String} 唯一标识符 */ _guid() { function S4() { return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); } return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4()); } /** * 地图纠偏 * @ignore 忽略注释,注释不生成Doc * @param {Object} provider */ _transformProjection(provider) { let webMercatorTilingScheme = provider.tilingScheme; let projection = webMercatorTilingScheme._projection; projection.x_project = projection.project; projection.project = function(cartographic) { let point; return ( (point = CoordTransform.WGS84ToGCJ02( Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude) )), projection.x_project( new Cesium.Cartographic( Cesium.Math.toRadians(point[0]), Cesium.Math.toRadians(point[1]) ) ) ); }; projection.x_unproject = projection.unproject; projection.unproject = function(cartesian) { let point, cartographic = projection.x_unproject(cartesian); return ( (point = CoordTransform.GCJ02ToWGS84( Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude) )), new Cesium.Cartographic( Cesium.Math.toRadians(point[0]), Cesium.Math.toRadians(point[1]) ) ); }; return provider; } } /** * 通用对外公开函数 */ Object.assign(LoadMapData.prototype, /** @lends LoadMapData.prototype */ { /** * 添加地形 * @function * @param {Object} options 具有以下属性: * @param {String} options.url 地形服务url * @param {Number} [options.terrainExaggeration=1] 地形夸张系数 * @param {Number} [options.requestVertexNormals=false] 请求地形照明数据 * @param {Number} [options.requestWaterMask=false] 请求水体效果所需要的海岸线数据 * * @example * layer.addTerrain({ * url: "http://data.marsgis.cn/terrain" * }); * */ addTerrain(options) { if (!Cesium.defined(options) || !Cesium.defined(options.url)) { throw new Cesium.DeveloperError("options.url is required."); } let _ConstructorOptions = { url: options.url }; // 请求地形照明数据 if (options.requestVertexNormals) { _ConstructorOptions.requestVertexNormals = options.requestVertexNormals; } else { _ConstructorOptions.requestVertexNormals = false; } // 请求水体效果所需要的海岸线数据 if (options.requestWaterMask) { _ConstructorOptions.requestWaterMask = options.requestWaterMask; } else { _ConstructorOptions.requestWaterMask = false; } var terrainProvider = new Cesium.CesiumTerrainProvider(_ConstructorOptions); this._addTerrainProvider(terrainProvider); // 地形夸张 this.setTerrainExaggeration(options) }, /** * 添加Mapbox图层 * @param {Object} options 具有以下属性: * @param {String} [options.id=guid] 服务ID(不支持全数字),加入到整体图层中 以便可以删除对应的图层 * @param {String} [options.url='https://api.mapbox.com/styles/v1/'] Mapbox服务器url. * @param {String} [options.username='mapbox'] 映射帐户的用户名. * @param {String} options.styleId Mapbox样式ID. * @param {String} options.accessToken 图像的公共访问令牌. * @param {Boolean} [options.scaleFactor] 定瓷砖是否以@2倍的比例因子呈现 * @param {Number} [options.alpha=1] 透明度 * @return {String} 服务Id * * @example * layer.addMapboxLayer({ * styleId: 'streets-v11', * accessToken: 'thisIsMyAccessToken' * },function (serviceId) { * * }); * */ addMapboxLayer(options, callSuccess) { if (!Cesium.defined(options) || !Cesium.defined(options.styleId)) { throw new Cesium.DeveloperError("options.styleId is required."); } if (!Cesium.defined(options.accessToken)) { throw new Cesium.DeveloperError("options.accessToken is required."); } options.id = options.id || this._guid(); var imageryProvider = new Cesium.MapboxStyleImageryProvider({ url: options.url, username: options.username, styleId: options.styleId, accessToken: options.accessToken, scaleFactor: options.scaleFactor }); /* 加入图层 */ this._addImageryProvider(options.id, imageryProvider); //设置透明度 this.setLayersStyle({ serviceId: options.id, alpha: options.alpha }); if (callSuccess) callSuccess(options.id); }, /** * 加载URL模板服务 * @param {Object} options 具有以下属性: * @param {String} [options.id=guid] 服务ID(不支持全数字),加入到整体图层中 以便可以删除对应的图层 * @param {string} options.url 服务地址 * @param {string} [options.CRS] 坐标系,纠偏-“WGS84” * @param {Number} [options.minimumLevel=0] 最小层级 * @param {Number} [options.maximumLevel=18] 最大层级 * @param {Number} [options.alpha=1] 透明度 * @return {String} 服务Id * * @example * layer.addUrlTemplateImagery({ * url: 'https://yoururl/{Time}/{z}/{y}/{x}.png' * },function (serviceId) { * * }); * */ addUrlTemplateImagery: function(options, callSuccess) { if (!Cesium.defined(options) || !Cesium.defined(options.url)) { throw new Cesium.DeveloperError("options.url is required."); } options.id = options.id || this._guid(); options.CRS = options.CRS || ""; let _ConstructorOptions = { url: options.url }; if (options.minimumLevel) { _ConstructorOptions.minimumLevel = options.minimumLevel; } if (options.maximumLevel) { _ConstructorOptions.maximumLevel = options.maximumLevel; } else { _ConstructorOptions.maximumLevel = 18; } var imageryProvider = new Cesium.UrlTemplateImageryProvider(_ConstructorOptions); if (options.CRS.toUpperCase() === "WGS84") { imageryProvider.readyPromise.then(() => { this._transformProjection(imageryProvider); }); } /* 加入图层 */ this._addImageryProvider(options.id, imageryProvider); //设置透明度 this.setLayersStyle({ serviceId: options.id, alpha: options.alpha }); if (callSuccess) callSuccess(options.id); }, /** * @description:加载-TMS-地图服务 * @param {Object} options 具有以下属性: * @param {String} [options.id=guid] 服务ID(不支持全数字),加入到整体图层中 以便可以删除对应的图层 * @param {string} options.url 服务地址 * @param {Number} [options.minimumLevel=0] 最小层级 * @param {Number} [options.maximumLevel] 最大层级 * @param {Number} [options.alpha=1] 透明度 * @return {String} 服务Id * * @example * layer.addTileMapServiceImagery({ * url: '' * },function (serviceId) { * * }); * */ addTileMapServiceImagery: function(options, callSuccess) { if (!Cesium.defined(options) || !Cesium.defined(options.url)) { throw new Cesium.DeveloperError("options.url is required."); } options.id = options.id || this._guid(); let _ConstructorOptions = { url: options.url }; if (options.minimumLevel) { _ConstructorOptions.minimumLevel = options.minimumLevel; } if (options.maximumLevel) { _ConstructorOptions.maximumLevel = options.maximumLevel; } else { _ConstructorOptions.maximumLevel = 18; } var imageryProvider = new Cesium.TileMapServiceImageryProvider(_ConstructorOptions); /* 加入图层 */ this._addImageryProvider(options.id, imageryProvider); //设置透明度 this.setLayersStyle({ serviceId: options.id, alpha: options.alpha }); if (callSuccess) callSuccess(options.id); }, /** * 加载-WMTS-地图服务 * @param {Object} options 具有以下属性: * @param {String} [options.id=guid] 服务ID(不支持全数字),加入到整体图层中 以便可以删除对应的图层 * @param {string} options.url 服务地址 * @param {string} options.layers 图层集合,WMTS请求的层名 * @param {string} options.style 图层样式,WMTS请求的样式名 * @param {string} options.tileMatrixSetID 用于WMTS请求的TileMatrixSet的标识符。 * @param {Array} [options.tileMatrixLabels] TileMatrix中用于WMTS请求的标识符列表,每个TileMatrix级别一个标识符。 * @param {string} [options.format='image/png'] 从服务器检索图像的MIME类型 * @param {Number} [options.minimumLevel=0] 最小层级 * @param {Number} [options.maximumLevel] 最大层级 * @param {Number} [options.alpha=1] 透明度 * @return {String} 服务Id * * @example * layer.addWebMapTileService({ * url: 'http://t0.tianditu.gov.cn/cia_w/wmts?tk=10f42f91b6e50d2a8eec980577e6a2e6', //加载全国中文注记(经纬度) * layers: 'cia', * style: 'default', * tileMatrixSetID: 'w', * format: 'tiles', * maximumLevel: 18 * },function (serviceId) { * * }); * */ addWebMapTileService: function(options, callSuccess) { if (!Cesium.defined(options) || !Cesium.defined(options.url)) { throw new Cesium.DeveloperError("options.url is required."); } if (!Cesium.defined(options.layers)) { throw new Cesium.DeveloperError("options.layers is required."); } if (!Cesium.defined(options.style)) { throw new Cesium.DeveloperError("options.style is required."); } if (!Cesium.defined(options.tileMatrixSetID)) { throw new Cesium.DeveloperError("options.tileMatrixSetID is required."); } options.id = options.id || this._guid(); let _ConstructorOptions = { url: options.url, layer: options.layers, style: options.style, tileMatrixSetID: options.tileMatrixSetID, format: Cesium.defaultValue(options.format, 'image/png'), }; if (options.tileMatrixLabels) { _ConstructorOptions.tileMatrixLabels = options.tileMatrixLabels; } if (options.minimumLevel) { _ConstructorOptions.minimumLevel = options.minimumLevel; } if (options.maximumLevel) { _ConstructorOptions.maximumLevel = options.maximumLevel; } else { _ConstructorOptions.maximumLevel = 18; } let imageryProvider = new Cesium.WebMapTileServiceImageryProvider(_ConstructorOptions); /* 加入图层 */ this._addImageryProvider(options.id, imageryProvider); //设置透明度 this.setLayersStyle({ serviceId: options.id, alpha: options.alpha }); if (callSuccess) callSuccess(options.id); }, /** * 提供由Web地图服务(WMS)服务器托管的平铺图像。 * @param {Object} options 具有以下属性: * @param {String} [options.id=guid] 服务ID(不支持全数字),加入到整体图层中 以便可以删除对应的图层 * @param {string} options.url 服务地址 * @param {string} options.layers 加载图层目录,要包含的层,用逗号分隔。 * @param {Number} [options.parameters={ service:'WMS', version:'1.1.1', request:'GetMap', styles:'', format:'image/jpeg' }] 基础参数 * @param {Number} [options.minimumLevel=0] 最小层级 * @param {Number} [options.maximumLevel] 最大层级 * @param {Number} [options.alpha=1] 透明度 * @return {String} 服务Id * * @example * layer.addWebMapService({ * url : 'https://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer', * layers : '0', * },function (serviceId) { * * }); * */ addWebMapService: function(options, callSuccess) { if (!Cesium.defined(options) || !Cesium.defined(options.url)) { throw new Cesium.DeveloperError("options.url is required."); } if (!Cesium.defined(options.layers)) { throw new Cesium.DeveloperError("options.layers is required."); } options.id = options.id || this._guid(); let _ConstructorOptions = { url: options.url, layers: options.layers, }; if (options.parameters) { _ConstructorOptions.parameters = options.parameters; } else { _ConstructorOptions.parameters = { service: 'WMS', transparent: true, //是否透明 request: "GetMap", //添加上则显示,好像变成了必填 format: "image/png", } } if (options.minimumLevel) { _ConstructorOptions.minimumLevel = options.minimumLevel; } if (options.maximumLevel) { _ConstructorOptions.maximumLevel = options.maximumLevel; } else { _ConstructorOptions.maximumLevel = 18; } let imageryProvider = new Cesium.WebMapServiceImageryProvider(_ConstructorOptions); /* 加入图层 */ this._addImageryProvider(options.id, imageryProvider); //设置透明度 this.setLayersStyle({ serviceId: options.id, alpha: options.alpha }); if (callSuccess) callSuccess(options.id); }, /** * 提供由 ArcGIS MapServer 托管的切片图像(ArcGIS Online和Server的相关服务)。默认情况下,使用服务器的预缓存切片(如果可用)。 * @param {Object} options 具有以下属性: * @param {String} [options.id=guid] 服务ID(不支持全数字),加入到整体图层中 以便可以删除对应的图层 * @param {string} options.url 服务地址 * @param {string} [options.layers] 服务图层列表,以逗号分隔的要显示的层列表,如果要显示所有层,则未定义。 * @param {Number} [options.alpha=1] 透明度 * @return {String} 服务Id * * @example * layer.addArcGisMapServer({ * url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer', * },function (serviceId) { * * }); * */ addArcGisMapServer: function(options, callSuccess) { if (!Cesium.defined(options) || !Cesium.defined(options.url)) { throw new Cesium.DeveloperError("options.url is required."); } options.id = options.id || this._guid(); let _ConstructorOptions = { url: options.url }; if (options.layers) { _ConstructorOptions.layers = options.layers; } let imageryProvider = new Cesium.ArcGisMapServerImageryProvider(_ConstructorOptions); /* 加入图层 */ this._addImageryProvider(options.id, imageryProvider); //设置透明度 this.setLayersStyle({ serviceId: options.id, alpha: options.alpha }); if (callSuccess) callSuccess(options.id); }, /** * 加载Cesium3DTileset地图服务--实景 * @param {Object} options 具有以下属性: * @param {String} [options.id=guid] 服务ID(不支持全数字),加入到整体图层中 以便可以删除对应的图层 * @param {String} options.url 服务地址 * @param {Number} [options.height=15] 实景抬高高度 * @param {Number} [options.alpha=1] 实景透明度 * @return {String} 服务Id * * @example * layer.addCesium3DTileset({ * url : 'http://localhost:8002/tilesets/Seattle/tileset.json', * },function (serviceId) { * * }); * */ addCesium3DTileset: function(options, callSuccess) { let _self = this; if (!Cesium.defined(options) || !Cesium.defined(options.url)) { throw new Cesium.DeveloperError("options.url is required."); } options.id = options.id || this._guid(); let _ConstructorOptions = { url: options.url, skipLevelOfDetail: true, }; let tileSetModel = new Cesium.Cesium3DTileset(_ConstructorOptions); tileSetModel.readyPromise.then(tileset => { console.log("加载完成") window[options.id] = tileset; _self._addScenePrimitives(tileset); //设置实景距离地面高度,抬高实景 _self.set3DTilePosition({ serviceId: options.id, height: options.height, }); //设置实景透明度 _self.set3DTileStyle({ serviceId: options.id, alpha: options.alpha, }); if (callSuccess) callSuccess(options.id); }).catch(function(error) { console.log(error); }); }, /** * 加载Cesium3DTileset地图服务--白膜 * @param {Object} options 具有以下属性: * @param {String} [options.id=guid] 服务ID(不支持全数字),加入到整体图层中 以便可以删除对应的图层 * @param {String} options.url 服务地址 * @return {String} 服务Id * * @example * layer.addCesium3DTilesetBm({ * url : 'http://localhost:8002/tilesets/Seattle/tileset.json', * },function (serviceId) { * * }); * */ addCesium3DTilesetBm: function(options, callSuccess) { let _self = this; if (!Cesium.defined(options) || !Cesium.defined(options.url)) { throw new Cesium.DeveloperError("options.url is required."); } options.id = options.id || this._guid(); let _ConstructorOptions = { url: options.url, skipLevelOfDetail: true, }; let tileSetModel = new Cesium.Cesium3DTileset(_ConstructorOptions); tileSetModel.readyPromise.then(tileset => { console.log("加载完成") window[options.id] = tileset; _self._addScenePrimitives(tileset); //设置白膜样式 _self.set3DTileBMStyle({ serviceId: options.id, color: options.color, }); if (callSuccess) callSuccess(options.id); }).catch(function(error) { console.log(error); }); }, /** * 图片服务 * @param {Object} options 具有以下属性: * @param {Array/Cesium.Cartesian3} options.points 模型加载位置 Array[lng,lat,height]经度,以度为单位,纬度,以度为单位,高程 * @param {String} options.url 服务地址 * @param {String} [options.id=guid] 服务ID(不支持全数字),加入到整体图层中 以便可以删除对应的图层 * @param {Number} [options.alpha=1] 透明度 * @return {String} 服务Id * * @example * layer.addPolygonImageMaterial({ * id:"aa", * url : 'http://localhost:8002/tilesets/Seattle/tileset.json', * },function (serviceId) { * * }); * */ addPolygonImageMaterial: function(options, callSuccess) { if (!Cesium.defined(options.points)) { throw new Cesium.DeveloperError("options.points is required."); } if (options.points.length < 3) { reject("面对象,点数至少3个"); } /* 转换坐标 */ let positions = []; if (options.points instanceof Cesium.Cartesian3) { positions = options.points; } else { positions = options.points.map(point => { return Cesium.Cartesian3.fromDegrees(point[0], point[1], point[2] || 0); }); } options.id = options.id || this._guid(); options.alpha = options.alpha || 1; this.classificationType = Cesium.ClassificationType.BOTH; if (options.classificationType === "Terrain") { this.classificationType = Cesium.ClassificationType.TERRAIN; } else if (options.classificationType === "3DTiles") { this.classificationType = Cesium.ClassificationType.CESIUM_3D_TILE; } /* 创建材质 */ if (options.url) { if (!Cesium.Entity.supportsMaterialsforEntitiesOnTerrain(this._viewer.scene)) { window.alert("Terrain Entity materials are not supported on this platform"); } this.material = new Cesium.ImageMaterialProperty({ image: options.url, repeat: Cesium.Cartesian2(1.0, 1.0), // 不重复 transparent: true, // 启用png透明 color: Cesium.Color.WHITE.withAlpha(options.alpha) }); } else { this.material = Cesium.Color.RED.withAlpha(options.alpha); } window[options.id] = this._viewer.entities.add({ id: options.id, polygon: { hierarchy: positions, material: this.material, classificationType: this.classificationType, }, }); ////设置透明度 // this.setPolygonImageMaterial({ // serviceId: options.id, // alpha: options.alpha, // }); if (callSuccess) callSuccess(options.id); }, /** * 加载GLTF/GLB模型数据 * @param {Object} options 参数对象 * @param {String} [options.id=guid] 模型实体加载ID,加入到整体图层中 以便可以删除对应的图层 * @param {Array/Cesium.Cartesian3} options.points 模型加载位置 Array[lng,lat,height]经度,以度为单位,纬度,以度为单位,高程 * @param {String} options.url 模型路径 * @param {Number} [options.heading=0.0] 以弧度为单位的航向分量 * @param {Number} [options.pitch=0.0] 以弧度为单位的螺距分量 * @param {Number} [options.roll=0.0] 以弧度为单位的滚动分量 * @param {Number} [options.minimumPixelSize] 模型最小刻度 * @param {Number} [options.maximumScale] 模型的最大比例尺大小,设置模型最大放大大小 * @param {Array} [options.silhouetteColor] 模型轮廓颜色[0~255,0~255,0~255,0~1] * @param {Number} [options.alpha] 模型透明度 */ addEntitiesGltf: function(options, callSuccess) { let _self = this; let viewer = this._viewer; if (!Cesium.defined(options.points)) { resolve("options.points is required."); throw new Cesium.DeveloperError("options.points is required."); } if (!Cesium.defined(options.url)) { resolve("options.url is required."); throw new Cesium.DeveloperError("options.url is required."); } // 初始化参数默认值 options.id = options.id || this._guid(); options.heading = Cesium.defaultValue(options.heading, 0.0); options.pitch = Cesium.defaultValue(options.pitch, 0.0); options.roll = Cesium.defaultValue(options.roll, 0.0); options.alpha = Cesium.defaultValue(options.alpha, 1); //模型加载位置 let position = undefined; if (options.points instanceof Cesium.Cartesian3) { position = options.points; } else { position = Cesium.Cartesian3.fromDegrees(options.points[0], options.points[1], options.points[2] || 0); } //弧度的航向分量。 var heading = Cesium.Math.toRadians(options.heading); //弧度的螺距分量。 var pitch = options.pitch; //滚动分量(以弧度为单位) var roll = options.roll; //HeadingPitchRoll旋转表示为航向,俯仰和滚动。围绕Z轴。节距是绕负y轴的旋转。滚动是关于正x轴。 var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll); var modelGltf = viewer.entities.add({ id: options.id, //模型id position: position, // 模型位置 orientation: Cesium.Transforms.headingPitchRollQuaternion(position, hpr), // 模型方向 model: { // 模型资源 uri: options.url, // 模型路径 incrementallyLoadTextures: true, //加载模型后纹理是否能够继续流入 colorBlendMode: Cesium.ColorBlendMode['HIGHLIGHT'], //经常使用的有三个HIGHLIGHT,REPLACE,MIX colorBlendAmount: 0.1, //这个属性必须是MIX混合属性才能生效,见colorBlendMode color: Cesium.Color.WHITE.withAlpha(options.alpha), //模型颜色,这里可以设置颜色的变化,包含透明度的颜色 imageBasedLightingFactor: new Cesium.Cartesian2(12.0, 13.0), runAnimations: true, //是否运行模型中的动画效果 show: true, // 模型是否可见 // 仅用于调试,显示魔仙绘制时的线框 debugWireframe: false, // 仅用于调试。显示模型绘制时的边界球。 debugShowBoundingVolume: false, }, }); // 模型最小刻度,不管缩放如何,模型的最小最小像素大小。 if (options.minimumPixelSize) { modelGltf.model.minimumPixelSize = options.minimumPixelSize; } // 模型最大刻度,模型的最大比例尺大小。 minimumPixelSize的上限。 if (options.maximumScale) { modelGltf.model.maximumScale = options.maximumScale; } // 模型轮廓颜色 if (options.silhouetteColor) { modelGltf.model.silhouetteColor = new Cesium.Color(options.silhouetteColor[0] / 255, options.silhouetteColor[1] / 255, options.silhouetteColor[2] / 255, options.silhouetteColor[3]); } // //设置透明度 // this.setModelStyle({ // serviceId: options.id, // alpha: options.alpha, // }); window[options.id] = modelGltf; if (callSuccess) callSuccess(options.id); }, /** * 加载GLTF/GLB模型数据 * @param {Object} options 参数对象 * @param {Array/Cesium.Cartesian3} options.points 模型加载位置 Array[lng,lat,height]经度,以度为单位,纬度,以度为单位,高程 * @param {String} options.url 模型路径 * @param {String} [options.id=guid] 模型实体加载ID,加入到整体图层中 以便可以删除对应的图层 * @param {Number} [options.scale] 放大倍数 */ addScenePrimitivesGltf(options, callSuccess) { let _self = this; let viewer = this._viewer; if (!Cesium.defined(options.points)) { resolve("options.points is required."); throw new Cesium.DeveloperError("options.points is required."); } if (!Cesium.defined(options.url)) { resolve("options.url is required."); throw new Cesium.DeveloperError("options.url is required."); } options.id = options.id || this._guid(); options.scale = Cesium.defaultValue(options.scale, 1); //gltf数据加载位置 let position = undefined; if (options.points instanceof Cesium.Cartesian3) { position = options.points; } else { position = Cesium.Cartesian3.fromDegrees(options.points[0], options.points[1], options.points[2] || 0); } const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position); let model = viewer.scene.primitives.add( Cesium.Model.fromGltf({ show: true, //确定是否将显示模型基元 url: options.url, // 资源路径 modelMatrix: modelMatrix, // 模型矩阵 lightColor: new Cesium.Cartesian3(10.0, 10.0, 10.0), scale: options.scale, // 放大倍数 // 仅用于调试,显示魔仙绘制时的线框 debugWireframe: false, // 仅用于调试。显示模型绘制时的边界球。 debugShowBoundingVolume: false, }) ) /** 模型旋转角度 */ model.readyPromise.then(function() { //延z轴旋转-90度,其它轴同理 var rotationX = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(0))); Cesium.Matrix4.multiply(model.modelMatrix, rotationX, model.modelMatrix); }) window[options.id] = model; if (callSuccess) callSuccess(options.id); }, /** * 根据GeoJson绘制线 * @param {Object} [options] 样式,具有以下属性: * @param {String} options.url geoJson文件路径 * @param {Number} [options.id] 用于移除 * @param {Number} [options.clampToGround=true] 是否贴地 * @param {Number} [options.isImageAlpha=true] 是否采用图片颜色 * @param {Number} [options.imgUrl] 精灵线图片 * @param {String} [options.color="#FF0000"] 指定线的颜色 * @param {Number} [options.width=3] 指定线的宽度,以像素为单位 // * @param {Number} [options.minHeigh=0] 一个属性,指定该折线将显示在距离摄像机的距离。在该间隔内物体可见的最小距离。 // * @param {Number} [options.maxHeigh=200000000] 一个属性,指定该折线将显示在距离摄像机的距离。在间隔内物体可见的最大距离。 * @param {Number} [options.duration=3000] 持续时间 毫秒,越小越快 * @param {Number} [options.count] 重复次数 * @param {String} [options.direction='horizontal'] 方向 vertical纵,垂直方向,horizontal横,水平方向 * @param {String} [options.order] 方向正负 * vertical 纵:'-'(由下到上) , '+"(由上到下) * horizontal 横:'-'(顺时针) , '+'(逆时针) */ addPolylineByGeoJson(options, callSuccess) { let _self = this; let viewer = this._viewer; if (!Cesium.defined(options.url)) { resolve("options.url is required."); throw new Cesium.DeveloperError("options.url is required."); } options.id = options.id || this._guid(); options.clampToGround = Cesium.defaultValue(options.clampToGround, true); options.width = Cesium.defaultValue(options.width, 3); options.minHeigh = Cesium.defaultValue(options.minHeigh, 0); options.maxHeigh = Cesium.defaultValue(options.maxHeigh, 200000000); let promise = Cesium.GeoJsonDataSource.load(options.url, { clampToGround: options.clampToGround }); promise.then((dataSource) => { _self._viewer.dataSources.add(dataSource); // 加载这个geojson资源 dataSource.name = options.id let entities = dataSource.entities.values; // let distanceDisplayCondition = new Cesium.DistanceDisplayCondition(options.minHeigh, options.maxHeigh); let material = new PolylineDirectionMaterialProperty(options); for (var i = 0; i < entities.length; i++) { var entity = entities[i]; // entity.polyline.distanceDisplayCondition = distanceDisplayCondition; entity.polyline.material = material; entity.polyline.width = options.width; if (options.clampToGround) { entity.polyline.clampToGround = true; } } if (callSuccess) callSuccess(options.id); }); }, /** * 根据GeoJson添加广告牌 * @param {Object} options * @param {String} options.url geoJson文件路径 * @param {String} options.id 用于移除 * @param {Object} [options.billboard] 广告牌的样式,具有以下属性: * @param {Number} [options.billboard.imgUrl] 广告牌图片 * @param {Number} [options.billboard.scale=1] 尺寸 * @param {Object} [options.billboard.scaleByDistance] 距离相机的距离缩放点。 * @param {Number} [options.billboard.scaleByDistance.near=0] 相机范围的下界。 * @param {String} [options.billboard.scaleByDistance.nearValue=0] 相机范围下界的值。 * @param {String} [options.billboard.scaleByDistance.far=1] 相机范围的上限。 * @param {Number} [options.billboard.scaleByDistance.farValue=0] 该值位于摄像机范围的上界。 * * @param {Object} [options.lable] lable的样式,具有以下属性: * @param {Number} [options.lable.text=""] 文字 * @param {Number} [options.lable.textField=""] 文字字段 * @param {String} [options.lable.font="24px Helvetica"] 指定CSS字体的属性,字体大小及样式 * @param {String} [options.lable.fillColor=[255,255,0,1]] 字体颜色 * @param {String} [options.lable.outlineColor=[255,255,255,1]] 字体边框颜色 * @param {Number} [options.lable.outlineWidth=1] 边框宽度 * @param {Number} [options.lable.showBackground=false] 是否显示背景颜色 * @param {Number} [options.lable.backgroundColor=[255,255,255,1]] 背景颜色 * @param {Number} [options.lable.pixelOffset=0] 偏移量 * @param {Number} [options.lable.scale=1] 尺寸 * @param {Object} [options.lable.scaleByDistance] 距离相机的距离缩放点。 * @param {Number} [options.lable.scaleByDistance.near=0] 相机范围的下界。 * @param {String} [options.lable.scaleByDistance.nearValue=0] 相机范围下界的值。 * @param {String} [options.lable.scaleByDistance.far=1] 相机范围的上限。 * @param {Number} [options.lable.scaleByDistance.farValue=0] 该值位于摄像机范围的上界。 */ addBillboardByGeoJson(options, callSuccess) { let _self = this; let viewer = this._viewer; if (!Cesium.defined(options.url)) { resolve("options.url is required."); throw new Cesium.DeveloperError("options.url is required."); } options.id = options.id || this._guid(); let billboard = options.billboard || {}; billboard.imgUrl = Cesium.defaultValue(billboard.imgUrl, 'jt3dSDK/imgs/point/point3.png'); billboard.scale = Cesium.defaultValue(billboard.scale, 1); billboard.pixelOffset = Cesium.defaultValue(billboard.pixelOffset, 0); const dataSource = new Cesium.GeoJsonDataSource(options.id); // 创建并取名 dataSource.load(options.url, { clampToGround: true }).then(function(data) { viewer.dataSources.add(data); // 添加这个datasource const entities = data.entities.values; // 拿到所有实体 entities.forEach(entity => { entity.billboard = { image: billboard.imgUrl, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平 verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置 scale: billboard.scale, //尺寸 pixelOffset: new Cesium.Cartesian2(0, billboard.pixelOffset), disableDepthTestDistance: Number.POSITIVE_INFINITY, }; if (billboard.scaleByDistance) { billboard.scaleByDistance.near = Cesium.defaultValue(billboard.scaleByDistance.near, 0); billboard.scaleByDistance.nearValue = Cesium.defaultValue(billboard.scaleByDistance.nearValue, 0); billboard.scaleByDistance.far = Cesium.defaultValue(billboard.scaleByDistance.far, 1); billboard.scaleByDistance.farValue = Cesium.defaultValue(billboard.scaleByDistance.farValue, 0); entity.billboard.scaleByDistance = new Cesium.NearFarScalar(billboard.scaleByDistance.near, billboard.scaleByDistance.nearValue, billboard.scaleByDistance.far, billboard.scaleByDistance.farValue) //按距离缩放,即距离大于180米时,图标不显示 Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。 } if (options.label) { let label = options.label || {}; label.text = Cesium.defaultValue(label.text, ""); label.textField = Cesium.defaultValue(label.textField, ""); label.font = Cesium.defaultValue(label.font, "24px Helvetica"); if (label.fillColor instanceof Array) { label.fillColor = new Cesium.Color(label.fillColor[0] / 255, label.fillColor[1] / 255, label.fillColor[2] / 255, label.fillColor[3]); } else if (typeof options.color === 'string') { label.fillColor = new Cesium.Color.fromCssColorString(label.fillColor); } else { label.fillColor = new Cesium.Color.fromCssColorString("#ff0000"); } if (label.outlineColor instanceof Array) { label.outlineColor = new Cesium.Color(label.outlineColor[0] / 255, label.outlineColor[1] / 255, label.outlineColor[2] / 255, label.outlineColor[3]); } else if (label.outlineColor instanceof String) { label.outlineColor = new Cesium.Color.fromCssColorString(label.outlineColor); } else { label.outlineColor = new Cesium.Color.fromCssColorString("#FFFF00"); } label.outlineWidth = Cesium.defaultValue(label.outlineWidth, 1); //是否显示背景颜色 label.showBackground = Cesium.defaultValue(label.showBackground, false); //背景颜色 if (label.backgroundColor instanceof Array) { label.backgroundColor = new Cesium.Color(label.backgroundColor[0] / 255, label.backgroundColor[1] / 255, label.backgroundColor[2] / 255, label.backgroundColor[3]); } else if (label.backgroundColor instanceof String) { label.backgroundColor = new Cesium.Color.fromCssColorString(label.backgroundColor); } else { label.backgroundColor = new Cesium.Color.fromCssColorString("#FFFF00"); } label.pixelOffset = Cesium.defaultValue(label.pixelOffset, 0); label.scale = Cesium.defaultValue(label.scale, 1); label.near = Cesium.defaultValue(label.near, 1.5e2); label.nearValue = Cesium.defaultValue(label.nearValue, 1); label.far = Cesium.defaultValue(label.far, 2400); label.farValue = Cesium.defaultValue(label.farValue, 0); let labelText = label.text; if (entity.properties[label.textField]) { labelText = entity.properties[label.textField]._value; } if (labelText === "") { labelText = (i + 1).toString(); } entity.label = { text: labelText.toString(), font: label.font, fillColor: label.fillColor, //填充颜色 outlineColor: label.outlineColor, //边框颜色 outlineWidth: label.outlineWidth, //边框宽度 style: Cesium.LabelStyle.FILL_AND_OUTLINE, //FILL不要轮廓 , OUTLINE只要轮廓,FILL_AND_OUTLINE轮廓加填充 verticalOrigin: Cesium.VerticalOrigin.BOTTOM, showBackground: label.showBackground, //指定标签后面背景的可见性 backgroundColor: label.backgroundColor, // 背景颜色 backgroundPadding: new Cesium.Cartesian2(6, 6), //指定以像素为单位的水平和垂直背景填充padding disableDepthTestDistance: Number.POSITIVE_INFINITY, pixelOffset: new Cesium.Cartesian2(0, label.pixelOffset), //偏移量 scale: label.scale, //尺寸 } if (label.scaleByDistance) { label.scaleByDistance.near = Cesium.defaultValue(label.scaleByDistance.near, 0); label.scaleByDistance.nearValue = Cesium.defaultValue(label.scaleByDistance.nearValue, 0); label.scaleByDistance.far = Cesium.defaultValue(label.scaleByDistance.far, 1); label.scaleByDistance.farValue = Cesium.defaultValue(label.scaleByDistance.farValue, 0); entity.label.scaleByDistance = new Cesium.NearFarScalar(label.scaleByDistance.near, label.scaleByDistance.nearValue, label.scaleByDistance.far, label.scaleByDistance.farValue) //按距离缩放,即距离大于180米时,图标不显示 Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。 } } }) if (callSuccess) callSuccess(options.id); }) }, /** * 根据GeoJson添加广告牌 * @param {Object} options * @param {String} options.url geoJson文件路径 * @param {String} options.id 用于移除 * @param {Object} [options.billboard] 广告牌的样式,具有以下属性: * @param {Number} [options.billboard.imgUrl] 广告牌图片 * @param {Number} [options.billboard.scale=1] 尺寸 * @param {Object} [options.billboard.scaleByDistance] 距离相机的距离缩放点。 * @param {Number} [options.billboard.scaleByDistance.near=0] 相机范围的下界。 * @param {String} [options.billboard.scaleByDistance.nearValue=0] 相机范围下界的值。 * @param {String} [options.billboard.scaleByDistance.far=1] 相机范围的上限。 * @param {Number} [options.billboard.scaleByDistance.farValue=0] 该值位于摄像机范围的上界。 * * @param {Object} [options.lable] lable的样式,具有以下属性: * @param {Number} [options.lable.text=""] 文字 * @param {Number} [options.lable.textField=""] 文字字段 * @param {String} [options.lable.font="24px Helvetica"] 指定CSS字体的属性,字体大小及样式 * @param {String} [options.lable.fillColor=[255,255,0,1]] 字体颜色 * @param {String} [options.lable.outlineColor=[255,255,255,1]] 字体边框颜色 * @param {Number} [options.lable.outlineWidth=1] 边框宽度 * @param {Number} [options.lable.showBackground=false] 是否显示背景颜色 * @param {Number} [options.lable.backgroundColor=[255,255,255,1]] 背景颜色 * @param {Number} [options.lable.pixelOffset=0] 偏移量 * @param {Number} [options.lable.scale=1] 尺寸 * @param {Object} [options.lable.scaleByDistance] 距离相机的距离缩放点。 * @param {Number} [options.lable.scaleByDistance.near=0] 相机范围的下界。 * @param {String} [options.lable.scaleByDistance.nearValue=0] 相机范围下界的值。 * @param {String} [options.lable.scaleByDistance.far=1] 相机范围的上限。 * @param {Number} [options.lable.scaleByDistance.farValue=0] 该值位于摄像机范围的上界。 */ addBillboardByJson(options, callSuccess) { let _self = this; let viewer = this._viewer; if (!Cesium.defined(options.url)) { resolve("options.url is required."); throw new Cesium.DeveloperError("options.url is required."); } options.id = options.id || this._guid(); let billboard = options.billboard || {}; billboard.imgUrl = Cesium.defaultValue(billboard.imgUrl, 'jt3dSDK/imgs/point/point3.png'); billboard.scale = Cesium.defaultValue(billboard.scale, 1); billboard.pixelOffset = Cesium.defaultValue(billboard.pixelOffset, 0); fetch(options.url).then(res => { return res.json(); }).then(res => { for (var i = 0; i < res.features.length; i++) { let coordinates = res.features[i].geometry.coordinates; let position = Cesium.Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2] || 0); //先创建一个CustomDataSource源,然后把entity存入这里面 let Point = new Cesium.CustomDataSource(options.id); viewer.dataSources.add(Point); let entity = new Cesium.Entity({ // id: options.id, name: "add billboard", //位置 position: position, //图片标签 billboard: { image: billboard.imgUrl, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平 verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置 scale: billboard.scale, //尺寸 pixelOffset: new Cesium.Cartesian2(0, billboard.pixelOffset), disableDepthTestDistance: Number.POSITIVE_INFINITY, } }); if (billboard.scaleByDistance) { billboard.scaleByDistance.near = Cesium.defaultValue(billboard.scaleByDistance.near, 0); billboard.scaleByDistance.nearValue = Cesium.defaultValue(billboard.scaleByDistance.nearValue, 0); billboard.scaleByDistance.far = Cesium.defaultValue(billboard.scaleByDistance.far, 1); billboard.scaleByDistance.farValue = Cesium.defaultValue(billboard.scaleByDistance.farValue, 0); entity.billboard.scaleByDistance = new Cesium.NearFarScalar(billboard.scaleByDistance.near, billboard.scaleByDistance.nearValue, billboard.scaleByDistance.far, billboard.scaleByDistance.farValue) //按距离缩放,即距离大于180米时,图标不显示 Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。 } if (options.label) { let label = options.label || {}; label.text = Cesium.defaultValue(label.text, ""); label.textField = Cesium.defaultValue(label.textField, ""); label.font = Cesium.defaultValue(label.font, "24px Helvetica"); if (label.fillColor instanceof Array) { label.fillColor = new Cesium.Color(label.fillColor[0] / 255, label.fillColor[1] / 255, label.fillColor[2] / 255, label.fillColor[3]); } else if (typeof options.color === 'string') { label.fillColor = new Cesium.Color.fromCssColorString(label.fillColor); } else { label.fillColor = new Cesium.Color.fromCssColorString("#ff0000"); } if (label.outlineColor instanceof Array) { label.outlineColor = new Cesium.Color(label.outlineColor[0] / 255, label.outlineColor[1] / 255, label.outlineColor[2] / 255, label.outlineColor[3]); } else if (label.outlineColor instanceof String) { label.outlineColor = new Cesium.Color.fromCssColorString(label.outlineColor); } else { label.outlineColor = new Cesium.Color.fromCssColorString("#FFFF00"); } label.outlineWidth = Cesium.defaultValue(label.outlineWidth, 1); //是否显示背景颜色 label.showBackground = Cesium.defaultValue(label.showBackground, false); //背景颜色 if (label.backgroundColor instanceof Array) { label.backgroundColor = new Cesium.Color(label.backgroundColor[0] / 255, label.backgroundColor[1] / 255, label.backgroundColor[2] / 255, label.backgroundColor[3]); } else if (label.backgroundColor instanceof String) { label.backgroundColor = new Cesium.Color.fromCssColorString(label.backgroundColor); } else { label.backgroundColor = new Cesium.Color.fromCssColorString("#FFFF00"); } label.pixelOffset = Cesium.defaultValue(label.pixelOffset, 0); label.scale = Cesium.defaultValue(label.scale, 1); label.near = Cesium.defaultValue(label.near, 1.5e2); label.nearValue = Cesium.defaultValue(label.nearValue, 1); label.far = Cesium.defaultValue(label.far, 2400); label.farValue = Cesium.defaultValue(label.farValue, 0); let labelText = label.text; if (res.features[i].properties[label.textField]) { labelText = res.features[i].properties[label.textField]; } if (labelText === "") { labelText = (i + 1).toString(); } entity.label = { text: labelText.toString(), font: label.font, fillColor: label.fillColor, //填充颜色 outlineColor: label.outlineColor, //边框颜色 outlineWidth: label.outlineWidth, //边框宽度 style: Cesium.LabelStyle.FILL_AND_OUTLINE, //FILL不要轮廓 , OUTLINE只要轮廓,FILL_AND_OUTLINE轮廓加填充 verticalOrigin: Cesium.VerticalOrigin.BOTTOM, showBackground: label.showBackground, //指定标签后面背景的可见性 backgroundColor: label.backgroundColor, // 背景颜色 backgroundPadding: new Cesium.Cartesian2(6, 6), //指定以像素为单位的水平和垂直背景填充padding disableDepthTestDistance: Number.POSITIVE_INFINITY, pixelOffset: new Cesium.Cartesian2(0, label.pixelOffset), //偏移量 scale: label.scale, //尺寸 } if (label.scaleByDistance) { label.scaleByDistance.near = Cesium.defaultValue(label.scaleByDistance.near, 0); label.scaleByDistance.nearValue = Cesium.defaultValue(label.scaleByDistance.nearValue, 0); label.scaleByDistance.far = Cesium.defaultValue(label.scaleByDistance.far, 1); label.scaleByDistance.farValue = Cesium.defaultValue(label.scaleByDistance.farValue, 0); entity.label.scaleByDistance = new Cesium.NearFarScalar(label.scaleByDistance.near, label.scaleByDistance.nearValue, label.scaleByDistance.far, label.scaleByDistance.farValue) //按距离缩放,即距离大于180米时,图标不显示 Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。 } } // viewer.entities.add(entity); Point.entities.add(entity) } if (callSuccess) callSuccess(options.id); }); }, /** * 根据GeoJson添加动态墙 * @param {Object} options * @param {String} options.url geoJson文件路径 * @param {String} options.id 用于移除 * @param {Number} [options.clampToGround=true] 是否贴地 * @param {Number} [options.minimunHeights=0] 最低高度 * @param {Number} [options.maximumHeights=100] 最高高度 * @param {Number} [options.imgUrl] 动态墙图片 * @param {String} [options.color="#FF0000"] 指定墙的颜色 * @param {Number} [options.duration=3000] 持续时间 毫秒,越小越快 * @param {Number} [options.count] 重复次数 * @param {String} [options.direction='horizontal'] 方向 vertical纵,垂直方向,horizontal横,水平方向 * @param {String} [options.order] 方向正负 * vertical 纵:'-'(由下到上) , '+"(由上到下) * horizontal 横:'-'(顺时针) , '+'(逆时针) */ addWallByJson(options, callSuccess) { let _self = this; let viewer = this._viewer; if (!Cesium.defined(options.url)) { resolve("options.url is required."); throw new Cesium.DeveloperError("options.url is required."); } options = options || {}; options.id = options.id || setSessionid(); options.clampToGround = Cesium.defaultValue(options.clampToGround, true); options.minimunHeights = options.minimunHeights !== undefined && typeof options.minimunHeights === 'number' ? options.minimunHeights : 0; options.maximumHeights = options.maximumHeights !== undefined && typeof options.maximumHeights === 'number' ? options.maximumHeights : 1000; if (options.color) { if (options.color instanceof Array) { options.color = new Cesium.Color(options.color[0] / 255, options.color[1] / 255, options.color[2] / 255, options.color[3]); } else if (typeof(options.color) === 'string') { options.color = new Cesium.Color.fromCssColorString(options.color); } else { options.color = new Cesium.Color.fromCssColorString("#FFFF00"); } } options.trailImage = Cesium.defaultValue(options.trailImage, 'jt3dSDK/imgs/wallmaterial/wl.png'); options.duration = Cesium.defaultValue(options.duration, 3000); options.count = Cesium.defaultValue(options.count, 1); options.direction = Cesium.defaultValue(options.direction, 'vertical'); options.order = Cesium.defaultValue(options.order, '-'); fetch(options.url).then(res => { return res.json(); }).then(res => { for (var i = 0; i < res.features.length; i++) { let coordinates = res.features[i].geometry.coordinates; let positions = coordinates.map(point => { return Cesium.Cartesian3.fromDegrees(point[0], point[1], point[2] || 0); }); //先创建一个CustomDataSource源,然后把entity存入这里面 let wall = new Cesium.CustomDataSource(options.id); viewer.dataSources.add(wall); let entity = new Cesium.Entity({ name: "立体墙效果", wall: { positions: positions, // 设置高度 maximumHeights: new Array(positions.length).fill(options.maximumHeights), minimunHeights: new Array(positions.length).fill(options.minimunHeights), // 扩散墙材质 // material: new Cesium.WallDiffuseMaterialProperty({ // color: new Cesium.Color(1.0, 1.0, 0.0, 1.0) // }), material: new WallMaterialProperty(viewer, { trailImage: options.trailImage, color: options.color, duration: options.duration, param: { count: options.count, direction: options.direction, order: options.order, }, }), // material: new Cesium.DynamicWallMaterialProperty({ // trailImage: 'jt3dSDK/imgs/wallmaterial/wl.png', // color: Cesium.Color.CYAN, // duration: 1500 // }) } }); // 绘制墙体 wall.entities.add(entity) } if (callSuccess) callSuccess(options.id); }); }, }); /** * 通用对外公开函数 - 设置样式及透明度 */ Object.assign(LoadMapData.prototype, /** @lends LoadMapData.prototype */ { /** * 设置3DTile透明度 * @param {Object} options * @param {String} options.serviceId 服务Id * @param {Number} [options.alpha=1] 透明度,0-1,0.0 表示完全透明,1.0 表示完全不透明 */ set3DTileStyle(options) { if (!Cesium.defined(options) || !Cesium.defined(options.serviceId)) { throw new Cesium.DeveloperError("options.serviceId is required."); } //透明度,0.0 表示完全透明,1.0 表示完全不透明 if (Cesium.defined(options.alpha)) { Cesium.Check.typeOf.number("alpha", options.alpha); } options.alpha = Cesium.defaultValue(options.alpha, 1); let tileset = window[options.serviceId]; //设置实景透明度 tileset.style = new Cesium.Cesium3DTileStyle({ color: "color('rgba(255,255,255," + options.alpha + ")')", }); }, /** * 设置Cesium3DTileStyle白膜样式 * @param {Object} options 具有以下属性: * @param {String} options.serviceId 服务Id * @param {Array} [options.color=[245,82,0,1]] 设置白膜颜色样式[0~255,0~255,0~255,0~1] * @example * layer.set3DTileBMStyle({ * serviceId : 'serviceId', * color : [0, 148, 220, 0.8], * }); * */ set3DTileBMStyle: function(options) { if (!Cesium.defined(options) || !Cesium.defined(options.serviceId)) { throw new Cesium.DeveloperError("options.serviceId is required."); } // vec4(245 / 255, 82 / 255, 0 / 255, 1.0) // vec4(0.0, 0.58, 0.86, 1.0) // 设置白膜颜色样式,例vec4(0.0, 0.58, 0.86, 1.0) 前三个浮点数 (范围是 0.0 到 1.0) 代表红,绿,蓝,第四个值代表 alpha 通道,控制透明度 (0.0 完全透明,1.0 是完全不透明). options.color = options.color ? "vec4(" + options.color[0] + "/255, " + options.color[1] + "/255, " + options.color[2] + "/255, " + options.color[3] + ")" : "vec4(0.0, 0.58, 0.86, 1.0)"; let tileset = window[options.serviceId]; tileset.readyPromise.then((tileset) => { let r = tileset.boundingSphere.radius; if (tileset.boundingSphere.radius > 10000) { r = tileset.boundingSphere.radius / 10 } tileset.style = new Cesium.Cesium3DTileStyle({ color: options.color, // color: 'vec4(0, 0.2, 1.0,1.0)', }); tileset.tileVisible.addEventListener((tile) => { //console.log("tile:",tile); let content = tile.content let featuresLength = content.featuresLength for (let i = 0; i < featuresLength; i += 2) { const feature = content.getFeature(i) const model = feature.content._model if (model && model._sourcePrograms && model._rendererResources) { Object.keys(model._sourcePrograms).forEach((key) => { const program = model._sourcePrograms[key] const fragmentShader = model._rendererResources.sourceShaders[program.fragmentShader] let vPosition = '' if (fragmentShader.indexOf(' v_positionEC;') !== -1) { vPosition = 'v_positionEC' } else if (fragmentShader.indexOf(' v_pos;') !== -1) { vPosition = 'v_pos' } const color = `vec4(${feature.color.toString()})` model._rendererResources.sourceShaders[program.fragmentShader] = ` varying vec3 ${vPosition}; void main(void){ vec4 v_helsing_position = czm_inverseModelView * vec4(${vPosition},1); float _baseHeight = -30.0; float vtxf_height = v_helsing_position.z - _baseHeight; float stc_pl = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0; float stc_sd = vtxf_height / 30.0 + sin(stc_pl) * 0.1; gl_FragColor = ${color}; gl_FragColor *= vec4(stc_sd, stc_sd, stc_sd, 1.0); /* 扫描线 */ float glowRange = 80.0; float stc_a13 = fract(czm_frameNumber / 460.0); float stc_h = clamp(v_helsing_position.z / glowRange, 0.0, 1.0); stc_a13 = abs(stc_a13 - 0.5) * 1.0; float stc_diff = step(0.003, abs(stc_h - stc_a13)); gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - stc_diff); } ` }) model._shouldRegenerateShaders = true; } } }) }) //刷新地图 this._viewer.scene.requestRender(); }, /** * 设置Cesium3DTileset(实景)三维高度 * @param {Object} options 具有以下属性: * @param {String} options.serviceId 服务Id * @param {Number} options.height=0 设置模型距离地形高度 * * @example * layer.set3DTilePosition({ * serviceId : 'serviceId', * height : 0, * }); * */ set3DTilePosition: function(options) { if (!Cesium.defined(options) || !Cesium.defined(options.serviceId)) { throw new Cesium.DeveloperError("options.serviceId is required."); } options.height = Cesium.defaultValue(options.height, 0); let boundingSphere = window[options.serviceId].boundingSphere; let cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center); // longitude number 经度,单位为弧度 // latitude number 纬度,单位为弧度 // height number 椭球的高度,以米为单位 let left = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, options.height); let right = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); //left 左笛卡尔第一个笛卡尔。 //right 左笛卡尔第二个笛卡尔。 //result cartesian3存储结果的对象。 let translation = Cesium.Cartesian3.subtract(left, right, new Cesium.Cartesian3()); window[options.serviceId].modelMatrix = Cesium.Matrix4.fromTranslation(translation); this._viewer.scene.requestRender(); //刷新地图 }, /** * 设置图层的透明度、亮度、对比度、伽马、色调、饱和度等 * @param {Object} options 具有以下属性: * @param {Number} [options.alpha] 透明度,0-1,0.0 表示完全透明,1.0 表示完全不透明 * @param {Number} [options.brightness] 亮度,>1.0 增加亮度. < 1.0 减少亮度. * @param {Number} [options.contrast] 对比度,>1.0 增加对比度. < 1.0 减少对比度. * @param {Number} [options.gamma] 伽马,>1.0 增加伽马. < 1.0 减少伽马. * @param {Number} [options.hue] 色调,>0 增加色调 * @param {Number} [options.saturation] 饱和度,>1.0 增加亮度. < 1.0 减少亮度. * * @example * layer.setLayersStyle({ * serviceId : 'serviceId', * alpha : 0.5, * brightness : 1, * }); * */ setLayersStyle(options) { if (!Cesium.defined(options) || !Cesium.defined(options.serviceId)) { throw new Cesium.DeveloperError("options.serviceId is required."); } let layer = window[options.serviceId]; //透明度,0.0 表示完全透明,1.0 表示完全不透明 if (Cesium.defined(options.alpha)) { Cesium.Check.typeOf.number("alpha", options.alpha); } options.alpha = Cesium.defaultValue(options.alpha, 1); layer.alpha = options.alpha; //亮度,>1.0 增加亮度. < 1.0 减少亮度. if (Cesium.defined(options.brightness)) { Cesium.Check.typeOf.number("brightness", options.brightness); } options.brightness = Cesium.defaultValue(options.brightness, 1); layer.brightness = options.brightness; //对比度,>1.0 增加对比度. < 1.0 减少对比度 if (Cesium.defined(options.contrast)) { Cesium.Check.typeOf.number("contrast", options.contrast); } options.contrast = Cesium.defaultValue(options.contrast, 1); layer.contrast = options.contrast; //伽马,>1.0 增加亮度. < 1.0 减少亮度. if (Cesium.defined(options.gamma)) { Cesium.Check.typeOf.number("gamma", options.gamma); } options.gamma = Cesium.defaultValue(options.gamma, 1); layer.gamma = options.gamma; //色调,>0 增加色调 if (Cesium.defined(options.hue)) { Cesium.Check.typeOf.number("hue", options.hue); } options.hue = Cesium.defaultValue(options.hue, 0); layer.hue = options.hue; //饱和度,>1.0 增加饱和度. < 1.0 减少饱和度. if (Cesium.defined(options.saturation)) { Cesium.Check.typeOf.number("saturation", options.saturation); } options.saturation = Cesium.defaultValue(options.saturation, 1); layer.saturation = options.saturation; }, /** * 设置图片服务透明度 * @param {Object} options * @param {String} options.serviceId 服务Id * @param {Number} options.alpha 透明度,0-1,0.0 表示完全透明,1.0 表示完全不透明 */ setPolygonImageMaterial(options) { //透明度,0.0 表示完全透明,1.0 表示完全不透明 if (Cesium.defined(options.alpha)) { Cesium.Check.typeOf.number("alpha", options.alpha); } options.alpha = Cesium.defaultValue(options.alpha, 1); let entity = window[options.serviceId]; // let color = entity.polygon.material.color.getValue().clone(); // entity.material.color.setValue(color.withAlpha(options.alpha)); entity.polygon.material.color._value.alpha = options.alpha; }, /** * 设置图片服务透明度 * @param {Object} options * @param {String} options.serviceId 服务Id * @param {Number} options.alpha 透明度,0-1,0.0 表示完全透明,1.0 表示完全不透明 */ setModelStyle(options) { //透明度,0.0 表示完全透明,1.0 表示完全不透明 if (Cesium.defined(options.alpha)) { Cesium.Check.typeOf.number("alpha", options.alpha); } options.alpha = Cesium.defaultValue(options.alpha, 1); let entity = window[options.serviceId]; if (entity.model) { entity.model.color._value.alpha = options.alpha; } else { entity.color._value.alpha = options.alpha; } }, /** * 动态设置地形夸张系数 * @param {Object} options * @param {Number} options.terrainExaggeration=1 地形夸张系数 */ setTerrainExaggeration(options) { //透明度,0.0 表示完全透明,1.0 表示完全不透明 if (Cesium.defined(options.terrainExaggeration)) { Cesium.Check.typeOf.number("terrainExaggeration", options.terrainExaggeration); } options.terrainExaggeration = Cesium.defaultValue(options.terrainExaggeration, 1); // 地形夸张 this._viewer.scene.globe.terrainExaggeration = options.terrainExaggeration; } }) /** * 通用对外公开函数 - 移除图层 */ Object.assign(LoadMapData.prototype, /** @lends LoadMapData.prototype */ { /** * 将图层在地图中移除(ArcGIS Online和Server的相关服务、WMS、WMTS、URL模板服务) * @param {Object} options 具有以下属性: * @param {String} options.serviceId 服务Id * @example * layer.removeImageryProvider({ * serviceId : 'serviceId', * }); * */ removeImageryProvider(options) { return new Promise((resolve, reject) => { if (!Cesium.defined(options) || !Cesium.defined(options.serviceId)) { throw new Cesium.DeveloperError("options.serviceId is required."); } this._removeImageryProvider(options.serviceId); resolve(true); }); }, /** * 将图层在地图中移除(地形) * */ removeTerrain() { return new Promise((resolve, reject) => { this._setEllipsoidTerrain(); resolve(true); }); }, /** * 将图层在地图中移除(实景/白膜) * @param {Object} options 具有以下属性: * @param {String} options.serviceId 服务Id * * @example * layer.removeScenePrimitives({ * serviceId : 'serviceId', * }); * */ removeScenePrimitives(options) { return new Promise((resolve, reject) => { if (!Cesium.defined(options) || !Cesium.defined(options.serviceId)) { throw new Cesium.DeveloperError("options.serviceId is required."); } this._removeScenePrimitives(options.serviceId); resolve(true); }); }, /** * 将图层在地图中移除entity * @param {Object} options 具有以下属性: * @param {String} options.serviceId 服务Id * * @example * layer.removeEntity({ * serviceId : 'serviceId', * }); * */ removeEntity(options) { return new Promise((resolve, reject) => { if (!Cesium.defined(options) || !Cesium.defined(options.serviceId)) { throw new Cesium.DeveloperError("options.serviceId is required."); } this._viewer.entities.remove(window[options.serviceId]); window[options.serviceId] = null; resolve(true); }); }, /** * 将图层在地图中移除entity * @param {Object} options 具有以下属性: * @param {String} options.serviceId 服务Id * * @example * layer.removeDataSources({ * serviceId : 'serviceId', * }); * */ removeDataSources(options) { let _self = this; let viewer = this._viewer; return new Promise((resolve, reject) => { if (!Cesium.defined(options) || !Cesium.defined(options.serviceId)) { throw new Cesium.DeveloperError("options.serviceId is required."); } //清除高亮显示 let list = viewer.dataSources.getByName(options.serviceId) list.forEach((res, index) => { viewer.dataSources.remove(res) if (index === (list.length - 1)) { resolve(true); } }) }); }, }) export default LoadMapData;