当前位置：网站首页>Cesium uses czml to implement dynamic routes

Cesium uses czml to implement dynamic routes

2022-07-24 19:04:00 【GhostPaints】

Demand scenarios

For example, some scenes in the project are roaming , Display the specified route in an area , An object moves like a vehicle ; Some projects involve patrol routes , The patrol route of multiple personnel is displayed on the map . These demand situations require dynamic routes , In my previous daily problems article, I mentioned this , But it's better to take it out alone .

Reference resources

cesium stay github Inside wiki In detail czml Structure , And the values that can be set for each attribute .

https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/CZML-Structure

When I deal with problems , Also in the csdn I found a blogger's introduction on czml Use . This is the blog link

cesium-CZML Bird model flight trajectory

I was troubled , How to be in czml Object orientation Of velocityReference value ,cesium Of wiki Just say that this value should be string type , But there are no use cases . Then I found the above article . It helped me a lot .

Brief introduction

Personally think that cesium The good thing is , Its presentation dimension is in addition to geographical location , There is also the concept of time and space . In a certain period of time , An area or entity The location of the object shows .

I understand that , Will understand czml, It is used to show label perhaps billboard perhaps model Positional relationship in a certain period of time .czml The file itself is an array , Every sub item in the array is an object , There is a hard requirement that the first object of this array is a declaration object , It's like h5 Of html The first line of the document will state <!DOCTYPE html>.

Start with the second object , Is what will be displayed entity 了 , In the official wiki There's an explanation , I won't repeat it . Just explain the concept and some points for attention .

First of all id, If you need to get these later entity, Then you need to set for each object id value , This id The value will become generated entity Of id. If you use it id repeated , that CzmlDataSource Will think , You are describing the same entity object . If these repeat id The object of , Have the same time period , Then the last one will prevail .

That's why , In some cases , Four or five questions are set, but only one is displayed on the map . I encountered problems when drawing multiple shipping routes in the same time period . Because of czml Inside id repeated .

Basic concepts

And set with code entity Different ,czml Is an array , It means that the data inside is key-value In the form of . Object name , The value may be a string , Numbers , Boolean type or array . When you are not sure what type of value should be set for the attribute you want to use , It's better to go up wiki Look inside .

Use js Code settings entity attribute , These values can be regarded as property. If you use czml To set up , Then these will be regarded as waiting to be packaged Packet.

CzmlDataSource There are many built-in methods to use these values js Method to encapsulate into attributes , such as postion Come on , Its value is array , There will be different ways to judge how to parse . Because this array may be a simple geographical location [x,y,height], It may also include the time attribute [time,x,y,height].

Here is the source code 5110 That's ok -5140 Lines of code

CzmlDataSource._processCzml = function (
  czml,
  entityCollection,
  sourceUri,
  updaterFunctions,
  dataSource
) {
  updaterFunctions = defaultValue(updaterFunctions, CzmlDataSource.updaters);

  if (Array.isArray(czml)) {
    for (let i = 0, len = czml.length; i < len; ++i) {
      processCzmlPacket(
        czml[i],
        entityCollection,
        updaterFunctions,
        sourceUri,
        dataSource
      );
    }
  } else {
    processCzmlPacket(
      czml,
      entityCollection,
      updaterFunctions,
      sourceUri,
      dataSource
    );
  }
};

This updaterFunctions In fact, it is the way of data processing , In the source code , It's actually these . The following code is in the source code 5006 That's ok -5130 That's ok

CzmlDataSource.updaters = [
  processBillboard, //
  processBox, //
  processCorridor, //
  processCylinder, //
  processEllipse, //
  processEllipsoid, //
  processLabel, //
  processModel, //
  processName, //
  processDescription, //
  processPath, //
  processPoint, //
  processPolygon, //
  processPolyline, //
  processPolylineVolume, //
  processProperties, //
  processRectangle, //
  processPosition, //
  processTileset, //
  processViewFrom, //
  processWall, //
  processOrientation, //
  processAvailability,
];

These cover almost all the values that can be set . With process start , The latter is what it deals with .

So now that czml Is treated as an array , The first object should be set according to a specific value . How to identify it in the source code .

function processCzmlPacket(
  packet,
  entityCollection,
  updaterFunctions,
  sourceUri,
  dataSource
) {
  let objectId = packet.id;
  if (!defined(objectId)) {
    objectId = createGuid();
  }

  currentId = objectId;

  if (!defined(dataSource._version) && objectId !== "document") {
    throw new RuntimeError(
      "The first CZML packet is required to be the document object."
    );
  }

  if (packet["delete"] === true) {
    entityCollection.removeById(objectId);
  } else if (objectId === "document") {
    processDocument(packet, dataSource);
  } else {
    const entity = entityCollection.getOrCreateEntity(objectId);

    const parentId = packet.parent;
    if (defined(parentId)) {
      entity.parent = entityCollection.getOrCreateEntity(parentId);
    }

    for (let i = updaterFunctions.length - 1; i > -1; i--) {
      updaterFunctions[i](entity, packet, entityCollection, sourceUri);
    }
  }

  currentId = undefined;
}

The above code deals with czml When you have an array , Method of execution . You can see , Initialize a dataSource When , No version is set version, If your czml The first value of the array has no document object , It's just a mistake . After setting correctly , The first execution will enter processDocument Method inside . It's in the source code 2634 That's ok -2682 That's ok .

function processDocument(packet, dataSource) {
  const version = packet.version;
  if (defined(version)) {
    if (typeof version === "string") {
      const tokens = version.split(".");
      if (tokens.length === 2) {
        if (tokens[0] !== "1") {
          throw new RuntimeError("Cesium only supports CZML version 1.");
        }
        dataSource._version = version;
      }
    }
  }

  if (!defined(dataSource._version)) {
    throw new RuntimeError(
      "CZML version information invalid.  It is expected to be a property on the document object in the <Major>.<Minor> version format."
    );
  }

  const documentPacket = dataSource._documentPacket;

  if (defined(packet.name)) {
    documentPacket.name = packet.name;
  }

  const clockPacket = packet.clock;
  if (defined(clockPacket)) {
    const clock = documentPacket.clock;
    if (!defined(clock)) {
      documentPacket.clock = {
        interval: clockPacket.interval,
        currentTime: clockPacket.currentTime,
        range: clockPacket.range,
        step: clockPacket.step,
        multiplier: clockPacket.multiplier,
      };
    } else {
      clock.interval = defaultValue(clockPacket.interval, clock.interval);
      clock.currentTime = defaultValue(
        clockPacket.currentTime,
        clock.currentTime
      );
      clock.range = defaultValue(clockPacket.range, clock.range);
      clock.step = defaultValue(clockPacket.step, clock.step);
      clock.multiplier = defaultValue(clockPacket.multiplier, clock.multiplier);
    }
  }
}

It's very simple and rude , Direct inspection string type , And check the length ,version Must be 1 start , No matter how many behind you , As long as the string is divided by decimal point , It's OK to separate two values . It's rough . The next step is to set the time clock 了 .

Use caution

If from czml File read , So use... Directly Cesium.CzmlDataSource.load Just the way . But sometimes , According to some check conditions , Or time setting , Want to set one manually czml Array to load . You can consider the following ideas ：

1. Create an array entityArr To store manually created objects , Every sub item in this array is an object .

2. Create a object object , Set up version,clock Time information . Add this object to the array entityArr The head of .

3. Use Cesium.CzmlDataSource.load(entityArr) Method loading , This method returns a promise, So it can be then In the method , Get the generated dataSource And get the corresponding entity To specialize .

A lot of times , This czml In which time period , It is through obtaining judgment , In this case , Then the first object does not need to be generated first , Just add it later . Knowing all entity After the displayed time period , Naturally, you can set clock When does it end .

Cesium.CzmlDataSource.load(....).then(function(datasource) { Processing code });

Like some custom materials , You need to add it manually after loading ,datasource.entities.values There's everything in it czml Array entity, Of course, it can also be set by id Get specific . If you don't give id value , It will generate automatically id, But when you need it, you don't know which one it corresponds to .

Set the time

availability and clock Those strange time strings inside , By official website wiki The explanation of is a kind of Iso8601 Time format .cesium It uses JulianDate, So there are also transformations .

Cesium.JulianDate.toIso8601() Method accepts two parameters , The first parameter is a JulianDate object , The second parameter is a number , Be similar to toFixed Method , Keep several decimal places . Basically, they all pass 0. It returns a string .

Sample code

//  Set the current time as the start time 
const start = Cesium.JulianDate.fromDate(new Date());

// Generate a czml The sub item object of the array 
            const obj = {
                id: `test`,
                availability: `${Cesium.JulianDate.toIso8601(start, 0)}/${Cesium.JulianDate.toIso8601(Cesium.JulianDate.addSeconds(
                    start,
                    6000,
                    new Cesium.JulianDate()
                ), 0)}`,
                path: {
                    width: 8,
                    leadTime: 10,
                    trailTime: 1000,
                    resolution: 5,
                    zIndex: 3,
                },
                model: {
                    gltf: ' Model file path ',
                    minimumPixelSize: 64
                },
                orientation: {
                    interpolationAlgorithm: 'LINEAR',
                    interpolationDegree: 1,
                    epoch: `${Cesium.JulianDate.toIso8601(start, 0)}`,
                    velocityReference: "#position"
                },
                position: {
                    epoch: `${Cesium.JulianDate.toIso8601(start, 0)}`,
                    interpolationDegree: 5,
                    interpolationAlgorithm: 'HERMITE',
                    cartographicDegrees:  An array value 
                }
            };
//  Through some calculations , Know that the time will end at a certain value 
const end =  Values set by code ;
// czml The first object of the array is set 
        let czml = [
            {
                id: "document",
                name: "duangongfenxi",
                version: "1.0",
                clock: {
                    interval: `${Cesium.JulianDate.toIso8601(start, 0)}/${Cesium.JulianDate.toIso8601(end, 0)}`,
                    currentTime: `${Cesium.JulianDate.toIso8601(start, 0)}`,
                    multiplier: 10,
                    range: 'CLAMPED'
                }
            }
        ];

Not recommended czml Of path To make that kind of path with a long span , Because I can wear it . It is not like polyline That has the attribute of being close to the ground , And the two coordinate points are too far away , Setting the interpolator can't solve the problem of penetrating the ground .

If you use czml after , I found that only part of the route can be seen , You can try to set the console to flat mode viewer.scene.model = 2; Two points with a large span , It can't be solved by setting the height alone , Sometimes there are trade-offs .

原网站

版权声明
本文为[GhostPaints]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/203/202207211102486178.html