The 3D Earth objects we see after DIV rendering are collectively referred to as 3D scenes, which correspond to mars3d.Map class , this is the beginning of everything, the starting point of all relevant controls. Master the Mars3D The map class has basically mastered Mars3D.
# 1. 3D scene initialization
When using mars3d, you can configure the default parameters as needed. If you just want to get the default effect, you only need to write the following line of code:
var map = new mars3d.Map('mars3dContainer')
When you need to configure the map, mars3d provides a detailed parameter configuration scheme (as follows). You don't need to fully understand the meaning of each parameter for the time being. We will explain the relevant parameters in detail in the following tutorials.
// Create a 3D Earth scene
var map = new mars3d.Map('mars3dContainer', {
scene: {
//Default viewing angle parameters
center:{ lat: 30.054604, lng: 108.885436, alt: 17036414, heading: 0, pitch: -90 },
shadows: false, //Enable sun shadow
removeDblClick: true, //Do you want to remove the default double click event of Cesium
//Here is cesium options supported by viewer [control related are written in another control attribute]
sceneMode: 3, //3 is equivalent to cesium SceneMode. SCENE3D,
//Here is cesium Scene object related parameters
showSun: true, //Show sun
showMoon: true, //Show moon
showSkyBox: true, //Show skybox
showSkyAtmosphere: true, //Does it show the aperture outside the earth's atmosphere
fog: true, //Whether to enable atomization effect
fxaa: true, //Enable anti aliasing
//Here is cesium Globe object related parameters
globe: {
depthTestAgainstTerrain: false, //Enable depth monitoring
baseColor: '#546a53 ', / / default earth background color
showGroundAtmosphere: true, //Is the surface atmosphere drawn on earth
enableLighting: false //Show day and night area
},
//Here is cesium Screenspaceameracontroller object related parameters
cameraController: {
zoomFactor: 3.0, //Step size parameter of mouse wheel amplification
minimumZoomDistance: 1, //Minimum earth magnification in meters
maximumZoomDistance: 50000000, //Maximum reduction of the earth in meters
enableRotate: true, //Whether the user is allowed to rotate the camera in 2D and 3D views
enableTranslate: true, //Allow users to pan the map in 2D and Columbus views
enableTilt: true, // Whether the user is allowed to tilt the camera in 3D and Columbus views
enableZoom: true, // Allow users to zoom in and out of the view
enableCollisionDetection: true //Allow collision detection of Terrain Camera
}
},
control: {
baseLayerPicker: true, //basemaps basemap toggle button
homeButton: true, //Angle reset button
sceneModePicker: true, //2D / 3D switch button
navigationHelpButton: true, //Help button
fullscreenButton: true, //Full screen button
},
terrain: {
url: 'http://data.mars3d.cn/terrain',
show: true
},
basemaps: [
{
name: 'Sky map satellite',
icon: 'img/basemaps/tdt_img.jpg',
type: 'tdt',
layer: 'img_d',
key: ['9ae78c51a0a28f06444d541148496e36'],
show: true
}
]
})
# 2. mars3d.Map class parameter description
| Parameter name | type | Parameter interpretation |
|---|---|---|
| id | String or cesium Viewer | The id of the div of the map container or the constructed viewer object |
| mapOptions | Object | Parameters for creating the earth |
mapOptions parameters include:
| Parameter name | type | Parameter API | explain |
|---|---|---|---|
| scene | Object | Parameter list | scene |
| control | Object | Parameter list | control |
| terrain | Object | Parameter list | terrain |
| basemaps | Array | Parameter list | Basemap layer |
| layers | Array | Parameter list | layer |
For more details, refer to API document Map class
# 2.1 use json configuration file to record parameters to quickly create 3D scene
We may use the same set of codes in different projects, but the map configuration parameters are different. Then we can save the map parameters in the back-end service, dynamically generate or store them in json files, and parameterize the 3D scene. We can directly load and use different json data to quickly create various 3D scenes.
# (1) Read json files in any way. The following is just a demonstration
let configUrl = 'http://mars3d.cn/config/config.json'
mars3d.Resource.fetchJson({ url: configUrl }).then(function(json) {
initMap(json.map3d)//Build map
}).otherwise(function(error) {
console.log('load JSON error', error)
})
# (2) The read json object is passed into new mars3d Map method to create earth
function initMap(mapOptions) {
//Create a 3D Earth scene
var map = new mars3d.Map('mars3dContainer', mapOptions)
}
config. The attribute parameter in JSON is the same as the mapOptions parameter.
# 2.2 operation effect
New window view
# 3. scene parameters
Scene scene is the container (HTML canvas) of all 3D graphic objects. In the scene objects, we can control: globe ellipsoid, camera camera, etc. when creating a map, you can configure the default viewing angle in the scene (similar to the map level of two-dimensional map), various parameter controls of three-dimensional scene, various camera controls, etc. through the scene parameter in the parameter. Parameter interpretation reference API documentation
var map = new mars3d.Map('mars3dContainer', {
scene: {
//Default viewing angle parameters
center: { lat: 30.715648, lng: 116.300527, alt: 10727, heading: 3, pitch: -25 },
shadows: false, //Enable sun shadow
removeDblClick: true, //Do you want to remove the default double click event of Cesium
//Here is cesium options supported by viewer [control related are written in another control attribute]
sceneMode: 3, //3 is equivalent to cesium SceneMode. SCENE3D,
//Here is cesium Scene object related parameters
showSun: true, //Show sun
showMoon: true, //Show moon
showSkyBox: true, //Show skybox
showSkyAtmosphere: true, //Does it show the aperture outside the earth's atmosphere
fog: true, //Whether to enable atomization effect
fxaa: true, //Enable anti aliasing
//Here is cesium Globe object related parameters
globe: {
depthTestAgainstTerrain: false, //Enable depth monitoring
baseColor: '#546a53 ', / / default earth background color
showGroundAtmosphere: true, //Is the surface atmosphere drawn on earth
enableLighting: false, //Show day and night area
},
//Here is cesium Screenspaceameracontroller object related parameters
cameraController: {
zoomFactor: 3.0, //Step size parameter of mouse wheel amplification
minimumZoomDistance: 1, //Minimum earth magnification in meters
maximumZoomDistance: 50000000, //Maximum reduction of the earth in meters
enableRotate: true, //Whether the user is allowed to rotate the camera in 2D and 3D views
enableTranslate: true, //Allow users to pan the map in 2D and Columbus views
enableTilt: true, // Whether the user is allowed to tilt the camera in 3D and Columbus views
enableZoom: true, // Allow users to zoom in and out of the view
enableCollisionDetection: true, //Allow collision detection of Terrain Camera
},
},
})
After the earth is created, you can update the scene parameter by referring to the following code example
// Update earth parameters
map.setSceneOptions({
cameraController: {
maximumZoomDistance: 500000000
}
})
# 4. Default viewing angle parameters
If you want to customize the default view angle and map level when entering the map page, you can set it in the scene parameter when creating the earth center parameters Value:
var map = new mars3d.Map('mars3dContainer', {
scene: {
center: { lat: 25.389914, lng: 119.084961, alt: 1179575, heading: 346, pitch: -60 }
}
})
The center parameter is not easy to modify manually. It is recommended to pass map.getCameraView Method to obtain the current map view and copy it to config JSON. Or click View current viewing angle in the right-click menu in the blank area of the map to quickly obtain the next parameter value.
# 5. Control
When creating the earth, you can configure the functional components in the control through the control in the configuration item. The supported parameters are as follows: control parameter description
var map = new mars3d.Map('mars3dContainer', {
control: {
//Here is cesium options related to the controls supported by the viewer
baseLayerPicker: true, //basemaps basemap switch button, layer selector, select the map service and terrain service to be displayed
homeButton: true, //Angle reset button
sceneModePicker: true, //Two or three-dimensional switch button, select projection mode, there are three kinds: 3D,2D and Columbus view
navigationHelpButton: true, //The help button displays the default map control help
infoBox: true, //Information box
selectionIndicator: true, //Selection box
vrButton: true, //vr mode button
fullscreenButton: true, //Full screen button
animation: false, //Animation part button (lower left corner) to control the playback speed of view animation
timeline: false, //The timeline (lower side) indicates the current time and allows the user to skip to a specific time
geocoder: true, //POI query button
geocoderConfig: { key: ['ae29a37307840c7ae4a785ac905927e0'] }, //POI query button parameter configuration
//Here is mars3d Control defined controls
defaultContextMenu: true, //Right click menu
mouseDownView: true,
compass: { top: '10px', right: '5px' },
distanceLegend: { left: '100px', bottom: '2px' },
},
})
# 6. Topographic parameters
Terrain is an important three-dimensional effect in the three-dimensional scene. You can see the ups and downs of mountains. When creating the earth, you can set and turn on the terrain parameter in the configuration item. Supported parameters, refer to terrain terrain parameter description
var map = new mars3d.Map('mars3dContainer', {
terrain: {
//type:'xyz', / / it represents' xyz 'when it is not passed in by default
url: 'http://data.mars3d.cn/terrain',
show: true
},
})
# 6.1 type of terrain
Topographical type The following types are supported
| Class name | explain |
|---|---|
| xyz | Standard xyz service (default when not configured) |
| arcgis | ArcGIS terrain service |
| ion | cesium official ion online service |
| gee | Google Earth enterprise service |
| vr | vr terrain service |
| none | No terrain, standard ellipsoid |
# 6.2 updating terrain
If you don't want to set the terrain when creating a map, you can also use the mars3d.LayerUtil.createTerrainProvider Create a terrain service object and assign it to map.terrainProvider At present, only one terrain service is supported for one ball
map.terrainProvider = mars3d.LayerUtil.createTerrainProvider({
type: 'arcgis',
url: 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
})
# 7. Grid tile base map
Terrain is a three-dimensional "skeleton", and the grid base map is the "skin" we can perceive in three dimensions. When creating the earth, you can basemapse Add grid tile basemaps (multiple layers are allowed to be added, and you can switch in the basemap controller after adding multiple layers). Generally, we can set the show parameter of basemaps displayed by default in the basemaps array to true
var map = new mars3d.Map('mars3dContainer', {
basemaps: [
{
name: 'Sky map satellite',
icon: 'img/basemaps/tdt_img.jpg',
type: 'tdt',
layer: 'img_d',
key: ['9ae78c51a0a28f06444d541148496e36'],
show: true,
},
{
name: 'offline map ',
icon: 'img/basemaps/mapboxSatellite.jpg',
type: 'xyz',
url: 'http://data.mars3d.cn/tile/googleImg/{z}/{x}/{y}.jpg',
maximumLevel: 12,
},
{
name: 'Single picture',
icon: 'img/basemaps/offline.jpg',
type: 'image',
url: 'img/tietu/world.jpg',
},
]
})
# 7.1 layer parameters of basemap
The layer types supported by grid basemap can only be tile layers, which are inherited from Basetilayer class The layer type of the. The basemaps parameter is an array, in which the parameters of each layer support:
basemaps parameter description
| Parameter name | type | Parameter interpretation |
|---|---|---|
| type | string | layer style |
| icon | string | Layer thumbnail, which is used for the display of layer switching controls |
| General parameters | Basetilayer class construction parameters | |
| Other parameters | Each type has some different personalized parameters. Refer to the layer class corresponding to each type to construct parameters |
# 7.2 layer type of basemap
The type s supported by basemaps currently include:
| Type name | explain | Corresponding layer class | remarks |
|---|---|---|---|
| image | Single picture | mars3d.layer.ImageLayer | |
| xyz | Standard pyramid map | mars3d.layer.XyzLayer | |
| wms | OGC WMS standard services | mars3d.layer.WmsLayer | |
| wmts | OGC WMTS standard service | mars3d.layer.WmtsLayer | |
| arcgis | ArcGIS standard services | mars3d.layer.ArcGisLayer | |
| arcgis_cache | ArcGIS slicing | mars3d.layer.ArcGisCacheLayer | |
| tdt | Sky map | mars3d.layer.TdtLayer | Online map |
| gaode | Gaode | mars3d.layer.GaodeLayer | Online map |
| baidu | Baidu | mars3d.layer.BaiduLayer | Online map |
| tencent | tencent | mars3d.layer.TencentLayer | Online map |
| osm | OpenStreetMap(OSM) | mars3d.layer.OsmLayer | Foreign online map |
| bing | Microsoft BingMaps | mars3d.layer.ArcGisCacheLayer | Foreign online map |
| mapbox | Mapbox map | mars3d.layer.MapboxLayer | Foreign online map |
| ion | Cesium Ion service | mars3d.layer.IonLayer | Foreign online map |
| Google Maps | mars3d.layer.GoogleLayer | It has been sealed | |
| gee | Google Earth enterprise services | mars3d.layer.GeeLayer | Private server deployment required |
# 7.3 update base map
After the basemap is created, you need to switch the basemap or obtain the current basemap. You can display the specified basemap according to the id or name attribute configured in config, such as:
//Gets or sets the currently displayed basemap. When setting, you can pass in layer id or name map.basemap = 'offline map ' //Gets the configured basemap array let arr = map.getBasemaps()
# 8. Layers that can be superimposed
In a 3D map, you can add multiple layers to the map to overlay the display. When creating the earth, you can pass layers parameter To configure the commonly used layers in the current project at one time and use them as needed in the code.
var map = new mars3d.Map('mars3dContainer', {
layers: [
{
"type": "tdt", //Required parameters
"name": "Sky map annotation",
"layer": "img_z",
"key": ["Sky map token value"],
"show": true
},
{
"id":1987,
"type": "3dtiles",
"name": "County Community",
"url": "http://data.mars3d.cn/3dtiles/qx-shequ/tileset.json",
"show": false
},
]
})
# 8.1 layers that can be superimposed
The layers configuration supports basemaps, all supported tile layers, and also supports the loading of all vector overlay data. For the supported type types, please refer to Layer type , each type has some different personalized parameters. Refer to the layer class corresponding to each type to construct parameters.
# 8.2 layer control
Can pass let layer = map.getLayer(1987,'id') To get config The corresponding layer object with id 1987 configured in JSON.
In order to understand the objects obtained by getLayer, the layers configured by layers are equivalent to the following creation methods,
//Create layers using factory methods
var layer = mars3d.LayerUtil.create({
"type": "3dtiles",
"name": "County Community",
"url": "http://data.mars3d.cn/3dtiles/qx-shequ/tileset.json",
})
map.addLayer(layer)
After the Map is created, you can use the addLayer and removeLayer Method to control the loading and deletion of layers.
More methods can be found in Layer type After finding the corresponding layer class, check the properties or methods of the corresponding class to further control and manage the layer.
