2d scale implementation for Legend?

Venkat_Gowtham_Kumar · May 22, 2015, 5:03am

Hi Kevin,
Need your help in showing location bar for 2D map view. For 3D and 2.5D it's working fine. Could you please tell me what changes I need to make it work for 2D (showing lat,long and elevation)?

Kevin_Ring · May 22, 2015, 5:06am

Hi,

I wouldn’t expect it to be any different from 2.5D, really. What’s going wrong?

Kevin

Venkat_Gowtham_Kumar · May 22, 2015, 5:22am

Hi Kevin,
pickTriangle is coming as undefined in locationbarviewmodel.js for 2D.

Thanks,

Ming-Che_Liu · September 23, 2015, 8:43am

Hi,

Which Cesium API should I use if the scale indicator can be recalculated instantly when the attitude of camera changed?

Hyper Sonic於 2015年5月2日星期六 UTC+8下午5時56分40秒寫道：

Ming-Che_Liu · September 23, 2015, 9:34am

Hi Gowtham,

My requests is similar to yours. Could you provide your source code for my reference? Looking forward your response~

gowtham.m...@gmail.com於 2015年5月22日星期五 UTC+8下午1時22分22秒寫道：

tzgardner · July 22, 2020, 1:44pm

These links do not work. Do you have the code snippets to implement this?

Kevin_Ring · July 23, 2020, 1:52am

The code linked above can still be found here:

github.com

TerriaJS/terriajs/blob/oldui/lib/ViewModels/DistanceLegendViewModel.js#L122


    viewModel.distanceLabel = undefined;
    return;
}

var leftCartographic = globe.ellipsoid.cartesianToCartographic(leftPosition);
var rightCartographic = globe.ellipsoid.cartesianToCartographic(rightPosition);

geodesic.setEndPoints(leftCartographic, rightCartographic);
var pixelDistance = geodesic.surfaceDistance;

// Find the first distance that makes the scale bar less than 100 pixels.
var maxBarWidth = 100;
var distance;
for (var i = distances.length - 1; !defined(distance) && i >= 0; --i) {
    if (distances[i] / pixelDistance < maxBarWidth) {
        distance = distances[i];
    }
}

if (defined(distance)) {
    var label;

The latest incarnation of this code (based on React now) is here:

github.com

TerriaJS/terriajs/blob/next/lib/ReactViews/Map/Legend/DistanceLegend.jsx

"use strict";
import React from "react";
import PropTypes from "prop-types";
import L from "leaflet";
import Cartesian2 from "terriajs-cesium/Source/Core/Cartesian2";
import defined from "terriajs-cesium/Source/Core/defined";
import EllipsoidGeodesic from "terriajs-cesium/Source/Core/EllipsoidGeodesic";
import getTimestamp from "terriajs-cesium/Source/Core/getTimestamp";
import Styles from "./legend.scss";
import { observer, disposeOnUnmount } from "mobx-react";
import { autorun } from "mobx";

const geodesic = new EllipsoidGeodesic();

const distances = [
  1,
  2,
  3,
  5,
  10,

This file has been truncated. show original

tzgardner · July 23, 2020, 3:53pm

I’m using the Open source version of CesiumJS. I’ve been using the viewer capabilities to run a script to show data on the world map. I’ve done very little development so I would consider myself a beginner when it comes to this environment. So, I may need some guidance on how to use the DistanceLegendViewModel.js and how to run this on the html viewer.

My project is very small with only 1 js file and 1 html file. To implement the Distance scale, I was imagining maybe a function or 2 in js file and a few lines in the html file to add it to the viewer. I wasn’t expecting as much code as you provided. I’m also not familiar with the jsx file format.

Is there any way you can “dumb it down” for someone learning this environment? lol

Thanks