mirror of
https://github.com/NASAWorldWind/WebWorldWind.git
synced 2025-12-08 19:46:18 +00:00
178 lines
8.2 KiB
JavaScript
178 lines
8.2 KiB
JavaScript
/*
|
||
* Copyright 2003-2006, 2009, 2017, 2020 United States Government, as represented
|
||
* by the Administrator of the National Aeronautics and Space Administration.
|
||
* All rights reserved.
|
||
*
|
||
* The NASAWorldWind/WebWorldWind platform is licensed under the Apache License,
|
||
* Version 2.0 (the "License"); you may not use this file except in compliance
|
||
* with the License. You may obtain a copy of the License
|
||
* at http://www.apache.org/licenses/LICENSE-2.0
|
||
*
|
||
* Unless required by applicable law or agreed to in writing, software distributed
|
||
* under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
|
||
* CONDITIONS OF ANY KIND, either express or implied. See the License for the
|
||
* specific language governing permissions and limitations under the License.
|
||
*
|
||
* NASAWorldWind/WebWorldWind also contains the following 3rd party Open Source
|
||
* software:
|
||
*
|
||
* ES6-Promise – under MIT License
|
||
* libtess.js – SGI Free Software License B
|
||
* Proj4 – under MIT License
|
||
* JSZip – under MIT License
|
||
*
|
||
* A complete listing of 3rd Party software notices and licenses included in
|
||
* WebWorldWind can be found in the WebWorldWind 3rd-party notices and licenses
|
||
* PDF found in code directory.
|
||
*/
|
||
/**
|
||
* Illustrates the performance of deep picking with many surface shapes.
|
||
*/
|
||
|
||
requirejs(['../src/WorldWind',
|
||
'../examples/LayerManager'],
|
||
function (ww,
|
||
LayerManager) {
|
||
"use strict";
|
||
|
||
// Tell WorldWind to log only warnings.
|
||
WorldWind.Logger.setLoggingLevel(WorldWind.Logger.LEVEL_WARNING);
|
||
|
||
// Create the WorldWindow.
|
||
var wwd = new WorldWind.WorldWindow("canvasOne");
|
||
|
||
/**
|
||
* Added imagery layers.
|
||
*/
|
||
var layers = [
|
||
{layer: new WorldWind.BMNGLayer(), enabled: true},
|
||
{layer: new WorldWind.BingAerialWithLabelsLayer(null), enabled: true},
|
||
{layer: new WorldWind.CompassLayer(), enabled: true},
|
||
{layer: new WorldWind.CoordinatesDisplayLayer(wwd), enabled: true},
|
||
{layer: new WorldWind.ViewControlsLayer(wwd), enabled: true},
|
||
{layer: new WorldWind.FrameStatisticsLayer(wwd), enabled: true}
|
||
];
|
||
|
||
for (var l = 0; l < layers.length; l++) {
|
||
layers[l].layer.enabled = layers[l].enabled;
|
||
wwd.addLayer(layers[l].layer);
|
||
}
|
||
|
||
// Create a layer to hold the footprints.
|
||
var footprintsLayer = new WorldWind.RenderableLayer("Satellite Image Footprints");
|
||
wwd.addLayer(footprintsLayer);
|
||
|
||
// Tell the WorldWindow that we want deep picking.
|
||
wwd.deepPicking = true;
|
||
|
||
// Start out zoomed to the AOI
|
||
wwd.navigator.lookAtLocation = new WorldWind.Location(44.2, -94.12);
|
||
wwd.navigator.range = 625000;
|
||
|
||
// Satellite image footprints
|
||
var footprints = [];
|
||
footprints.push([44.22596415476343, -95.50406, 44.24783068396879, -94.12976, 43.25939191053712, -94.11133, 43.23826255332707, -95.46323, 44.22596415476343, -95.50406]);
|
||
footprints.push([45.14674718783555, -94.27255, 45.153769755990965, -92.875824, 44.165301274896635, -92.87793, 44.15851530960486, -94.25113, 45.14674718783555, -94.27255]);
|
||
footprints.push([45.12551356202371, -95.54315, 45.148073182871244, -94.1474, 44.15979663371134, -94.12808, 44.137996748196564, -95.500336, 45.12551356202371, -95.54315]);
|
||
footprints.push([43.42648714895223, -92.879425, 43.31125028050336, -92.924225, 43.26442286797419, -92.94232, 43.25815001081029, -94.23251, 44.246545441411556, -94.25299, 44.25335216097235, -92.87775, 43.42648714895223, -92.879425]);
|
||
|
||
var locFootprints = [];
|
||
for (var i = 0; i < footprints.length; i++) {
|
||
var rawFootprint = footprints[i];
|
||
var locFootprint = [];
|
||
for (var j = 0; j < rawFootprint.length; j += 2) {
|
||
locFootprint.push(new WorldWind.Location(rawFootprint[j], rawFootprint[j + 1]));
|
||
}
|
||
locFootprints.push(locFootprint);
|
||
}
|
||
// Create and set attributes for it. The shapes below except the surface polyline use this same attributes
|
||
// object. Real apps typically create new attributes objects for each shape unless they know the attributes
|
||
// can be shared among shapes.
|
||
var attributes = new WorldWind.ShapeAttributes(null);
|
||
attributes.outlineColor = WorldWind.Color.RED;
|
||
attributes.interiorColor = new WorldWind.Color(0.5, 0, 0, 0.25);
|
||
|
||
var highlightAttributes = new WorldWind.ShapeAttributes(attributes);
|
||
highlightAttributes.interiorColor = new WorldWind.Color(0.5, 0.5, 0, 0.25);
|
||
|
||
// Number of footprints for deep picking stress test
|
||
var nTestFootprints = 1000;
|
||
|
||
// Create surface polygons for the satellite image footprints
|
||
var nTestPatterns = nTestFootprints / locFootprints.length;
|
||
for (var t = 0; t < nTestPatterns; t++) {
|
||
for (i = 0; i < locFootprints.length; i++) {
|
||
var footprint = new WorldWind.SurfacePolygon(locFootprints[i], attributes);
|
||
footprint.highlightAttributes = highlightAttributes;
|
||
footprintsLayer.addRenderable(footprint);
|
||
}
|
||
}
|
||
|
||
// Create a layer manager for controlling layer visibility.
|
||
var layerManager = new LayerManager(wwd);
|
||
|
||
var highlightedItems = [];
|
||
|
||
// The common pick-handling function.
|
||
var handlePick = function (o) {
|
||
// The input argument is either an Event or a TapRecognizer. Both have the same properties for determining
|
||
// the mouse or tap location.
|
||
var x = o.clientX,
|
||
y = o.clientY;
|
||
|
||
var redrawRequired = highlightedItems.length > 0; // must redraw if we de-highlight previously picked items
|
||
|
||
// De-highlight any previously highlighted footprints.
|
||
for (var h = 0; h < highlightedItems.length; h++) {
|
||
highlightedItems[h].highlighted = false;
|
||
}
|
||
highlightedItems = [];
|
||
|
||
// Perform the pick. Must first convert from window coordinates to canvas coordinates, which are
|
||
// relative to the upper left corner of the canvas rather than the upper left corner of the page.
|
||
var pickList = wwd.pick(wwd.canvasCoordinates(x, y));
|
||
if (pickList.objects.length > 0) {
|
||
redrawRequired = true;
|
||
}
|
||
|
||
// Highlight the items picked by simply setting their highlight flag to true.
|
||
if (pickList.objects.length > 0) {
|
||
var numShapesPicked = 0;
|
||
for (var p = 0; p < pickList.objects.length; p++) {
|
||
pickList.objects[p].userObject.highlighted = true;
|
||
|
||
// Keep track of highlighted items in order to de-highlight them later.
|
||
highlightedItems.push(pickList.objects[p].userObject);
|
||
|
||
// Detect whether the placemark's label was picked. If so, the "labelPicked" property is true.
|
||
// If instead the user picked the placemark's image, the "labelPicked" property is false.
|
||
// Applications might use this information to determine whether the user wants to edit the label
|
||
// or is merely picking the placemark as a whole.
|
||
if (pickList.objects[p].labelPicked) {
|
||
console.log("Label picked");
|
||
}
|
||
|
||
// Increment the number of items picked if a shape is picked.
|
||
if (!pickList.objects[p].isTerrain) {
|
||
++numShapesPicked;
|
||
}
|
||
}
|
||
|
||
if (numShapesPicked > 0) {
|
||
console.log(numShapesPicked + " shapes picked");
|
||
}
|
||
}
|
||
|
||
// Update the window if we changed anything.
|
||
if (redrawRequired) {
|
||
wwd.redraw(); // redraw to make the highlighting changes take effect on the screen
|
||
}
|
||
};
|
||
|
||
// Listen for mouse moves and highlight the footprints that the cursor rolls over.
|
||
wwd.addEventListener("mousemove", handlePick);
|
||
|
||
// Listen for taps on mobile devices and highlight the footprints that the user taps.
|
||
var tapRecognizer = new WorldWind.TapRecognizer(wwd, handlePick);
|
||
}
|
||
); |