Table of contents
(1) Cesium: An open source js library for displaying 3D earth and maps.
(2) Basic functions of Cesium:
(3) Dependence and technical standards of cesium
(4) The relationship between Cesium and peripheral products
(5) Introduction to Cesium viewer interface components
[Visualization tool: geojson.io]
1. WebGL
WebGL is based on the OpenGL Embedded System (ES), a low-level procedural API for accessing 3D hardware. OpenGL (created by SGI in the early 1990s) is now considered a well-understood and mature API. WebGL gives JavaScript developers, for the first time ever, near-native access to on-device 3D hardware. Both WebGL and OpenGL ES are being developed under the auspices of the nonprofit Khronos Group.
Through the browser support library and the operating system's 3D API library, the WebGL API can almost directly access the underlying OpenGL hardware driver without transcoding first.
There are three steps in the drawing process:
● Get vertex coordinates
● Primitive assembly (that is, draw each triangle)
● Rasterization (generate fragments, that is, each pixel)
2. Cesium
(1) Cesium: An open source js library for displaying 3D earth and maps.
- It is based on Html5 WebGL technology to display three-dimensional objects in the browser,
- The WGS84 coordinate system is used,
- It can be used to display massive 3D model data, image data, terrain elevation data, vector data, etc.
- The 3D model format supports gltf, and the 3D tile model format supports 3d tiles.
- Vector data supports geojson and topojson formats.
- Image data supports wmts, etc.
- Elevation supports STK format.
(2) Basic functions of Cesium:
- Image layers of various resources are supported, including WMS, TMS, WMTS and time series images. The image supports transparency overlay, brightness, contrast, GAMMA hue, and saturation can all be adjusted dynamically. Rolling shutter contrast of images is supported.
- Support 3d earth, 2d map, 2.5d Columbus mode. The 3D view can use perspective and orthographic two projection methods.
- Use the 3d tiles format to stream load a variety of different 3d data, including oblique photographic models, 3D buildings, exterior and interior of CAD and BIM, point cloud data and support style configuration and user interaction
- Surface clipping of terrain, models, 3d tiles models
- Support various geometry: point, line, area, callout, bulletin board, cube, sphere, sphere, cylinder, corridors (corridors), pipe diameter, wall Visual effects include: shadow based on sun position, self shadow, soft shadow
- Atmosphere, fog, sun, sunlight, moon, stars, water surface.
- Particle effects: smoke, fire, sparks.
- Object point selection and terrain point selection.
- Supports zooming, rendering, inertial translation, flight, arbitrary viewing angle, and terrain collision detection for mouse and touch operations.
- Control cameras and create flight paths
- Use animation controls to control animation timing.
- Supports aggregation effects of points, labels, and bulletin boards Visualization of global high-precision terrain data, supports terrain exaggeration effects, and programmable contour and slope analysis effects Supports standard vector formats KML, GeoJSON, TopoJSON, and vector ground stickers Effect. The 3D model supports gltf2.0 standard PBR material, animation, skinning and deformation effects.
- The ground and highlight effects use CZML to support the display of dynamic time series data.
(3) Dependence and technical standards of cesium
- Html5: HTML was produced in 1990, and HTML4 became an Internet standard in 1997. HTML5 is a new generation standard that has been improved on the basis of HTML4.01. It was officially released in 2008.
- WebGL (Web Graphics Library) is a 3D drawing protocol. This drawing technology standard allows the combination of JavaScript and OpenGL ES 2.0. By adding a JavaScript binding of OpenGL ES 2.0, WebGL can provide hardware 3D accelerated rendering for HTML5 Canvas. , so that web developers can use the system graphics card to more smoothly display 3D scenes and models in the browser, and create complex navigation and data visualization.
- HTTP protocol
- ogc map service standard
- 3D Tiles standard, gITF model
(4) The relationship between Cesium and peripheral products
(5) Introduction to Cesium viewer interface components
3. GeoJSON data
【GeoJSON data】
GeoJSON, a data format for storing geographic information. GoeJSON object can represent geometry, feature or feature collection, support: point, line, surface, multipoint, multiline, multiface and geometry collection. A data type that is used in both planar and three-dimensional maps.
- is a format for encoding various geographic data structures,
- Geospatial information data exchange format based on JavaScript Object Notation (JSON for short).
- Supported geometry types: point, line, area, multipoint, multiline, multisurface, and geometry collection.
- A feature in it contains a geometric object and other attributes, and a feature collection represents a series of features.
Due to the excellent properties of this format in 3D maps, we can not only easily implement map functions using it, but more importantly, it also has extraordinary performance in 3D effect display.
【GeoJSON object】
Learn about the GeoJSON format and three object types for storing spatial data.
GeoJSON object: Represents a geometry, feature, or collection of features.
The GeoJSON format defines three objects:
- geometry
- feature
- feature set
1 Geometry
A "geometry" is a region in space. Geometries can be:
- A single point defined by longitude and latitude.
- Describes multiple points in a row.
- A number of points describing the outline of the polygon.
- A collection of multiple geometries.
A geometry GeoJSON object has two properties:
type: Specifies the type of geometry, such asPointorPolygon.coordinates: Coordinates containing longitude and latitude values in a two-item array. The first item is longitude and the second item is latitude. Points have only one value in an array. Lines and polygons have multiple values in one array. For polygons, the shape must be closed, so the last coordinate must be the same as the first.
The following example geometry object contains a point at Microsoft headquarters in Redmond, Washington, USA:
{
"type": "Point",
"coordinates": [-122.136866, 47.642472]
}Here is an example of a polygon surrounding a square in Paris, France: This square has five coordinates, four corners, and the last coordinate is the same as the first coordinate of the closed square.
{
"type": "Polygon",
"coordinates": [
[
[2.2580337524414062, 48.81251594581751],
[2.4262619018554688, 48.81251594581751],
[2.4262619018554688, 48.90377176147872],
[2.2580337524414062, 48.90377176147872],
[2.2580337524414062, 48.81251594581751]
]
]
}2 Feature
Feature is a bounded entity in a space. So it's a geometry with a set of properties that describe what's in that location. These attributes can be data, such as place names or temperatures.
The Feature feature GeoJSON object has three properties:
type: specifies the type of the object, and is always for traitsFeature;geometry: is a GeoJSON geometry object defining the location of this feature;type: Storage feature type (Point (point), LineString, Polygon, MultiPoint (multipoint), MultiLineString (multiline) and MultiPolygon (multiface));- Point: need to have a position;
- MultiPoint: its coordinates member is an array of Point coordinate arrays;
- LineString: Two positions need to be provided, namely the starting point and the ending point of the line segment;
- MultiLineString: its coordinates member is an array of LineString coordinate arrays;
- Polygon: Polygon, a closed LineString with four or more positions;
- MultiPolygon: its coordinates member is an array of Polygon coordinate arrays;
- GeometryCollection: a heterogeneous combination of geometry types;
- FeatureCollection: is a combination of Feature objects;
- coordinates: coordinates (storage graphics coordinates);
properties: Any valid GeoJSON object that defines the attributes of the feature.
Here is an example feature for Paris, France:
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[2.2580337524414062, 48.81251594581751],
[2.4262619018554688, 48.81251594581751],
[2.4262619018554688, 48.90377176147872],
[2.2580337524414062, 48.90377176147872],
[2.2580337524414062, 48.81251594581751]
]
]
},
"properties": {
"city_name": "Paris",
"population": 2148271
}
}3 feature sets
As the name implies, a "feature set" is a collection of features.
The feature collection GeoJSON object has two properties:
type: Specifies the type of object and is always true for feature geometriesFeatureCollection.features: Array of GeoJSON feature objects.
Here is an example feature set for two European cities:
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[2.2580337524414062, 48.81251594581751],
[2.4262619018554688, 48.81251594581751],
[2.4262619018554688, 48.90377176147872],
[2.2580337524414062, 48.90377176147872],
[2.2580337524414062, 48.81251594581751]
]
]
},
"properties": {
"city_name": "Paris",
"population": 2148271
}
},
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-0.5287170410156249, 51.26019611626714],
[0.26641845703125, 51.26019611626714],
[0.26641845703125, 51.70916142932303],
[-0.5287170410156249, 51.70916142932303],
[-0.5287170410156249, 51.26019611626714]
]
]
},
"properties": {
"city_name": "London",
"population": 8908081
}
}
]
}[Visualization tool: geojson.io]
Official website address
4. Other information
【geojson data】
geojson description document GeoJSON format specification description- OSCHINA - Chinese Open Source Technology Exchange Community
Explanation video GeoJSON data format analysis_哔哩哔哩_bilibili
Visualization tool geojson.io | powered by Mapbox
【cesium information】
Cesium Chinese Tutorial Cesium Novice Getting Started - Cesium Chinese Website All Articles | Cesium Chinese Website
View interface component parameters Official website geojson.io | powered by Mapbox
Cesium Data Collection Cesium Data Collection - Know almost