MOE is a front direction brick loader. As a purely GIS small white, if this article has GIS related concepts or proper terms of error, welcome to comment section, will be the first time to change.

preface

Cesium, a world-class open source library, was the first thing that came to my mind when I was recently assigned to research and develop the technical route for 3D visualization and smart city. However, my business may have many functions related to spatial and geographic analysis, so I found hypergraphs. Hypergraph has 3D products 3D-WebGL package based on Cesium packaging and secondary packaging (download address at the end of the document). With everything set, let’s take a quick look at what the Cesium is all about.

Cesium

What is the Cesium

Cesium is a cross-platform, cross-browser JavaScript library for displaying 3d earth and maps. Cesium uses WebGL for hardware-accelerated graphics, which does not require any plug-in support, but does require the browser to support WebGL. It provides a Javascript based development kit that allows us to build a 3D project efficiently and quickly.

What can the Cesium do

  • Support 2D, 2.5D,3D map display
  • Can draw a variety of geometric graphics, highlighted areas, support to import pictures, and even 3D models and other data visualization display.
  • Can be used for dynamic data visualization and provide good touch support, support most browsers and mobile.
  • Cesium also supports dynamic data presentation based on a timeline.

How do you use the Cesium

In the following code I use a hypergraph based on the Cesium secondary package, so here is a brief description of how to use the most basic Cesium.

Copy the Build folder from the Cesium source code to our project. Then statically import the relevant files into the project.

  <link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css">
  <script src="./Build/Cesium/Cesium.js"></script>
Copy the code

Post and run, and the familiar HelloWorld and Earth appear.

The complete code


<! DOCTYPEhtml>
<html lang="en">
<head>
  <! -- Use correct character set. -->
  <meta charset="utf-8">
  <! -- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <! -- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <script src=".. /Build/Cesium/Cesium.js"></script>
  <style>
      @importurl(.. /Build/Cesium/Widgets/widgets.css);html.body.#cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjA2ZDQ2ZS02NTA4LTQ2NTItODE1My1kZjE3MjBkMjFkNzAiLCJpZCI6NDM5NCwic2NvcG VzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MDcyNzI4Nn0.L7P8pJponZfYjdsGnEw2hIHd2AN0h-SuYl6XvzOwLeA';
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>
Copy the code

Project structures,

We choose Vue as the development framework, so I won’t do much to introduce the Vue project. If you can meet at the gold mine, it proves that you are all excellent front-end (touch fish touch). If you can’t, just check XDM.

Introduction of WebGL package

Since this package is based on the secondary development of Cesium, we can introduce it in the same way as Cesium. We just need to put the Build/Cesium folder in our public/static folder and introduce it statically in our index.html.

Widgets. CSS contains Ceisum’s visual controls

<link rel="stylesheet" href="static/Cesium/Widgets/widgets.css">
Copy the code

Cesium. Js defines the Cesium object, which includes the things we need

<script src="static/Cesium/Cesium.js"></script>
Copy the code

Classic HelloWorld

Like many map apis, Cesium requires a div to be the only container for the 3D scene and generates the corresponding Viewer instance when the page is initialized.

Emphasis on! Emphasis on! Emphasis on!

It’s so important that it should be repeated for three times. All variables about Cesium please! Must have! Do not maintain in data! Because Vue will data hijack the state in data, objects will recursively data hijack to listen for state changes. The Cesium instance, on the other hand, has a lot of attributes and is very hierarchical, and if you mount it on data. Unsurprisingly, your browser will crash.

If communication is needed, the easiest way is to mount the window object.

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"{}); ,}}};</script>

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

Start the project, and you can see the image below.

The last

In this article we just implemented the most basic 3d scene into our project. In the next article we will briefly introduce the basic concept of maps and try to map elements such as points, lines and planes to our earth. And then gradually enrich our functions in it.

The appendix

Cesium related website

  • Cesium.com/docs/ Cesium document
  • Cesium.com/docs/cesium… Cesium API
  • Sandcastle.cesium.com/cesium sandbox example (many effects can be found here)

Hypergraph related url

  • Support.supermap.com.cn:8090/webgl/web/d… Hypergraph WebGL product pack download

  • Support.supermap.com.cn:8090/webgl/examp… Hypergraph 3 dimensional example

  • Support.supermap.com.cn:8090/webgl/web/a… Hypergraph and Cesium related API properties document (more convenient for me)

series

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

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

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