This is the 7th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

preface

Previous articles in this series:

  1. 【 VUe-Cesium 】 3d map development using Cesium on VUE (part 1)
  2. 【 VUe-Cesium 】 3d map development using Cesium on VUE (part 2)
  3. 【 VUe-cesium 】 3d map development using Cesium on VUE (ii) Continued
  4. 【 VUe-Cesium 】 3d map development using Cesium on VUE (3)

Common webGIS functions are shown as follows:

Today we’re going to talk about map loading

Map load

The effect is as follows:

Began to explain

Earlier, we said that looking at the documentation on the official website, the map instance was created like this, as shown below:

But cesium Viewer method, it is possible to set a lot of parameters, let’s open cesium API document to see

Cesium official documentation, a lot of stuff

Let’s start with the Viewer method

Point in

Because the English version seems to need translation, there is some trouble. Previously, in the “Vue-cesium” series, the reference part of using CESium to develop 3D map on VUE (ii) mentioned that there is a Chinese version of cesium, which looks more intuitive. The next part is about API. I will use the API documentation on Cesium Chinese website

Isn’t that much friendlier

Click on the above the Viewer. ConstructorOptions configuration items

Do you have the instant sensation of seeing JavaAPI documentation? Yes, hahaha

It’s boring and boring to talk to you directly about the API documentation.

Projective learning

So, instead, I’m going to do it the way I did it, and I’m just going to look up the stuff in the document. This is what I call project-based learning, where I start with an effect picture and work towards it, with a goal in mind.

start

In my actual development, all is the opening of an expanded map, the screen is a map, nothing else, so in the last article [VUe-cesium] in vue using CESium 3d map development (2), finally successfully loaded out of the map, we need to change, as shown below:

I started making changes, and after some manipulation, I now have only Earth left on the page (Earth: I’m nice, now I’m the only one left).

Paste code, are annotated, rest assured to eat

cesiumMap.vue

<template>
  ...
</template>
<script>
export default{...methods: {
    init(){...const viewer = new Cesium.Viewer("cesiumContainer", {
        baseLayerPicker: false.// If set to false, the top right layer button will not be created.
        geocoder: false.// If set to false, the query (magnifying glass) button in the upper right corner will not be created.
        navigationHelpButton: false.// If set to false, the help (question mark) button in the upper right corner is not created.
        homeButton: false.// If set to false, the home (house) button in the upper right corner will not be created.
        sceneModePicker: false.// If set to false, the projection control will not be created (to display the 2D / 3D toggle button).
        animation: false.// If set to false, the lower-left animated widget will not be created.
        timeline: false.// If set to false, the bottom timeline widget will not be created.
        fullscreenButton: false.// If set to false, the lower-right full-screen button will not be created.
        scene3DOnly: true.// When true, each geometry instance will be rendered only in 3D to save GPU memory.
        shouldAnimate: false.// Defaults to true, otherwise false. This option takes precedence over setting Viewer# clockViewModel.
        // ps. view # clockViewModel is the clockViewModel used to control the current time. Instead of using a clock, we'll set shouldAnimate to false
        infoBox: false.// Whether to display the information displayed after clicking the element
        sceneMode: 3.// initial SceneMode 1 2D mode 2 2D loop mode 3 3D mode Cesium.SceneMode
        requestRenderMode: false.// Enable request render mode, no need to render, save resources
        fullscreenElement: document.body, // The HTML elements rendered in full screen are not available at the moment, although I have turned off the full screen button, pressing F11 will still bring the browser to full screen}); . }},mounted() {
    this.init(); }};</script>
<style scoped lang="scss">.</style>
Copy the code

Dealing with small white space

And then we see that there’s a scroll bar on the right side of the page, and at the bottom of the page, there’s a long white space, so let’s do that

Make the following changes in the CSS you wrote last time

And in app.vue, remove both the inside and outside borders

That’s better

Setting the map source

Next, let’s set up the map service for the map. I’m using Autonavi image here

  • Autonavi Image Terrain Map:
https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}
Copy the code
  • Autonavi Image Annotation Map:
http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8
Copy the code

Since we have turned off the default layer toggle button, we need to equip it with this map source

We configure the map is the source of the call this method Cesium. UrlTemplateImageryProvider

positioning

It is not over yet. We need to make the map be positioned to a location as soon as it is loaded. Here, I take Zhangjiagang as an example, and my normal process should be as follows:

  1. Page one loading
  2. This is the Map of Autonavi, with maps and labels
  3. The map goes straight to Zhangjiagang

The location operation starts with setting a region as the initial location. The method to determine the region is BoundingSphere

And then I want to go to this initial location, new Cesium.Camera. FlyTo

Post code

cesiumMap.vue

<template>
  ...
</template>
<script>
export default{...methods: {
    init(){...const viewer = new Cesium.Viewer("cesiumContainer", {...// I use autonavi image terrain map
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",})});// Add the Autonavi image annotation map
      viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",}));/ / set the initial position Cesium. Cartesian3. FromDegrees (longitude, latitude, height, ellipsoid, the result)
      const boundingSphere = new Cesium.BoundingSphere(
        Cesium.Cartesian3.fromDegrees(120.55538.31.87532.100),
        15000
      );
      // Locate to the initial position
      viewer.camera.flyToBoundingSphere(boundingSphere, {
        // The transition time to the initial position, set to 0, there is no transition, similar to a cut scene animation length
        duration: 0}); . }},mounted() {
    this.init(); }};</script>
<style scoped lang="scss">.</style>
Copy the code

Effect of a

To optimize the

Because this created instance viewer is only in the init method, and we’re going to use it a lot, we’re going to promote this viewer object into data

After the ascension

Complete code:

<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>
export default {
  name: "cesiumMap".data() {
    return {
      viewer: undefined}; },methods: {
    init() {
      const Cesium = this.cesium;
      // Add a token to the token
      Cesium.Ion.defaultAccessToken = "your_access_token";
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        baseLayerPicker: false.// If set to false, the top right layer button will not be created.
        geocoder: false.// If set to false, the query (magnifying glass) button in the upper right corner will not be created.
        navigationHelpButton: false.// If set to false, the help (question mark) button in the upper right corner is not created.
        homeButton: false.// If set to false, the home (house) button in the upper right corner will not be created.
        sceneModePicker: false.// If set to false, the projection control will not be created (to display the 2D / 3D toggle button).
        animation: false.// If set to false, the lower-left animated widget will not be created.
        timeline: false.// If set to false, the bottom timeline widget will not be created.
        fullscreenButton: false.// If set to false, the lower-right full-screen button will not be created.
        scene3DOnly: true.// When true, each geometry instance will be rendered only in 3D to save GPU memory.
        shouldAnimate: false.// Defaults to true, otherwise false. This option takes precedence over setting Viewer# clockViewModel.
        // ps. view # clockViewModel is the clockViewModel used to control the current time. Instead of using a clock, we'll set shouldAnimate to false
        infoBox: false.// Whether to display the information displayed after clicking the element
        sceneMode: 3.// initial SceneMode 1 2D mode 2 2D loop mode 3 3D mode Cesium.SceneMode
        requestRenderMode: false.// Enable request render mode, no need to render, save resources
        fullscreenElement: document.body, // The HTML elements rendered in full screen are not available at the moment, although I have turned off the full screen button, pressing F11 will still bring the browser to full screen
        // I use autonavi image terrain map
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",})});// Add the Autonavi image annotation map
      this.viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",}));/ / set the initial position Cesium. Cartesian3. FromDegrees (longitude, latitude, height, ellipsoid, the result)
      const boundingSphere = new Cesium.BoundingSphere(
        Cesium.Cartesian3.fromDegrees(120.55538.31.87532.100),
        15000
      );
      // Locate to the initial position
      this.viewer.camera.flyToBoundingSphere(boundingSphere, {
        // Animation, the transition time to the initial position, set to 0, no animation
        duration: 0});this.viewer._cesiumWidget._creditContainer.style.display = "none"; // Hide copyright}},mounted() {
    this.init(); }};</script>
<style scoped lang="scss">
#cesiumContainer {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
}
</style>
Copy the code

Now that you’ve seen this, please give me a thumbs up before you go, because your thumbs up means a lot to me