SuperMap GIS basic product 3D GIS FAQ collection (4)
[WebGL] The 3D scene loads the Gaussian coordinate system REST map service released by iServer but has no effect, what should I do?
[Solution] Cesium does not support the coordinate system of Gaussian projection, it is recommended to convert to Mercator projection.
[WebGL] After adding the S3MTilesLayer, can the front end query the model height of the point according to the latitude and longitude of the point?
[Solution] You can calculate the height by passing in the latitude and longitude of the model through viewer.scene.sampleHeight(), for example:
let height = viewer.scene.sampleHeight(
new Cesium.Cartographic(
Cesium.Math.toRadians(longitude),//转换成弧度
Cesium.Math.toRadians(latitude),//弧度
)
)；
[WebGL] After using scene.addVectorTilesMap to load vector tiles, how to get the mvt vector tile style?
[Solution] Obtaining the tile style can only be obtained after the tile loading is completed. Through the following code, obtain it in the callback function of cesium.when()
var layerReadyPromise = mvtLayer.readyPromise;
Cesium.when(layerReadyPromise, function (data) {
console.log(mvtMap.mapboxStyle);}）
[WebGL] How to calculate the center point of a geometric surface?
[Solution] Use: var pCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
[WebGL] What is the version of Echarts quoted by the official website? According to the example, setting the min property in yAxis doesn't work, how to solve it?
[Solution] The echarts version used in the official website example is 4.0.4, and can be viewed through console.log(echarts.version). According to the official API of echarts, only min is set, no max is set. If max is not set, the maximum value will be automatically calculated to ensure the uniform distribution of coordinate axis scales, so it is necessary to set the max value again.
[WebGL] When previewing in iserver, or opening a scene through scene.open in webgl, the label thematic map has the effect of avoiding cover aggregation. How can I display the label completely?
[Cause of the problem] The built-in webgl of iserver preview is set to avoid by default, which can be adjusted through the front end. Open the scene through scene.open, and avoidance is also enabled by default.
[Solution] It is necessary to set layer.isOverlapDisplayed =true. When set to true, the overlapping part is still displayed, that is, it does not participate in avoidance.
[WebGL] How to query other points within 1 km of a point?
[Solution] There are three methods as follows:
1. Spatial query, construct a geometry circle for query.
2. Use the distance query, "queryParams":[{…}]" is the parameter set of the query dataset, and the name specifies the name of the target layer to be queried. 3. Use buffer
analysis
[WebGL] When initializing the cesiumcontainer, an error will be reported sporadically, and the example of loading the official website will also report an error. What's the matter? Using an AMD graphics card.
[Solution] Refer to the blog for 3D display configuration: https://blog.csdn.net/supermapsupport/article/details/128440798
It is recommended to replace it with an NVIDIA discrete graphics card.
[WebGL] After analyzing the slope of the terrain, how to obtain the slope value of a certain point?
[Solution] WebGL cannot directly obtain the results of the slope analysis. It is recommended to use the desktop for slope analysis to obtain the results of the slope analysis, and then publish it as a data service, and use the data service to obtain the grid value of a certain coordinate point. The grid value is the slope value of the point.
[WebGL] How to make the Mvt map unselectable?
[Solution] Attribute: selectEnabled. Set the map checkable property to false. Sample code:
mvtMap.selectEnabled= false
[WebGL] Why setting the terrain layer to hide viewer.terrainProvider.visible = false has no effect?
[Problem reason] To set the visibility of the terrain layer, you need to enable the parameter: invisibility
[Solution] When loading the terrain, set the parameter: invisibility: true, and then you can control the visibility through the visible parameter. Sample code:
terrainProvider : new Cesium.CesiumTerrainProvider({
url : URL_CONFIG.SiChuan_TERRAIN,
isSct : true,//地形服务源自SuperMap iServer发布时需设置isSct为true
invisibility:true //是否开启设置地形显隐的功能,默认为false。
}),
【WebGL】How to realize service authority management?
[Solutions] 1. Change the service setting authority in the SuperMap iServer service management page to be accessible by designated users 2.
Apply for a token key in the SuperMap iServer user center
3. Set the token key in iClient for Cesium to realize loading services. For details, please refer to the article: https://blog.csdn.net/supermapsupport/article/details/121210572
[WebGL] Which layers can set multiple subdomains, and how to configure multiple subdomains?
[Solution] 1. Terrain, image, MVT, and S3M layers can all be set with multiple subdomains.
2. Use the nginx client to map different port addresses to access iServer, build a subdomain environment, and improve performance. For the configuration of multiple subdomains, please refer to the article: http://support.supermap.com.cn:8090/webgl/examples/TopicDOC/subdomains.html.
【WebGL】How to deal with oblique photography that has been retouched as a single building?
[Cause of the problem] The retouched oblique photography, its texture will be relatively fragmented, and there will be large textures of 4096*4096 and above, and the oblique storage according to the conventional method will result in large files and slow loading
[Solution] It is recommended to import it as a model dataset, then properly optimize the texture size, and generate a cache for the model dataset. For details, please refer to the article:
https://blog.csdn.net/supermapsupport/article/details/130404872
[WebGL] How to change the speed and direction of water flow in 3D water surface layer?
[Solution] It can be changed through the waterSpeed parameter in the S3MTilesLayer class, and a two-dimensional quantity is passed in, and the magnitude of the value is used to represent the speed, and the positive and negative values of x and y are used to represent the direction of the water flow. Example code: WaterLayer.waterSpeed = new Cesium.Cartesian2(-2,2)
[WebGL] Is it possible to modify the color of the water surface and the intensity of the ripples on the front end for the 3D water surface layer?
[Solution] Yes, change the color of the water surface through the waterColor parameter in the S3MTilesLayer class; modify the ripple size with waterWaveScale
[WebGL] How to make the camera rotate around itself and look around clockwise?
[Solution] There are two methods,
1. Use the camera.flyCircle(center) method, and the incoming coordinates are the current position coordinates of the camera;
2. Use the setInterval() loop method to specify how many times each interval, and modify the roll parameter of the camera to make it rotate
[WebGL] How to get all ids of BIM models?
[Solution] Use the datasetInfo() method to obtain the startid and endid of the layer. After getting the id range, construct the entire id array by yourself. Sample code:
layer.datasetInfo().then(function(result){
console.log(result)
}）
【WebGL】How to set the model to wireframe mode?
[Solution] 1. Set the fill style of the layer to "Fill and Outline": layer.style3D.fillStyle = Cesium.FillStyle.Fill_And_WireFrame;
2. Set the wireframe mode: Cesium.WireFrameType.EffectOutline;
the wireframe mode is divided into special effect border line, quadrilateral border mode, triangle border mode, and sketch border mode
[WebGL] The laser point cloud model is set in color by layered coloring in iDesktop, but the color is lost after publishing?
[Problem Cause] Due to different rendering mechanisms, the layered coloring effect of the desktop cannot be saved
[Solution] Use the front-end code to set the color of the laser point cloud cache. For a detailed example, please refer to:
http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#S3MTiles_pointCloud
【WebGL】Drawing a surface while oblique photography and terrain excavation, the error "height is not defined" is reported?
[Solution] The terrain excavation interface has a height depth parameter, which determines the depth of terrain excavation. The s3m layer does not have a height parameter, but excavates the entire drawn area. Therefore, the height parameter cannot be filled in when excavating the s3m layer.
【WebGL】How to achieve pipeline flow effect?
[Solution] There are two ways: 1. Use the trail line material, 2. Paste a picture with an arrow when making data, and set the texture flow at the front end. For detailed steps, please refer to the article:
https://blog.csdn.net/supermapsupport/article/details/102775780
【WebGL】MVT map, after the mouse selects the highlighted object, you need to manually click other blank areas to release. Is there an interface to release the selected state?
[Solution] Yes, there is a releaseSelection() release selection set method in the VectorTilesMap class
[WebGL] How many ways are there to realize the trajectory animation of objects?
[Solutions] There are 3 types.
1. Dynamic layers (suitable for multiple instances and multiple objects moving along different paths, such as urban traffic networks).
2. KML node animation (applicable to the movement of a single model object along a specified path, since the node coordinates and time are recorded in files, it is inconvenient to modify).
3. SampledPositionProperty class (applicable to a single model object moving along a specified path, convenient to modify time, node coordinates, and running speed)
【iDesktop】What should I do if only a small part of the data is displayed after the oblique photography data is stored in the database?
[Cause of the problem] There are data with suffixes other than osgb files in the tile folder of oblique photography data
[Solution] Delete the data with suffixes other than the osgbosgb file in the tile folder of the oblique photography data, and then generate the configuration file and store it in oblique
[iDesktop] After the 3D surface is cached, when zooming and moving the viewing angle in the scene, the surface will flicker
[Problem Cause] There are overlapping surfaces, and there will be flashing surfaces when moving and zooming the scene perspective
[Solution] Turn on the depth optimization of the scene in the scene properties
[iDesktop] Why is the 3D geographic design function card of iDesktop not displayed?
[Solution] You need to open the scene in iDesktop; if it still doesn't exist, the functional module is hidden, you can open the functional module in the environment design
[WebGL] Can data in shp and geojson formats be directly loaded and used in the scene?
[Solution] To load GeoJSON data, you can use Cesium's native interface GeoJsonDataSource. For specific usage methods, please refer to the api document http://support.supermap.com.cn:8090/webgl/web/apis/3dwebgl.html, just search for GeoJsonDataSource. shp files cannot be loaded directly, but open source tools such as GDAL can be used to convert them into GeoJSON data for loading.
【WebGL】Is it possible to dynamically modify the position of the observer in the line-of-sight analysis?
[Solution] It can be realized by dynamically modifying sightline.viewPosition at the front end
【WebGL】When the distance is far away, the pipeline layer only displays the line, why not the model?
[Cause of the problem] lod is affected, and the rough layer is displayed in the distance
[Solution] Set layer lod, layer.lodRangeScale = 100
[WebGL] Add geojson line data all over the world
[Cause of the problem] The coordinates of the line data nodes in geojson are in the projected coordinate system
[Solution] Change the data to latitude and longitude coordinates
[WebGL] Why is the layer not loaded after adding camera positioning?
[Problem Cause] The camera positioning code was written incorrectly, resulting in the subsequent code not being executed
【Solution】Correct camera positioning code:
scene.camera.setView({
destination: new Cesium.Cartesian3.fromDegrees(116.4566, 39.9149, 5323.445971240632),
orientation: {
heading: 3.1612,
pitch: -1.5188,
roll: 6.283185307179563
}
})
【WebGL】How to set the camera to go underground?
【Solution】
viewer.scene.undergroundMode = true; //设置开启地下场景
viewer.scene.screenSpaceCameraController.minimumZoomDistance = -1000; //设置相机最小缩放距离,距离地表-1000米
[WebGL] Why does it become very stuck after using the handler to monitor in the vue project?
[Cause of the problem] The definition of attributes such as handler and viewer in data will be hijacked by vue and cause lag
[Solution] Do not define attributes such as handler and viewer in data, just get them outside
[WebGL] Sphere plus a custom background image
[Solution] SingleTileImageryProvider only supports latitude and longitude. If the global scope is covered, the aspect ratio of the image remains at 2:1. If the rectangle is set, the aspect ratio of the image can be set according to the rectangle to avoid image stretching and affect the display effect. code show as below:
viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : './images/worldimage.jpg'
}));
[WebGL] The highlight setting is covered by the layer setting, how to set it not to be blocked by the model?
[Solution] You can set the selected object mode to a contour model that will not be occluded, and select the display style of the selected object. The code is as follows:
layer.selectColorType = Cesium.SelectColorType.ALWAYS_SHOW_SILHOUETTE;
layer.selectedColor = Cesium.Color.DEEPSKYBLUE;
The specific effect is shown in the figure:
[WebGL] What should I do if the billboard is blocked by the earth?
[Solution]
1. You can set the disableDepthTestDistance value to solve
viewer.entities.add({
id: "test",
position: Cesium.Cartesian3.fromDegrees(longitude, latitude,height),
billboard: {
image: './images/xxxxxx.jpg',
disableDepthTestDistance:Number.POSITIVE_INFINITY//返回正无穷大
}
});
2. Set viewer.scene.globe.depthTestAgainstTerrain=false to cancel the depth test
【WebGL】Modify the default image on the sphere
[Solution] Under the for Cesium package, replace the pictures in the folder (SuperMap iClient3D 11i (2022) SP1 for Cesium_CH\Build\Cesium\Assets\Textures\NaturalEarthII) with the images you want.
[WebGL] There will be a gap of a few pixels in the middle when the canvas or img tag of the initialization ball is displayed together with the div
[Solution] Add display:block to the canvas/img tag
[WebGL] The same project appeared when loading Tiandi map. The win can be loaded on mac to access, but Tiandi map cannot be loaded. The request returns an image.
[Solution] Comment out viewer.scene.terrainProvider.isCreateSkirt = false; to display normally
[WebGL] When viewing some examples with locally deployed WebGL, the earth cannot be rendered and only the starry sky is displayed, but the examples on the official website can be rendered normally.
[Solution] The image layer is not loaded, comment out the loading code of the image part, or replace the local map image that can be accessed normally.
[WebGL] What is the difference between the camera positioning method setView and flyTo in iClient for Cesium?
[Solution] In iClient for Cesium, setView can directly locate to the specified spatial position, while flyTo flies from the current perspective to a new spatial position.
[WebGL] How does the camera positioning method flyTo adjust the flight duration in iClient for Cesium?
[Solution] In iClient for Cesium, you can control the flight time by adjusting the duration parameter in flyTo.
[WebGL] How does the camera positioning method flyTo fly within a certain rectangular range in iClient for Cesium?
[Solution] In iClient for Cesium, you can set the specified rectangular range box through the Cesium.Rectangle.fromDegrees(west, south, east, north) method. Use this range when positioning to achieve positioning. The method of use is as follows
viewer.camera.flyTo({
destination : Cesium.Rectangle.fromDegrees(west, south, east, north)
});
[WebGL] How to solve the problem that the browser downloads the Bin when loading the GLTF model with Bin in iClient for Cesium?
[Solution] When the GLTF model is loaded in iClient for Cesium and the browser downloads Bin, it is mainly due to the new version of GLTF, and the GLTF model needs to be converted through a third-party plug-in.
You can use Blender software to import gltf and load it after exporting to gltf2.0 single file format.
[WebGL] How to load geojson data through the loadjson method in iClient for Cesium?
[Solution] To load json data through the load method in iClient for Cesium, read the feature in json and draw it through entity. How to use can refer to the following code
Cesium.loadJson('./data/json/test.json').then(function(jsonData) {
for (let i = 0; i < jsonData.features.length; i++) {
let pts = [];
var ifeature = jsonData.features[i];
var datapoints = ifeature.geometry.coordinates;
for (let j = 0; j < datapoints.length; j++) {
var longitude = datapoints[j][0];
var latitude = datapoints[j][1];
pts.push(longitude, latitude)
}
var cc = viewer.entities.add({
id: i,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray(pts),
width: 10,
material: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.ORANGE,
outlineWidth: 2,
outlineColor: Cesium.Color.BLACK,
}),
}
});
}
});
[WebGL] How to modify ellipsoid parameters in iClient for Cesium?
[Solution] In iClient for Cesium, the sphere initialization scene is used by default. If you need to change it to an ellipsoid, you can modify the ellipsoid before initializing the sphere. Implementation code refer to the following code
var obj = [6378137.0, 6378137.0, 6356752.3142451793];
Cesium.Ellipsoid.WGS84 = Object.freeze(new Cesium.Ellipsoid(obj[0], obj[1], obj[2]));
var viewer = new Cesium.Viewer('cesiumContainer');
[WebGL] How to modify the height of the label in the vector tile in iClient for Cesium?
[Solution] To modify the height of the vector tile label in iClient for Cesium, you can use the style3D method to set its bottomAltitude. This method is only valid for labels, not for line and area layers.
var style3D = new Cesium.Style3D();
//设置底部高程。
style3D.bottomAltitude = 10;
//获取底部高程值。
var altitude = style3D.bottomAltitude;
【WebGL】After using iClient for Cesium 11i to load the model, what should I do if I see the underground model from above-ground perspective?
[Solution] In the iClient for Cesium 11i version, the depth detection of the scene is turned off by default. When loading the model, the underground model may run to the ground. Turn on deep detection to solve it.
viewer.scene.globe.depthTestAgainstTerrain = true
[WebGL] When using iClient for Cesium to click through the pickPosition() method, how to solve the situation that the picking coordinates are inaccurate?
[Solution] In iClient for Cesium, viewer.scene.pickPosition() picks the Cartesian3 at the corresponding position, which is suitable for selecting the position of the model surface and picking the coordinates of three-dimensional objects. But be sure to enable depth detection (viewer.scene.globe.depthTestAgainstTerrain = true) when picking, otherwise the picking coordinates will be inaccurate.
[WebGL] The development system is completely black when turned on at night in real time. How to make it normal during the day?
[Problem Cause] The data itself does not change, but the preview loaded scene will change with the system time.
[Solution]
You can use the code to set the fixed scene time when the front-end loads:
// 改变时间设置光照效果
var utc=Cesium.JulianDate.fromDate(new Date("2021/07/04 04:00:00"));
//北京时间=UTC+8=GMT+8
viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(utc,8,new Cesium.JulianDate());
this.viewer.scene.light = new Cesium.DirectionalLight({
//去除时间原因影响模型颜色
direction: new Cesium.Cartesian3(0.35492591601301104, -0.8909182691839401, -0.2833588392420772)
})
[WebGL] Is it possible to load mvt tiles in 4528 projected coordinate system?
[Problem Cause] The WebGL spherical scene is a geographic coordinate system ball, and only geographic coordinate system data or 3857 global Mercator projection coordinate system can be loaded.
[Solutions] 1. Use a plane scene to load the 4528 projected coordinate system or any projected coordinate system;
2. Convert the original data projection into a geographic coordinate system (such as 4326), and then perform the front-end for the front-end use.
【WebGL】How to change the basemap of the earth?
[Solution] Load an image image layer, Cesium.SingleTileImageryProvider
[WebGL] The point cloud of the text file is loaded and used in the front end of WebGL.
[Solution] Use the 3D data-generate point cloud cache function of iDesktop or iDesktopX to generate a cache from the point cloud data, and publish the 3D service to the cache using the front-end WebGL.
[WebGL] Use viewer.scene.open() to open a scene twice, only one set of layers will take effect, what should I do if I want to generate multiple sets of layers?
[Problem reason] If it is the same data scene.open, there is no way to open multiple ones, and different data scene.oepn can open multiple ones.
[Solution] If you want to open more than one of the same data, it is recommended to use scene.addS3MTilesLayerByScp. Note that if you want to load more than one of the same data, you must give different layer names when adding.
http://support.supermap.com.cn:8090/webgl/docs/Documentation/Scene.html
[WebGL] How to realize the border of the area surface dataset, which is similar to the custom primitive-dynamic outline effect similar to earthsdk?
【解决办法】使用自发光纹理或纹理流动或泛光（可加定时器配合）等多种方法调整实现你想要的具体效果，实现路线很多：
https://blog.csdn.net/THEDEAMON/article/details/112967860
http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#scanLine
http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#airlinesTrailLines
http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#emissionTexture
http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#tx_lightSource
建议比较简单的实现方式就是直接使用线框线数据而不是面数据，直接做线数据的特效（比如泛光、自发光）
【WebGL】How to load non-ground dynamic line data close to the ground?
[Solution] Idea:
Create a new DataSource, add the entity to the DataSource, and when adding the DataSource to viewr.datasources.add(), set the ground attribute clampToGround: true.
http://support.supermap.com.cn:8090/webgl/docs/Documentation/Viewer.html
http://support.supermap.com.cn:8090/webgl/docs/Documentation/DataSourceCollection.html
http://support.supermap.com.cn:8090/webgl/docs/Documentation/DataSource.html
Post: http://support.supermap.com .cn:8090/webgl/examples/webgl/editor.html#KML_route
[WebGL] Why does the 3D pipeline only show the pipeline when it is zoomed in very close, and the other cases are vector lines.
[Problem Cause] There are two reasons for this situation:
1. It is caused by the LOD level, set layer.lodRangeScale =100
2. It is caused by the absolute height of the line to 0, you can turn off the depth detection on the front end, viewer.scene.globe.depthTestAgainstTerrain = true; and set the ground
[WebGL] When the 3D surface data is in the scene and there is terrain, the surface will not be displayed after zooming in. If the terrain is not added, the surface will always be displayed. I don't know why? (It is normal to open on the desktop)
[Solution] When generating a 3D cache for a 3D surface, the cache in the S3M3.0 format is selected. The cache defaults to ellipsoid loading, and it can be loaded normally after being modified to 2.0.
[WebGL] The label of the label thematic map loaded through S3MTilesLabelStyle in the spherical scene will sink into the ground after being zoomed in. How to set it so that it can always be displayed normally on the front end?
[Solution] There is a heightReference method under this interface, by setting different height modes, such as pasting models. Also turn off depth detection
[WebGL] Use the ellipse attribute to draw a circle, can you set the width of the outer border of the circle?
[Solution] The outlinewidth property setting of ellipse is also invalid in the native Cesium.
At present, setting the outlineWidth property of the polygon of the entity has no effect.
It is recommended to use a polygon to replace the edge with a solid line to achieve the outline effect.
[WebGL] Terrain hidden interface viewer.terrainProvider.visible = false; does not take effect
[Solution] To make the terrain invisible, you need to set invisibility: true when adding the terrain.
You can also use terrain replacement to hide terrain: https://www.jianshu.com/p/42b2457fa0b7