[3D GIS Visualization] Smart City Based on Vue+Cesium+Supermap (ii)

In the last article, we implemented the most basic project to build and generate a THREE-DIMENSIONAL earth. In this article, we mainly introduce the basic elements of the map, the introduction of the knowledge of the coordinate system corresponding to the map, and how to present these elements on our earth. Likewise, if there are any mistakes in the article, please feel free to ask and correct them in the comments section!

preface

The next section is devoted to map elements and coordinate systems and their transformations, just to understand. If you don’t want to see it, skip to the Viewer configuration and get to the actual operation.

The map element

elements

Let’s first take a look at what elements are probably on Baidu map (here I use route query as an example).

First of all, the most important and basic map is the base map. The base map is responsible for showing the basic geographical information in the viewport. Without the base map, the number of elements stacked is useless. Next, the starting Point and the ending Point of the route correspond to the Point element in the map, and the route between two points correspond to the LineString element in the map. Finally, there is the face data in the lower right corner, which corresponds to the Polygon in the map. In our project, the basic information presentation is composed of three elements: point, line and plane.

Coordinate system

When it comes to map development, the concept of a coordinate system is at any rate inescapable, since the earth is a ball 🌏 (it would have been nice to have said to Owen that the earth is square).

Imaginary Earth vs actual Earth

Common coordinate system

Here is not a list of commonly used domestic coordinate system and transformation methods, you can baidu. The projection coordinate system and the geographic coordinate system can be read in these two articles. We mainly introduce the common coordinate system in Cesium and the corresponding transformation mode.

Geographic coordinate system

Projected coordinate system

Coordinates in the Cesium

There are two kinds of coordinates commonly used in Cesium: WGS84 coordinate and Cartesian space coordinate. We usually use WGS84 coordinate to point to a place in terms of latitude and longitude, while Cartesian space coordinate is usually used for some spatial position transformation, such as translation and scaling. The relationship between the two is as follows:

The WGS84 coordinate system includes the WGS84 latitude and longitude coordinate system and the WGS84 Radian coordinate system (Cartographic).

Cartesian space coordinate system includes Cartesian space cartesian coordinate system (Cartesian3), plane coordinate system (Cartesian2) and 4D Cartesian coordinate system (Cartesian4).

WGS84 coordinate system

The World Geodetic System 1984 is a coordinate System established for use in the GLOBAL positioning System (GPS). The origin of the coordinates is the center of mass of the Earth. The Z axis of the geocenter space rectangular coordinate System points to the direction of the protocol Earth Pole (CTP) defined by the BIH (International Time Service Agency) 1984. The X-axis points to the intersection of the zero meridian plane of BIH 1984.0 and the equator of CTP, and the Y-axis is perpendicular to the Z-axis and X-axis to form the right-handed coordinate system. The longitude and latitude shown by the compass on our mobile phone are the current coordinates in this coordinate system, the progress range [-180, 180], the latitude range [-90, 90].

Cesium currently supports two coordinate systems, WGS84 and WebMercator. However, there is no actual object in Cesium to describe the WGS84 coordinates. The Cartographic class is used in radians:

New Cesium.Cartographic(Longitude, latitude, height) : Radian = PI /180× longitude and latitude Angle

Cartesian space rectangular coordinates (`Cartesian3`)

The origin of Cartesian space coordinates is the center of the ellipsoid. When we draw on the computer, it is not convenient to use latitude and longitude to draw directly. Generally, the coordinate system will be converted to cartesian coordinate system and the knowledge in computer graphics will be used for drawing. Cartesian3 here, kind of like a Point3D object in a 3D system, new Cesium.Cartesian3(x, y, z), with three components x, y, z.

Plane coordinate system (`Cartesian2`)

The plane coordinate system, also known as the plane cartesian coordinate system, is a two-dimensional Cartesian coordinate system with one less z component than Cartesian3, new Cesium.Cartesian2(x, y). Cartesian2 is often used to describe the screen coordinate system, such as the mouse click position on the computer screen. The return is Cartesian2, which returns the XY pixel component of the mouse click position.

Coordinate transformation

The transformation of latitude and longitude and radians

varRadians =Cesium.Math. ToRadians (degrees);// Longitude and latitude to radians
varDegrees =Cesium.Math. ToDegrees (radians);// Radians turn longitude and latitude
Copy the code

WGS84 latitude and Longitude coordinates and WGS84 Radian coordinates (`Cartographic`) the transformation of the

// Method 1:
var longitude = Cesium.Math.toRadians(longitude1); Longitude1 is longitude1
var latitude= Cesium.Math.toRadians(latitude1); // Where latitude1 is the Angle
var cartographic = newCesium. Cartographic (longitude, latitude, height);// Method 2:
var cartographic= Cesium.Cartographic.fromDegrees(longitude, latitude, height);// The Angle is longitude and latitude

// Method 3:
var cartographic= Cesium.Cartographic.fromRadians(longitude, latitude, height);// Where longitude and latitude are radians
Copy the code

WGS84 coordinates and Cartesian space Cartesian coordinates (`Cartesian3`) the transformation of the

varThe position = Cesium. Cartesian3. FromDegrees (longitude, latitude, height);// The default value of height is 0. Longitude and Latitude are the angles

var positions = Cesium.Cartesian3.fromDegreesArray(coordinates);Coordinates format is an array without height. For example: [-115.0, 37.0, -107.0, 33.0]

var positions = Cesium.Cartesian3.fromDegreesArrayHeights(coordinates);//coordinates format is an array with height. For example: [-115.0, 37.0, 100000.0, -107.0, 33.0, 150000.0]

/ / in the same way, through the radian conversion, usage is the same, specific have Cesium. Cartesian3. FromRadians, Cesium. Cartesian3. FromRadiansArray, Cesium. Cartesian3. FromRadiansArrayHeights method, etc
Copy the code

Cartesian space cartesian coordinate system transformation WGS84

varCartographic = Cesium. Cartographic. FromCartesian (cartesian3);Copy the code

Plane coordinate system (`Cartesian2`) and cartesian space coordinates (`Cartesian3`) the transformation of the

Plane coordinates to cartesian space cartesian coordinates

Note here that the current point (Cartesian2) must be on the sphere, otherwise undefined is returned; The coordinates retrieved through the ScreenSpaceEventHandler callback are all Cartesian2.

Screen Coordinates to Scene coordinates – Gets the coordinates of the tilt shot or model click. The scene coordinates are the coordinates of the terrain, the tilt shot surface, and the model.

Through a viewer. Scene. PickPosition (movement. The position), according to the window coordinates, to pick up the corresponding position from the scene depth buffer, return to the cartesian coordinates.

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
     var position = viewer.scene.pickPosition(movement.position);
     console.log(position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
Copy the code

Note: if the screen coordinates without surface tilt photography, the model, the cartesian coordinate is allowed to obtain, to open terrain depth detection (viewer. Scene. Globe. DepthTestAgainstTerrain = true; // The default is false).

This is the world coordinates of the earth’s surface, including the terrain, not including the model, tilted photographic surface.

Pick (ray, scene), where Ray = Viewer.camera.getPickray (movement.position).

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
     var ray = viewer.camera.getPickRay(movement.position);
     var position = viewer.scene.globe.pick(ray, viewer.scene);
     console.log(position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
Copy the code

Note: After the test, the coordinates obtained here are converted into WGS84, and the height is the terrain elevation value of this point.

Ellipsoid.wgs84 (ellipsoid.WGS84). The ellipsoid.wGS84 (ellipsoid.WGS84) does not include terrain, model, or oblique photographic surfaces.

Through the viewer. The scene. The camera. PickEllipsoid (movement. The position, ellipsoid), can obtain the current click the line of sight with ellipsoid intersect, the coordinates of the ellipsoid is the current use of earth ellipsoid objects: Viewer. Scene. Globe ellipsoid, defaults to ellipsoid. WGS84.

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
     var position = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
     console.log(position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
Copy the code

Note: After the test, the coordinates obtained here are converted to WGS84, and the height is 0(this value should be the surface coordinates minus the elevation of the terrain).

Viewer Configuration items

We successfully generated the 3d sphere in the first article, but those of you who are careful will notice that our Viewer configuration is an empty object. I’ve listed the basic configuration for you to add to your own Viewer configuration as needed

The configuration here corresponds to the hypergraphically encapsulated Viewer, so some of the default configuration may be different from the original Ceiusm default configuration. See this blog for the original configuration items

The name of the	type	The default	describe
clock	`Clock`	`new Clock()`	The clock that controls the current time
selectedImageryProviderViewModel	`ProviderViewModel`		The viewmodel of the current base image layer, if not provided, uses the first available base layer. This value is valid only if options.baseLayerPicker is set to true.
imageryProviderViewModels	Array.`<ProviderViewModel>`	`createDefaultImageryProviderViewModels()`	The ProviderViewModels array can be selected from the BaseLayerPicker. This value is valid only if options.baseLayerPicker is set to true.
selectedTerrainProviderViewModel	`ProviderViewModel`		The viewmodel for the current base topographic layer, if not provided, uses the first available base layer. This value is valid only if options.baseLayerPicker is set to true.
terrainProviderViewModels	Array.`<ProviderViewModel>`	`createDefaultTerrainProviderViewModels()`	The ProviderViewModels array can be selected from the BaseLayerPicker. This value is valid only if options.baseLayerPicker is set to true.
imageryProvider	`ImageryProvider`	`new BingMapsImageryProvider()`	Image provider used. This value is valid only if options.baseLayerPicker is set to false.
terrainProvider	`TerrainProvider`	`new EllipsoidTerrainProvider()`	Terrain provider to use.
skyBox	`SkyBox`		Skybox used to render stars. Default star effect is used if undefined.
skyAtmosphere	`SkyAtmosphere`		Blue sky and halo effects around the edge of the earth, set to false to turn them off.
useDefaultRenderLoop	`Boolean`	`true`	Set this to true if the widget can control the render loop, and false if not.
targetFrameRate	`Number`		The target frame rate when using the default render loop.
showRenderLoopErrors	`Boolean`	`true`	If set to true, when a render loop error occurs, an HTML panel containing the error message is automatically displayed to the user.
automaticallyTrackDataSourceClocks	`Boolean`	`true`	If set to true, the clock Settings for the newly added data source are automatically tracked and updated if the data source’s clock changes. If you need to set the clock separately, set this to false.
contextOptions	`Object`		Context and WebGL create attributes that match the options passed to the Scene. Add hardware anti-aliasing. Msaalevel uses an integer value from 1 to 8. The default is 1. The larger the value, the better the anti-aliasing. OIT,FXAA,HDR need to be turned off first because WebGL2.0 has some flaws.
mapProjection	`MapProjection`	`new GeographicProjection()`	Map projection used in 2d and Columbus view mode.

globe	`Globe`	`new Globe(mapProjection.ellipsoid)`	Earth in the scene, if set to false, will not add sphere objects.
orderIndependentTranslucency	`Boolean`	`true`	If this is set to true and device support is used, semitransparent is used regardless of order.
creditContainer	`Element` \ `String`		Specifies the DOM element or ID that contains the CreditDisplay information. If not specified, credit information is added to the bottom of the widget.
dataSources	`DataSourceCollection`	`new DataSourceCollection()`	Specifies the collection of data sources visualized by the Viewer widget. If this parameter is provided, the instance is owned by the caller, and the instance is not destroyed when the Viewer is destroyed.

terrainExaggeration	`Number`	`1.0`	A scalar used to exaggerate terrain. Please note that setting terrain exaggeration does not change any other data.

shadows	`Boolean`	`false`	Determine if the shadow was cast by the sun.

terrainShadows	`ShadowMode`	`ShadowMode.RECEIVE_ONLY`	Determine if the terrain casts or receives shadows from the sun.

mapMode2D	`MapMode2D`	`MapMode2D.INFINITE_SCROLL`	Determine whether a two-dimensional map is rotatable or can scroll indefinitely in the horizontal direction.

navigation	`Boolean`	`false`	Whether to display the navigation compass control. To display, set this to true when initializing the Viewer.

Add layer (`Adding Imagery`)

图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片

Cesium supports multiple layer formats:

wms
TMS
WMTS
ArcGIS
BingMaps
GoogleEarth
Mapbox
OpenStreetMap

By default, Cesium uses Bing Maps as the default layer. This layer is packaged into the Viewer for demonstration.

Cesium in basic add method for the viewer. The reproduction imageryLayers. AddImageryProvider ()

Let’s try it out by adding the following code to the init() method.

var layer = viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
    url: 'http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'
}));
Copy the code

For Map World WebGL provides a map World image service provider class TiandituImageryProvider, the specific use method can refer to examples and API documents

Camera entity

We have already added the base map we want to the earth, but it is certainly not possible to show the whole earth right into the project (apologies if that is the requirement!). . Therefore, we need to locate the position we need after the earth is generated, which has to talk about Camera.

There are many ways to operate the Camera in Cesium, such as rotate, zoom, pan, and flyTo. CesiumJS has mouse and touch events to handle interactions with the Camrea, as well as apis to manipulate the camera programmatically.

Use the setView function to set the Camera position and orientation. Destination can be Cartesian3 or a Rectangle, orientation can be heading | pitch | roll | direction | up. Course Angle, pitch Angle and roll Angle are defined in radians. The heading Angle is a local northward rotation increasing from a positive Angle to the east. Pitch Angle refers to rotation from the local northeast plane. The positive pitch Angle is above the plane. The negative pitch is below the plane.


 // Initialize the scene location
viewer.scene.camera.setView({
    // Initialize the camera's latitude and longitude.
    destination: new Cesium.Cartesian3.fromDegrees(
      121.54035.38.92146.2000
    ),
    orientation: {
      heading: Cesium.Math.toRadians(0.0),
      pitch: Cesium.Math.toRadians(-25.0), // From the top down, it is -90
      roll: 0,}});Copy the code

The parameters of the flyTo method are basically the same as the setView method. While setView directly positions the view according to the parameter, flyTo literally animates it as it flies toward the anchor point.

Renderings of both:

The complete code

<template>
  <div class="container">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
var viewer, camera;
export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      viewer = new Cesium.Viewer("cesiumContainer"{});var layer = viewer.imageryLayers.addImageryProvider(
        new Cesium.ArcGisMapServerImageryProvider({
          url:
            "http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer",}));// Initialize the scene location
      viewer.scene.camera.flyTo({
        // Initialize the camera longitude and latitude
        destination: new Cesium.Cartesian3.fromDegrees(
          121.54035.38.92146.2000
        ),
        orientation: {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-25.0), // From the top down, it is -90
          roll: 0,}}); ,}}};</script>

<style lang="scss" scoped>
</style>
Copy the code

The last

Originally, I wanted to add points, lines and planes in this article, because the plan is not as fast as change, so this article will only talk about the coordinate system, Viewer and Camera related things. In the next article, I will add the point, line and plane elements. Headache ha ha ha. Finally, thanks to those who have read, liked and commented my last article. After writing an article and getting feedback, it really makes me more motivated to create!

The appendix

【 3D GIS Visualization 】 Smart City Based on Vue+Cesium+Supermap

[3D GIS Visualization] Smart City Based on Vue+Cesium+Supermap

【 3D GIS Visualization 】 Smart City Based on Vue+Cesium+Supermap

[3D GIS Visualization] Smart City Based on Vue+Cesium+Supermap (ii)

preface

The map element

elements

Coordinate system

Common coordinate system

Coordinates in the Cesium

WGS84 coordinate system

Cartesian space rectangular coordinates (Cartesian3)

Plane coordinate system (Cartesian2)

Coordinate transformation

The transformation of latitude and longitude and radians

WGS84 latitude and Longitude coordinates and WGS84 Radian coordinates (Cartographic) the transformation of the

WGS84 coordinates and Cartesian space Cartesian coordinates (Cartesian3) the transformation of the

Cartesian space cartesian coordinate system transformation WGS84

Plane coordinate system (Cartesian2) and cartesian space coordinates (Cartesian3) the transformation of the

Viewer Configuration items

Add layer (Adding Imagery)