An overview,

Writing leaflet.js is a bit boring, and the following article will start to introduce the use of Cesium. I’ll start with a brief introduction to Cesium. Js, because I’ve always felt it’s important to understand its definition again to help you figure out what specific things you can do with it.

Cesium is a fast, simple, end-to-end platform for tiling, visualizing, and analyzing 3D geospatial data

The official introduction to Cesium is also very simple. Cesium is a fast, simple, end-to-end platform for tiling, visualizing and analyzing three-dimensional geospatial data. Remember at least a few key pieces of information.

Ii. Development environment construction

Here is only a simple introduction to use my own environment, detailed steps please refer to the leaflet.js system in the first article about environment construction vuE-CLI and Leaflet (1) : show a map.

  1. Nodejs must be installed. Refer to the website

  2. Vue-cli standard tools must be installed. Refer to the website

    npm install -g @vue/cli
Copy the code

  3. Create a VUe-CLI project

    vue create cesium //(your project name)
Copy the code

  4. Install cesium. Js in the project

    npm install cesium --save
Copy the code

For other information about the internal organization of the project please refer to vue-CLI and Leaflet (1) : Show a map.

3. Functional analysis

This article mainly completes the following functions:

  1. Cesium map window successfully loaded
  2. Solve problems encountered when implementing Cesium in VUe-CLI
  3. Remove Cesium’s default loaded controls to create a simple map window

Since these features have little operational logic, they are listed here without further elaboration. But before you can start coding, you have to go to the Cesium website to register for a Token

Four, code,

Once the above preparations are complete, then implement all the function points one by one. Code implementation process can refer to the official tutorial, and often refer to the official API documentation.

1) Cesium map window loaded successfully

Take a look at the official sample code:


      
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cesiumjs.org/releases/1.59/Build/Cesium/Cesium.js"></script>
  <link href="https://cesiumjs.org/releases/1.59/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 700px; height:400px"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4YjA1ZWEzMy02YTgwLTRhNTAtYmQzMy05NzczMTA5MjgyYWIiLCJpZCI6MTA5ODAsInNjb3 BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTc4Mjg0MDR9. 1 tfnayl7pbjqjc3bxnc7j8ugw2k7srrfonllbjjy6em ';
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>
Copy the code

The implementation process is very simple, import cesium. Js and its style file, configure Tokon in the script, and then instantiate a Cesium window object.

So we’re going to use the same idea in our project.

First OF all, I’m putting the cesium mapping and other related methods in the project, map.js

// src\utils\map.js

/ / the introduction of cesium
import Cesium from "cesium/Cesium";
import "cesium/Widgets/widgets.css";

/ / configuration Token
const defaultAccessToken = "Your own token";
Cesium.Ion.defaultAccessToken = defaultAccessToken;

let Viewer; // The window I'm instantiating here is temporary. It may or may not be used later


/** Initialize viewer * @param {string} divId Viewer container ID * @param {object} opts Initialize viewer default configuration */

const initCesium = (divId, opts) = > {
  CESIUM = new Cesium.Viewer(divId, opts);
  return CESIUM;
};

export default {
  Cesium,
  initCesium
};
Copy the code

Then call the initialization method in the View folder home.vue

<template> <div> <div class="home" id="home></div> </div> </template> <script> export default { name: "home", components: {}, data() { return {}; }, mounted() { this.$utils.map.initCesium("home"); }}; </script> <style lang="less" scoped> .home { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #eee; } </style>Copy the code

Then run NPM Run serve.

You will find that the map does not appear as expected, but instead reports an error indicating that cesium. Js was not successfully introduced.

The solution to this problem is to add a configuration in vue.config.js that introduces Cesium

// vue.config.js

const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
const path = require("path");

let cesiumSource = "./node_modules/cesium/Source";
let cesiumWorkers = ".. /Build/Cesium/Workers";

module.exports = {
  publicPath: "".devServer: {},
  configureWebpack: {
    output: {
      sourcePrefix: ""
    },
    amd: {
      toUrlUndefined: true
    },
    resolve: {
      alias: {
        vue$: "vue/dist/vue.esm.js"."@": path.resolve("src"),
        cesium: path.resolve(__dirname, cesiumSource)
      }
    },
    plugins: [
      new CopyWebpackPlugin([
        {
          from: path.join(cesiumSource, cesiumWorkers),
          to: "Workers"}]),new CopyWebpackPlugin([
        {
          from: path.join(cesiumSource, "Assets"),
          to: "Assets"}]),new CopyWebpackPlugin([
        {
          from: path.join(cesiumSource, "Widgets"),
          to: "Widgets"}]),new CopyWebpackPlugin([
        {
          from: path.join(cesiumSource, "ThirdParty/Workers"),
          to: "ThirdParty/Workers"}]),new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify(". /")})],module: {
      unknownContextCritical: $/ / ^. \ /. *.unknownContextCritical: false}}};Copy the code

Once configured, run again successfully.

2) Remove Cesium’s default loaded controls

In many cases, the first step in creating a custom system based on cesium. Js is to remove the default cesium controls. So let’s take a look at what controls are in the default initial interface.

This is where it’s useful to check the official API documentation. It is also important to note that all controls in the image above are configured in the Viewer class. Check the official documentation to find the Viewer class, as follows:

Then modify the default initialization Viewer configuration in our home.vue page:

// src\views\Home.vue <template> <div> <div id="cesium-credit"></div> <div class="home" id="home"></div> </div> </template> <script> export default { name: "home", components: {}, data() { return { map: null, viewerOpts: { animation: false, timeline: false, geocoder: false, fullscreenButton: false, sceneModePicker: false, navigationHelpButton: false, homeButton: false, baseLayerPicker: false, navigationInstructionsInitiallyVisible: false, creditContainer: "cesium-credit" } }; }, mounted() { this.map = this.$utils.map.initCesium("home", this.viewerOpts); }}; </script> <style lang="less" scoped> .home { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #eee; } </style>Copy the code

CreditContainer space is the cesium flag. The configured value is the Id of a container, and I’m just specifying it as a div hidden under the map window.

// src\views\Home.vue

<template>
  <div>
    <div id="cesium-credit"></div>
    <div class="home" id="home"></div>
  </div>
</template>

Copy the code

Run, you get a clean 3D window.

Five, the summary

There is no specific plan for this series of articles. Just write whatever comes to mind.

The code mentioned in the article will then be uploaded to Github for reference.

Then the article mentioned the solution to Cesuim refer to the following article:

Juejin. Cn/post / 684490…

zhuanlan.zhihu.com/p/53638065

In the future, I will refer to this author’s article:

www.cnblogs.com/fuckgiser/p…

Standing on the shoulders of giants. Thank you.