【 VUe-cesium 】 Using CESium on VUE to develop 3d map (five) point loading

This is the 8th 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:

【 VUe-Cesium 】 3d map development using Cesium on VUE (part 1)
【 VUe-Cesium 】 3d map development using Cesium on VUE (part 2)
【 VUe-cesium 】 3d map development using Cesium on VUE (ii) Continued
【 VUe-Cesium 】 3d map development using Cesium on VUE (3)
【 VUe-cesium 】 using CESium on VUE to develop 3d map (four) map loading

Common webGIS functions are shown as follows:

Today we’re going to talk about point loading

Point load

The effect is as follows:

Began to explain

Entities under the first entity, popular, a 3 d map, can put above a few model, for example, put a model house, put a plant model, the houses, factories, and looks to the naked eye, is on the map, you move the mouse regardless of how the Angle of view, see the house, factories, and binding on a map. Houses, factories all move with the map. And this model that we see with our eyes, in Cesium, has a scientific name, which is the entity.

When we talk about point-to-point loading this time, it also belongs to entities, and entities can be two-dimensional or three-dimensional, so let me talk about what’s inside of this entity, and then we’ll talk about two-dimensional and three-dimensional entities.

entities

Let’s first open the Cesium API Chinese document

Search the viewer

CTRL + F for entities, Enter

Point in

To find the

The properties of entities

The next properties we’re going to use can be found here

Add and delete entities

We’re going to add entities to the map. Blind guess is xxxAdd(). We go from the Entity page back to the EntityCollection page and scroll down to find the add and remove methods

Point load

Let’s try loading a point now

Ps: now the properties in the code can be viewed directly in the cesiumAPI documentation, in the image above me, and the properties can be searched

The code is as follows:

<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>
export default {
  name: "cesiumMap".data() {
    return {
      viewer: undefined.pointInfo: [].// Point information
    };
  },
  methods: {
    init(){... },loadPoints() {
      // Test with simulated data
      this.pointInfo = [
        {
          id: "392f7fbb-ae25-4eef-ac43-58fd91148d1f".latitude: "31.87532".longitude: "120.55538".psName: "Limited company 1"}, {id: "0278a88c-b4f4-4d64-9ccb-65831b3fb19d".latitude: "31.991057".longitude: "120.700713".psName: "Limited company 2"}, {id: "248f6853-2ced-4aa6-b679-ea6422a5f3ac".latitude: "31.94181".longitude: "120.51517".psName: "Limited 3"}, {id: "F8DADA95-A438-49E1-B263-63AE3BD7DAC4".latitude: "31.97416".longitude: "120.56132".psName: "Limited 4"}, {id: "9402a911-78c5-466a-9162-d5b04d0e48f0".latitude: "31.91604".longitude: "120.57771".psName: "Limited 5"}, {id: "EB392DD3-6998-437F-8DCB-F805AD4DB340".latitude: "31.88727".longitude: "120.48887".psName: "Limited 6",},];this.addMarker();
    },
    // cesium load point
    addMarker() {
      const Cesium = this.cesium;
      // Clear the last loaded point
      this.viewer.entities.removeAll();
      // foreach loop loading point
      this.pointInfo.forEach((pointObj) = > {
        this.viewer.entities.add({
          name: pointObj.psName,
          code: pointObj.id,
          id: pointObj.id,
          position: Cesium.Cartesian3.fromDegrees(
            pointObj.longitude * 1,
            pointObj.latitude * 1
          ),
          / / points
          point: {
            pixelSize: 5.color: Cesium.Color.RED,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 2,}}); }); }},mounted() {
    this.init();
    this.loadPoints(); }};</script>
<style scoped lang="scss">.</style>

Copy the code

The points are loaded out, but there are a few problems:

1. Point ofThe name of theNo, so no one knows which point name is which point,
1. Point oficonCesium fixed it, namely white dots. In actual projects, the dots will be displayed differently due to different data types

I need to change so

The modified code is as follows:

<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>
export default {
  name: "cesiumMap".data() {
    return {
      viewer: undefined.pointInfo: [].// Point information
    };
  },
  methods: {
    init(){... },loadPoints(){... },// cesium load point
    addMarker() {
      const Cesium = this.cesium;
      // Clear the last loaded point
      this.viewer.entities.removeAll();
      // foreach loop loading point
      this.pointInfo.forEach((pointObj) = >{.../ / points
          // point: {
          // pixelSize: 5,
          // color: Cesium.Color.RED,
          // outlineColor: Cesium.Color.WHITE,
          // outlineWidth: 2,
          // },
          // Text tags
          label: {
            // show: false,
            text: pointObj.psName,  
            font: "12px monospace".style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            fillColor: Cesium.Color.LIME,
            outlineWidth: 4.verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // The vertical direction calculates the position of the label from the bottom
            pixelOffset: new Cesium.Cartesian2(0, -20), / / the offset
          },
          / / icon
          billboard: {
            image: require("@/assets/imgs/point.png"),
            width: 18.height: 24,}}); }); }},mounted() {
    this.init();
    this.loadPoints(); }};</script>
<style scoped lang="scss">.</style>

Copy the code

After modification, the feeling is better, but the icon and the text style are obviously not compatible, we will change the text style again

I did find a way to pass in my custom styles

I’ll change it

That’s it, and the complete code looks like this:

<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>
export default {
  name: "cesiumMap".data() {
    return {
      viewer: undefined.pointInfo: [].// Point information
    };
  },
  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
    },
    loadPoints() {
      // Test with simulated data
      this.pointInfo = [
        {
          id: "392f7fbb-ae25-4eef-ac43-58fd91148d1f".latitude: "31.87532".longitude: "120.55538".psName: "Limited company 1"}, {id: "0278a88c-b4f4-4d64-9ccb-65831b3fb19d".latitude: "31.991057".longitude: "120.700713".psName: "Limited company 2"}, {id: "248f6853-2ced-4aa6-b679-ea6422a5f3ac".latitude: "31.94181".longitude: "120.51517".psName: "Limited 3"}, {id: "F8DADA95-A438-49E1-B263-63AE3BD7DAC4".latitude: "31.97416".longitude: "120.56132".psName: "Limited 4"}, {id: "9402a911-78c5-466a-9162-d5b04d0e48f0".latitude: "31.91604".longitude: "120.57771".psName: "Limited 5"}, {id: "EB392DD3-6998-437F-8DCB-F805AD4DB340".latitude: "31.88727".longitude: "120.48887".psName: "Limited 6",},];this.addMarker();
    },
    // cesium load point
    addMarker() {
      // Customize the label color
      const _textColor = "rgb(11, 255, 244)";
      const Cesium = this.cesium;
      // Clear the last loaded point
      this.viewer.entities.removeAll();
      // foreach loop loading point
      this.pointInfo.forEach((pointObj) = > {
        this.viewer.entities.add({
          name: pointObj.psName,
          code: pointObj.id,
          id: pointObj.id,
          position: Cesium.Cartesian3.fromDegrees(
            pointObj.longitude * 1,
            pointObj.latitude * 1
          ),
          / / points
          // point: {
          // pixelSize: 5,
          // color: Cesium.Color.RED,
          // outlineColor: Cesium.Color.WHITE,
          // outlineWidth: 2,
          // },
          // Text tags
          label: {
            // show: false,
            text: pointObj.psName,
            font: "12px monospace".style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            // fillColor: Cesium.Color.LIME,
            fillColor: Cesium.Color.fromCssColorString(_textColor),
            outlineWidth: 4.verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // The vertical direction calculates the position of the label from the bottom
            pixelOffset: new Cesium.Cartesian2(0, -20), / / the offset
          },
          / / icon
          billboard: {
            image: require("@/assets/imgs/point.png"),
            width: 18.height: 24,}}); }); }},mounted() {
    this.init();
    this.loadPoints(); }};</script>
<style scoped lang="scss">
#cesiumContainer {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
}
</style>

Copy the code

Pseudo · loaded 3D model

Because there is no three-dimensional data in the hand, so there is no three-dimensional model, cesium with its own box model for everyone to load the next look, but its own is quite ugly.

The code is as follows:

<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>
export default {
  name: "cesiumMap".data() {
    return {
      viewer: undefined}; },methods: {
    init(){...// Add entity model
      const blueBox = this.viewer.entities.add({
        name: "Blue box".position: Cesium.Cartesian3.fromDegrees(120.55538.31.87532.100.0),
        box: {
          // new Cesium.Cartesian3(long, width, height)
          dimensions: new Cesium.Cartesian3(40.0.100.0.150.0),
          material: Cesium.Color.BLUE, // Configure the color
          / / material: Cesium. Color. RED. WithAlpha (0.5), / / Color transparency
          // fill: false, // Whether the configuration is full
          // Outline: true, // Configure whether to display the outer border line
          // outlineColor: Cesium.Color.YELLOW, // Configures the outer border lineColor}});this.viewer.zoomTo(this.viewer.entities); // Locate the entity}},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

Many say

There are a lot of things in the cesiumAPI, and I don’t know all of them. I also encountered the function to do, and then to search, will also search some predecessors, the big guy gave the answer.

But what about what I want, and what I want, close to what I want, but not ultimately what I want?

I will use cesium methods, attributes and so on, their own API to check, so that I can speed up the progress of understanding, let me know I find the right, wrong, I will change other, and then check, not a road to black.

The resources

Cesium Demo site, or very valuable reference

【 VUe-cesium 】 Using CESium on VUE to develop 3d map (five) point loading

preface

Point load

Began to explain

entities

Add and delete entities

Point load

Pseudo · loaded 3D model

Many say

The resources

Related Posts

Guangzhou most of the most powerful IT companies are here!

Vue mobile terminal perfect adaptation scheme, take away no thanks

A list of 49 common and easily forgotten CSS styles at work