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

preface

Using Cesium to develop 3D maps on VUE (part 2)

Vue loads cesium code directly, but does not say, why?

Here, explain the vue loading cesium steps, I hope to take you to learn the method, thinking, to think, rather than just copy code, know what it is and don’t know why.

Vue loading cesium steps to write out, more help you in the encounter is not clear, do not know things, you can learn to independent query.

start

See the website

Cesium website

Just see the official website, pure English, for English almost all back to the English teacher for me, feel the Yali mountain big, but we can not translate online, really do not know, we will go to translate.

When it comes to translation, the following comes to mind:

  1. Baidu translation
  2. Google translation
  3. Netease translation
  4. Browser translation widget

And here’s what I do:

  1. localThe nextNetease Translation client, starting from the boot,
  2. The browserThe installationStroke word translation assistant
  3. Sometimes I have to type words by hand to see the translation, directlyBrowser address barTo lose a handfanyi.baidu.comThe page

So three plate axe down, English is not what big problem, admire the wit of me, here, I hope you do not fear English.

We are front-end engineers. We work with javascript on a daily basis. In the following picture, we can see at a glance that this CesiumJS is nine times out of ten what we are looking for.

The phrase “LEARN MORE” translates to “LEARN MORE”

Then, we found that this is the learning document ah, generally see the document, the following basic path, although this is English, but these words, probably still know, let’s start from the first look, Quickstart translation is to start at speed ah,

When you use a front-end UI framework, your first reaction is to go to the front page of the framework to look up the document, right? I’ll put an element UI document front page here just to give you a feel for it

Cesium documents and Element-UI documents are similar in that they both start fast and work their way down. The most direct way to learn something new is to go to the source, the official documentation, which is the most accurate and fastest way.

Of course, if I can’t understand some official documents, I will search them on Baidu and read other people’s blogs and articles in this area to speed up my understanding.

We continue to

Click on the Access Tokens hyperlink directly and you will jump to it. If you log in, you will jump to the login page. If you don’t log in, you will jump to the login page.

Mouse down

Going back to our VUE project, we know that in Vue, some configuration related things are configured in vue.config.js. So the configuration that we see in the above documentation, we need to configure in vue.config.js

As for the configuration in vue.config.js, I will not say more here, because there are too many pits, I do not remember, most of them have been written in the above article, I do not guarantee to write all of them. In a word

Here after my continuous online query, step pit, install related dependence, error, baidu, step pit, finally summed up [VUe-cesium] in VUE cesium development three-dimensional map (two)

Many say

Say more, most people, learning new things, look at the document, go step by step, also can come up a few successful, so don’t be afraid of a problem, there is a problem, then go to check, to ask, to solve the problem, much problem when you touch, and also solve many, your experience will Dally ceng came up, your ability to solve the problem would be up,

I just want to say one more thing

Front-end field, update and iteration is fast, and the early front-end is the era of slash-and-burn, although that era is not as many frameworks as now, the development is not so convenient, but at that time, what new functions are needed, are direct operation of native JS, DOM elements, directly dry.

Now, all kinds of frameworks emerge in endlessly, a lot of things, the underlying all have already help you to encapsulate good, direct call you, as a result, your daily development, met some of the need to customize the function, you get to the Internet to check, found that there may not be on the net, may also have a ready-made, but it’s early days, native js, written directly, directly manipulate dom elements.

But there’s no existing UI framework that you’re using, so you have to learn how to translate those native ones into your own framework.

For example

I use VUE development, there is a dashboard needs me to write a, [VUE custom components] D3.js dynamic dashboard components, I checked online, but the net is native JS out, I can not directly use, then I will transform.

Here’s another example

I use VUE development, groping for three-dimensional map, I see autonavi map inside there are three-dimensional model, [VUE and Autonavi map] loading 3D map, but they are also native JS, H5 implementation, I also want to turn into VUE, then I have to check, to find, to think

Like today’s Leetcode algorithm problems, most of the problem solutions are written by Java, C, C++, Python. JS problem solution is few, we are the main use OF JS development. So what do we do? We have to learn to transform, to transform something else into something of our own.

I hope you can live and learn to use, can change, smooth sailing.

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