SuperMap GIS基础产品三维GIS FAQ集锦（3）

SuperMap GIS基础产品三维GIS FAQ集锦（3）

【WebGL】如何批量管理entity图标，同时控制多个图标的显示和隐藏？
【解决办法】使用实体集合CustomDataSource进行管理，将实体按类别分类，分别添加到不同的实体集合中，对实体集合进行批量操作，示例代码见截图

【WebGL】视屏投放功能，如何将视屏内容和场景融合？
【解决办法】1、使用iDesktop进行视屏投放，并修改位置、角度等信息，修改视频大致位置
2、使用同名点配准，让视屏中特征点位与场景对应位置重合，导出投放参数（*.xml）
3、在WebGL中使用接口导入投放参数，完成融合：projectionImage.setInfo(url)
【WebGL】如何实现飞机的飞行轨迹？
【解决办法】1、使用SampledPositionProperty构造飞机的时空坐标
2、使用entity中的path对象，实现飞行轨迹绘制，示例代码见截图

【WebGL】如何修改Mvt地图的选中高亮色？
【解决办法】VectorTilesMap类中有设置选中颜色的属性：selectedColor。示例代码：
mvtMap.selectedColor = Cesium.Color.RED
【WebGL】模型缓存发布三维服务后，前端使用webgl加载，进入模型内部查看模型消失了？
【问题原因】开启了单面渲染，单面渲染剔除了模型背面，只能从一个方向查看到模型
【解决办法】设置模型图层渲染方式为双面渲染：layer.cullEnabled = false
【WebGL】想要从底下往地上看，并且看到影像，应该如何设置？
【解决办法】1、关闭地形裙边
2、关闭影像背面剔除。详细代码如下：
scene.globe.showSkirts =false；
viewer.scene.globe.backFaceCulling = false;
【WebGL】如何提升自定义管线场景缓存的光泽和质感？
【解决方法】1.模型的精细度，精细度高且贴图分辨率大，贴图质量高
2.减少压缩率可以提高精细程度
以上情况都会减少加载速度
3.日间场景优化，白天的场景优化主要是增加模型的立体感，可以通过调整太阳光和光源的方向来达到效果
4.viewer.resolutionScale 获取或设置渲染分辨率的缩放因子。值小于1.0时能够在不太强大的设备上提高性能；相反，值大于1.0时将会以更高分辨率渲染，然后按比例缩小，以此提高视觉保真度 。在不同分辨率的机器上进行展示数据时，可以调整这个参数
5.显示色彩设置，对于显示的色彩，主要有亮度（brightness）、对比度（contrast）、色调（hue）、饱和度（saturation）、伽马（gamma）等参数
6.官网webgl范例里的官网是设置了pbr材质，看起来有金属质感，可以考虑设置PBR材质试试
【WebGL】需要发三维服务的三维模型生三维缓存时选择压缩格式用DXT压缩还是webp压缩好？
【解决方法】
【纹理压缩格式】：目前支持七种压缩类型：WebP、DXT（PC设备）、CRN_DXT5（PC设备）、PVRTC（iOS系列设备）、ETC（Android系列设备）、不压缩，默认为DXT（PC设备）。对于不同用途的数据，采用不同的纹理压缩方式，可以减少纹理图像所使用的显存数量。 不压缩：默认的纹理格式。
●WebP：适用于 Web端/PC机上通用的压缩纹理格式。数据总量减少，提高传输性能。
●DXT(PC设备)：适用于 PC 机（个人计算机）上通用的压缩纹理格式。显存占用减少，提升渲染性能，但是数据总量会增加。
●CRN_DXT5（PC设备）：适用于 PC 机（个人计算机）上通用的压缩纹理格式，显存占用少许减少，数据总量大幅度减少，但是需要较长的处理时间。
●标准CRN：适用于 PC 机（个人计算机）上通用的压缩纹理格式，显存占用少许减少，数据总量大幅度减少。处理相同数据，所需时间比CRN_DXT5长。
●PVRTC（iOS系列设备）:适用于苹果 iOS 设备上通用的压缩纹理格式。以此种方式进行纹理压缩时，同时会生成一个离线地图包，方便 iOS 设备用户使用。
●ETC（Android系列设备）:适用于 Android 设备上通用的压缩纹理格式。以此种方式进行纹理压缩时，同时会生成一个离线地图包，方便 Android 设备用户使用。

推荐的话更推荐CRN_DXT5或者CRN的，DXT和WEBP是看具体的使用需求，都是有较大的不足点的。
如想减少数据总量建议使用:几何压缩方式以及WebP、CRN_DXT5、标准CRN、KTX2.0等纹理压缩格式。
如果只能从DXT和WebP当中选择，根据需求分析，当然是WebP更优
【WebGL】在vue前端项目中调用内网的wmts影像服务失败，报错504 Gateway Timeout。并且用最初始的cesium demo去测试调用wmts服务，也出现同样问题。
【问题原因】解决这个问题，首先我们需要了解一下， 504 Gateway Timeout ，通常是指网关超时，即 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
那么，这个报错通常什么情况的时候会出现呢。
【解决方法】
1.页面错误：部分控件的使用可能会导致偶尔会出现该报错
2.网络出现问题，建议检查网络设置，或者在我们的官方示例查看能否访问，如果不能访问，再看看本地访问示例能否访问
3.DNS出现了问题， 504 Gateway Timeout错误可能是由于正在使用的DNS服务器出现问题引起的 ，修改DNS服务器
4.使用了代理服务， 代理设置不正确可能导致504错误。
5.访问的服务或者网址出现问题， 网站管理员很可能已经在努力修复504网关超时错误的根本原因。
【WebGL】怎么在前端实现闪烁点？
【解决方法】 viewer.entities.add({
name:“圆点point闪烁”,
position:Cesium.Cartesian3.fromDegrees(lon+0.03,lat+0.03,0),
point : {
show : true, // default
color :new Cesium.CallbackProperty(function () {
if(flog){
x=x-0.05;
if(x<=0){
flog=false;
}
}else{
x=x+0.05;
if(x>=1){
flog=true;
}
}
return Cesium.Color.RED.withAlpha(x);
},false),
pixelSize : 10, // default: 1
outlineWidth :0
}
});
【WebGL】初始化的时候开启shadow=true，设置layer.shadowType=2,缩放到一定高度时，阴影消失了,怎么解决呢？
【解决办法】修改场景中的阴影贴图的最大距离，默认5000m，例如：scene.shadowMap.maximumDistance = 50000;
【WebGL】场景中三维线缓存会有锯齿效果，如何解决让它变得平滑？
【解决办法】设置反走样，使线平滑，具体代码如下：
var viewer = new Cesium.Viewer(‘cesiumContainer’, {
contextOptions: {
msaaLevel: 8,
requestWebgl2: true
},
});
【WebGL】点外挂的模型，加载到三维场景中，模型颜色会变黑，请问怎么解决？
【问题原因】图层默认是接收光照的，会随着时间的不同受光照的影响也不同。为了避免模型变黑，建议将图层的接收光照关闭。
【解决办法】图层接收光照关闭，具体代码如下：
var layer = viewer.scene.layers.find(‘NewLine3D’);
layer.hasLight=false;
【iDesktop】制作自定义专题图，设置图标文件，保存场景对场景右键切缓存，结果软件退出，请问怎么解决？
【解决方案】制作自定义专题图，设置图标文件，在切场景缓存时需要注意：
必须取消勾选默认的【点外挂生成模型缓存】。
【iDesktop】POI兴趣点的图标在场景中加载比较虚，设置图标最大只能是500X500像素的，请问这个该怎样解决呢？
【解决方案】建议采用自定义专题图的方法，这种方法可以支持1024*1024像素大小的图片，具体操作步骤为：
1.给点数据集新建文本型字段，存储图标的绝对路径；
2.在专题图设置参数选图标对应的路径字段；
3.保存场景对场景切三维缓存，注意切缓存时取消勾选【点外挂生成模型缓存】。
【iServer】iServer的三维预览打开，球的左下角有SuperMap字样的logo，请问如何让logo不显示？
【解决方案】
1.在修改之前一定要关闭iServer；
2.在iServer包\webapps\iserver\WEB-INF\lib里直接找到iserver-all-11.0.0-21101.jar，直接用WinRAR打开；
3.修改里面的staticFiles\Build\Cesium\Widgets目录下的widgets.css；
4.用编辑器打开搜索.cesium-viewer .cesium-widget-credits，将这里的position:static;删除；
5.保存widgets.css；
6.重启iServer。
【WebGL】球的左下角有SuperMap字样的logo，请问如何用代码删除logo，让它不显示？
【解决方案】在代码里设置：
$(‘.cesium-widget-credits’).hide()；或者viewer._cesiumWidget._creditContainer.style.display = “none”;
【WebGL】桌面里三维水面符号风格制作的矢量面，生成缓存发布三维服务，在前端用代码怎样调整该水面速度与水流方向以及强度？
【解决方案】var waterLayer =scene.layers.find(‘Waters@OlympicGreen’);
waterLayer.waterSpeed =new SuperMap3D.Cartesian2(0.5, -1);//获取或者设置水面速度与水流方向。该量为一个二维的量，用数值的大小表示速度大小，用其x,y的正负来表示水流的方向。
waterLayer.waterWaveScale =2;//获取或者设置水面波纹强度。
【WebGL】前端如何通过代码获取某个三维缓存图层的矩形范围来实现相机定位？
【解决方案】
var waterLayer =scene.layers.find(‘srsb_water’);
var a=Cesium.Math.toDegrees(waterLayer.layerBounds.west);
var b=Cesium.Math.toDegrees(waterLayer.layerBounds.south);
var c=Cesium.Math.toDegrees(waterLayer.layerBounds.east);
var d=Cesium.Math.toDegrees(waterLayer.layerBounds.north);
viewer.camera.setView({
destination : Cesium.Rectangle.fromDegrees(a,b,c,d),

           });

【WebGL】怎样移除实例化对象？
【解决办法】
var collect = new Cesium.InstanceLayer(scene._context);
scene.primitives.add(collect);//添加实例化图层
collect.removeInstance(“./data/门90.s3m”, [collect._instances._array[1]._array[0].id]);//移除实例化对象
【WebGL】怎样添加实例化对象？
【解决办法】
var collect = new Cesium.InstanceLayer(scene._context);
collect.add(“./data/xbm2.s3m”, {
position: new Cesium.Cartesian3.fromDegrees(116.45809698274122, 39.912528931163905, 4.1)
});
scene.primitives.add(collect);//添加实例化对象
【WebGL】原生Cesium1.9版本能够加载Blender导出带纹理贴图的压缩glb格式模型，iClient3D加载报错“…TypeError: a[l.name] is not a function…”是什么原因？
【问题原因】Blender导出的glb数据，iClient3D产品支持对接。导出时Blender软件可勾选‘compression’压缩参数对模型以及纹理贴图进行压缩，此压缩后得glb数据加载会导致前端解析失败报错。这是由于目前iClient3d for Cesium产品是基于原生Cesium1.67开发，还不支持glb压缩的纹理贴图解析。
【解决方法】glb格式模型带有贴图，使用Blender软件导出时不勾选压缩导出即可。
【WebGL】iClient3D for Cesium支持什么坐标系？
【解决方法】支持所有的单位为度的地理坐标系以及EPSG code为3857的84投影坐标系。
【WebGL】iClient3D for Cesium是基于原生Cesium1.67做的，如何自行升级cesium版本呢？
【问题原因】不能自行升级，因为其原生接口均被封装， 自行替换会导致产品包无法使用。
【解决方法】可使用GitHub（https://github.com/SuperMap）上开源插件库SuperMap3d.js，在原生Cesium中加载超图的服务数据。
【WebGL】添加天地图WMTS时不出图，查看请求服务地址都是404错误，该如何解决？
【问题原因】OGC标准的WMTS服务是从0级开始，天地图是从1级开始。在WebGL中，默认加载是0-19级，所以导致请求的层级偏差导致请求的数据错误。
【解决办法】在构建WebMapTileServiceImageryProvider时，加上偏移参数tileMatrixLabels。详细代码如下截图：
new Cesium.WebMapTileServiceImageryProvider({
url: ‘,
layer:’',
style: ‘**’,
format: ‘image/jpgpng’,
tileMatrixSetID: ‘default’,
tileMatrixLabels: [“1”,“2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “10”, “11”, “12”, “13”, “14”, “15”, “16”, “17”, “18”,“19”,“20”]
})
【WebGL】MVT图层在选择时，有的对象选不中，该如何处理？
【问题原因】由于图层顺序的原因，在下面的图层被上面的图层遮挡了导致选不中。
【解决办法】调整图层顺序，将遮挡图层调整到下方就能够选中对象了。比如一个面遮挡了下面的点线和文本，这个时候将面图层调到最下层就能够正常显示了
【WebGL】三维场景通过iServer发布为三维服务，WebGL加载时发现模型呈现半透明，该如何解决？
【问题原因】加载场景时默认orderIndependentTranslucency 参数为true，模型则会呈现半透明状态。
【解决办法】WebGL加载时将对应图层的orderIndependentTranslucency 参数设置成false即可。
【WebGL】通过“三维地下管线”方案生成的三维管网数据（三维网络数据集），现在管点管线的数据量都是50万这个级别，在web中加载渲染非常慢，帧率（FPS）低，页面卡顿。如何优化三维管网的性能？
【解决办法】可以从数据层面、前端优化、硬件设备三个方面考虑。
1、从数据方面，可以根据数据集、管点符合、空间索引等方面优化，可以参考：https://blog.csdn.net/supermapsupport/article/details/128099894；
2、从场景方面，可以减少场景加载图层的数量，控制图层显隐等方面优化，可以参考：https://blog.csdn.net/supermapsupport/article/details/128330725；
3、从硬件设备方面，三维可视化对显卡要求较高，可以参考：https://blog.csdn.net/supermapsupport/article/details/128440798。
【WebGL】iClient3D for Cesium官网示例中所用的echarts版本是多少?为什么设置y轴的最小值，在yAxis中设置min属性不起作用？
【解决办法】官网示例所用的echarts版本是4.0.4，通过console.log(echarts.version)获取。根据echarts官方API，只设置min，不设置max时会自动计算最大值保证坐标轴刻度的均匀分布，检查是否有设置最大值。官网引入echarts只是调用接口，并未做二次开发，具体使用可以咨询其官方或者查看API文档。
【WebGL】webgl可以实现二维的地址匹配功能吗？
【解决办法】是可以的，参考classic使用方式即可，引入SuperMap.Include.js、include-classic.js，待接口返回成功后在回调函数中进行业务操作。
【WebGL】前端如何对模型缓存添加阴影？
【解决办法】在桌面设置模型图层阴影模式为对所有对象阴影，打开轨迹可以看到模型阴影，如果没有就重新计算法线，完成后生成场景缓存，发布iserver服务，前端通过scene.open打开场景，并设置viewer的shadows属性为true即可。
【WebGL】使用billborad 可以添加动图吗？
【解决办法】1、billbord不支持动图格式。2、如果是想在前端添加动图，可以通过libgif库实现，参考：https://blog.csdn.net/Fascinated0525/article/details/125284778
【WebGL】在iClient for Cesium中如何构建雷达对象？
【解决办法】可以通过Cesium.PlotCustomRader的方法构建，构建代码参考如下
customRadar = new Cesium.PlotCustomRadar({
point: new Cesium.PlotPoint3D(110, 35, 100000),
radii: radarResult.radii,
customPts: radarResult.positions,
slicePartitions: radarResult.slicePartitions,
stackPartitions: radarResult.stackPartitions,
subdivisions: radarResult.subdivisions,
show: true,
fill: true,
material: new Cesium.Color(1, 0, 0, 0.5),
isOutline: true,
outlineColor: new Cesium.Color(0, 1, 0, 1),
outlineWidth: 1,
rotate: new Cesium.Cartesian3(0, 0, 0)
}, scene);
【WebGL】桌面对模型数据平面场景生成的缓存，并保存到平面场景中发布服务，在iClient for Cesium中预览，预览不到模型应该如何处理？
【解决方法】平面场景在iClient for Cesium中默认是没有将位置写入的，需要通过更改初始Camera的位置，去将视角调整到所需要的位置。
【WebGL】如何获取实体对象中面的节点？
【解决办法】获取到面实体对象，然后通过获取polygon.hierarchy获取到PolygonHierarchy对象，然后去获取其中的positions。如果对象有岛洞，可通过holes获取岛洞节点。
【WebGL】如何添加一张本地图片到场景中，并全球覆盖？
【解决办法】通过SingleTileImageryProvider方法添加一个本地图片到场景中，默认全球覆盖。图片分辨率的长宽像素比例是2：1
【WebGL】iClient3D for Cesium 如何实现地形夸张？
【解决办法】设置scene的terrainExaggeration属性
【WebGL】在场景设置三维水面特效后，发布缓存后如何在前设置水面的透明度与颜色呢？
【解决办法】可以设置S3MTileLayer的waterColor属性，这个属性代表的是Cesium的Color对象，分别代表ARGB颜色通道。
【WebGL】如何设置entity中添加的布告板固定大小不变
【解决办法】设置billboard的sizeInMeters属性为true即可，参考代码：
billboard: {
image: defaultUrl,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.CENTER,
scale: 3,
sizeInMeters: true,
// scaleByDistance: new Cesium.NearFarScalar(1000, 3, 100000, 3),
width: 50,
height: 50,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 800.0),
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
},
【WebGL】怎么调整多个影像叠加倾斜的顺序？
【解决办法】关于调整影像图层顺序的问题，raise是调整影像图层加载先后顺序的。如果要调整影像叠加到倾斜顺序，需要通过修改叠加数组里边数组顺序实现coverImageryLayer数组的顺序。例如：
//imageryLayer2的顺序在imageryLayer1前
layer.coverImageryLayer = [imageryLayer2,imageryLayer1];
【WebGL】几个图层名一致，前端addLayerService添加只显示一个
【问题原因】前端加载是通过data那里加的，没法区分场景名字，我们底层是不可以重名，否则加不上。
【WebGL】如何关闭月球？
【解决办法】viewer.scene.moon.show = false;
【WebGL】使用vue组件，立面分析初始化后场景中所有倾斜模型会变蓝色
【解决办法】变量不要定义在data下边，在这儿的变量会被vue劫持监听变化和dom双向绑定，挂window下面去让其他地方调用。参考下面连接的文档，类似这样去定义
let Cesium = window.Cesium;
let facade =new Cesium.Facade(viewer.scene)
window.facade = facade；
http://support.supermap.com.cn:8090/webgl/examples/TopicDOC/Vue&WebGLDevelopment.html
【WebGL】iserver发布的3dtiles服务，前端加载报错404
【解决办法】加载iserver发布3dtiles服务需要写参数isSuperMapiServer: true
【WebGL】如何设置初始化球面的透明度
【解决办法】
var imageryLayer = viewer.imageryLayers.get(0);
imageryLayer.alpha = 0.1;
【WebGL】vue安装WebGL组件报错Module not found: Error: Can’t resolve ‘element-plus/lib/theme-chalk/index.css’ in ‘F:\SuperMap\vue\vue-webgl\vue_ts_zujian\src’
【解决办法】
import ‘element-plus/lib/theme-chalk/index.css’
// 将上述代码修改为下面代码即可
import ‘element-plus/theme-chalk/index.css’
【WebGL】vue+ts使用WebGL组件报错:无法找到摸块"@supemmap/vue-iclient3d-ebgl”的声明文件。“d:/vue web/chaotu-test/hypergraph-chaotu/node modules/@supermap/vueiclient3d-webgl/dist/vue-iclient3d-webgl.min.js”隐式拥有“any”类型。
【解决办法】tsconfig.json文件compilerOptions中添加"noImplicitAny”: false，
【WebGL】 WebGL vue组件在vue3.0使用的时候没有webpack.base.config.js文件，应该在哪里添加在规则， 以处理cur类型呢？
【解决办法】在index.html同级创建一个vue.config.js的文件，然后将一下代码放入，保存重启项目：module.exports = {
chainWebpack: config => {
// GraphQL Loader
config.module
.rule(‘rules’)
.test(/.(png|jpe?g|gif|svg|cur)(?.*)?$/)
.use(‘url-loader’)
.loader(‘url-loader’)
.end()
}
}
【WebGL】WebGL 如何设置泛光扫描圆环
【解决办法】
//特效圆环
viewer.scene.scanEffect.show = true
viewer.scene.scanEffect.mode =Cesium.ScanEffectMode.CIRCLE;
viewer.scene.scanEffect.textureUrl = “./images/环状扫描纹理2.jpg”;
viewer.scene.scanEffect.centerPostion = new Cesium.Cartesian3.fromDegrees(106.44175584992466, 29.51555839072486, 1);
【WebGL】WebGL如何加载iserver创建的临时图层
【解决办法】var layer = viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
url : ‘http://localhost:8090/iserver/services/map-Population/rest/maps/PopulationDistribution’,
layersID: ‘fc6eb92612454754af347e1901b4a259_0231c94a9301410ebb5ed71fbf131d67’
}));layersID为临时图层id
【WebGL】iClient3D for Cesium中加载gltf时设置负数高度，地形开挖后模型不可见是为什么？
【问题原因】场景没有开启地形模式
【解决办法】设置viewer.scene.undergroundMode = true; //设置开启地下场景
viewer.scene.screenSpaceCameraController.minimumZoomDistance = -1000;
【WebGL】iClient3D for Cesium中如何获取到点击的图层？
【解决办法】viewer.scene.layers.getSelectedLayer()
【WebGL】iClient3D for Cesium中加载出来的模型是透明的，怎么解决？
【解决办法】关闭模型的透明排序，layer.orderIndependentTranslucency = false
【WebGL】iClient3D for Cesium中对模型设置了线框不起作用？
【解决办法】生成缓存的时候需要勾选带线框