WebWorldWind/examples/CustomPlacemark.js
Patrick Hogan 6ebc542db8 Updated.
2017-11-20 14:06:30 -08:00

106 lines
4.4 KiB
JavaScript

/*
* Copyright 2015-2017 WorldWind Contributors
*
* 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.
*/
/**
* Illustrates how to create a placemark with a dynamically created image.
*/
requirejs(['./WorldWindShim',
'./LayerManager'],
function (WorldWind,
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");
// Add imagery layers.
var layers = [
{layer: new WorldWind.BMNGLayer(), enabled: true},
{layer: new WorldWind.BMNGLandsatLayer(), enabled: false},
{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}
];
for (var l = 0; l < layers.length; l++) {
layers[l].layer.enabled = layers[l].enabled;
wwd.addLayer(layers[l].layer);
}
var placemark,
placemarkAttributes = new WorldWind.PlacemarkAttributes(null),
highlightAttributes,
placemarkLayer = new WorldWind.RenderableLayer("Placemarks"),
latitude = 47.684444,
longitude = -121.129722;
// Set up the common placemark attributes.
placemarkAttributes.imageScale = 1;
placemarkAttributes.imageOffset = new WorldWind.Offset(
WorldWind.OFFSET_FRACTION, 0.5,
WorldWind.OFFSET_FRACTION, 0.5);
placemarkAttributes.imageColor = WorldWind.Color.WHITE;
// Create the custom image for the placemark.
var canvas = document.createElement("canvas"),
ctx2d = canvas.getContext("2d"),
size = 64, c = size / 2 - 0.5, innerRadius = 5, outerRadius = 20;
canvas.width = size;
canvas.height = size;
var gradient = ctx2d.createRadialGradient(c, c, innerRadius, c, c, outerRadius);
gradient.addColorStop(0, 'rgb(255, 0, 0)');
gradient.addColorStop(0.5, 'rgb(0, 255, 0)');
gradient.addColorStop(1, 'rgb(255, 0, 0)');
ctx2d.fillStyle = gradient;
ctx2d.arc(c, c, outerRadius, 0, 2 * Math.PI, false);
ctx2d.fill();
// Create the placemark.
placemark = new WorldWind.Placemark(new WorldWind.Position(latitude, longitude, 1e2), false, null);
placemark.altitudeMode = WorldWind.RELATIVE_TO_GROUND;
// Create the placemark attributes for the placemark.
placemarkAttributes = new WorldWind.PlacemarkAttributes(placemarkAttributes);
// Wrap the canvas created above in an ImageSource object to specify it as the placemark image source.
placemarkAttributes.imageSource = new WorldWind.ImageSource(canvas);
placemark.attributes = placemarkAttributes;
// Create the highlight attributes for this placemark. Note that the normal attributes are specified as
// the default highlight attributes so that all properties are identical except the image scale. You could
// instead vary the color, image, or other property to control the highlight representation.
highlightAttributes = new WorldWind.PlacemarkAttributes(placemarkAttributes);
highlightAttributes.imageScale = 1.2;
placemark.highlightAttributes = highlightAttributes;
// Add the placemark to the layer.
placemarkLayer.addRenderable(placemark);
// Add the placemarks layer to the WorldWindow's layer list.
wwd.addLayer(placemarkLayer);
// Create a layer manager for controlling layer visibility.
var layerManger = new LayerManager(wwd);
// Now set up to handle highlighting.
var highlightController = new WorldWind.HighlightController(wwd);
});