NASA世界风图 - 点击自定义地标后打开导航URL新窗口

时间:2018-03-22 16:31:21

标签: jquery html5 knockout.js worldwind webworldwind

请建议我如何使用网络上的世界风图执行以下方案:

点击自定义地标后打开导航网址新窗口

enter image description here

我试图动态注册或添加事件放置工作画布但没有运气。 请参考以下代码。



self.createPlacemark = function(location) {

    var placemark,
        placemarkAttributes = new WorldWind.PlacemarkAttributes(null),
        highlightAttributes,
        placemarkLayer = new WorldWind.RenderableLayer("Placemarks"),
        latitude = location.lat,
        longitude = location.long;

    // 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;

    newA = document.createElement('a');
    newA.setAttribute('href', "http://lochalhost");
    newA.setAttribute('target', '_blank')
    newA.innerHTML = "link text";
    //newA.click();
    newA.addEventListener("click", function() {
        alert('Hello');
    });

    //Create the custom image for the placemark.
    var canvas = document.createElement("canvas"),
        ctx2d = canvas.getContext("2d"),
        size = 40,
        c = size / 2 - 0.5,
        innerRadius = 2,
        outerRadius = 10;

    canvas.width = size;
    canvas.height = size;
    canvas.id = Math.random().toString(36).substring(2);

    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();


    canvas.addEventListener("click", function() {
        window.open("https://www.google.com", "_blank");
    });

    // 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.canvas.appendChild(newA);
    wwd.addLayer(placemarkLayer);
};




https://worldwind.arc.nasa.gov/web/examples/

0 个答案:

没有答案