cesium-1.52 Map Pins.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Create and display map pins.">
    <meta name="cesium-sandcastle-labels" content="Beginner">
    <title>Map Pins</title>

    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
    <script type="text/javascript">
    require.config({
        baseUrl : '../../../Source',
        waitSeconds : 60
    });
    </script>
</head>

<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
    @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
    'use strict';
    //Sandcastle_Begin
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNDhhYmQxOC1mYzMwLTRhYmEtOTI5Ny1iNGExNTQ3ZTZhODkiLCJpZCI6NTQ1NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MzM3Mzc0NH0.RU6ynAZcwQvdfygt_N_j2rb2lpsuyyROzdaLQg0emAg';
    var viewer = new Cesium.Viewer('cesiumContainer', {timeline : false, animation : false});

    var pinBuilder = new Cesium.PinBuilder();

    var bluePin = viewer.entities.add({
        name : '空白蓝销',
        // fromColor(color, size) → Canvas(pin)
        // color   Color  The color of the pin.
        // size        Number The size of the pin, in pixels.
        position : Cesium.Cartesian3.fromDegrees(-75.170726, 39.9208667),
        billboard : {
            image : pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),
            verticalOrigin : Cesium.VerticalOrigin.BOTTOM
        }
    });

    var questionPin = viewer.entities.add({
        name : '问号',
        position : Cesium.Cartesian3.fromDegrees(-75.1698529, 39.9220071),
        billboard : {
            // fromText(text, color, size) → Canvas
            // text     String    The text to be stamped onto the pin.
            // color Color The color of the pin.
            // size     Number    The size of the pin, in pixels.
            image : pinBuilder.fromText('?', Cesium.Color.BLACK, 48).toDataURL(),
            verticalOrigin : Cesium.VerticalOrigin.BOTTOM
        }
    });

    var url = Cesium.buildModuleUrl('Assets/Textures/maki/grocery.png');
    // fromUrl(url, color, size) → Canvas|Promise.<Canvas> Core/PinBuilder.js 61
    // Creates a pin with the specified icon, color, and size.
    // Name     Type              Description
    // url  Resource | String The url of the image to be stamped onto the pin.
    // color Color             The color of the pin.
    // size     Number                The size of the pin, in pixels.
    var groceryPin = Cesium.when(pinBuilder.fromUrl(url, Cesium.Color.GREEN, 48), function(canvas) {
        return viewer.entities.add({
            name : '食品杂货店',
            position : Cesium.Cartesian3.fromDegrees(-75.1705217, 39.921786),
            billboard : {
                image : canvas.toDataURL(),
                verticalOrigin : Cesium.VerticalOrigin.BOTTOM
            }
        });
    });

    // Create a red pin representing a hospital from the maki icon set.
    var hospitalPin = Cesium.when(pinBuilder.fromMakiIconId('hospital', Cesium.Color.RED, 48), function(canvas) {
        return viewer.entities.add({
            name : '医院',
            position : Cesium.Cartesian3.fromDegrees(-75.1698606, 39.9211275),
            billboard : {
                image : canvas.toDataURL(),
                verticalOrigin : Cesium.VerticalOrigin.BOTTOM
            }
        });
    });

    // 由于某些引脚是异步创建的，因此在缩放前等待它们全部加载。
    Cesium.when.all([bluePin, questionPin, groceryPin, hospitalPin], function(pins){
        viewer.zoomTo(pins);
    });

    //Sandcastle_End
    Sandcastle.finishedLoading();
}

if (typeof Cesium !== 'undefined') {
    startup(Cesium);
}
else if (typeof require === 'function') {
    require(['Cesium'], startup);
}
</script>
</body>
</html>
效果如下图：
cesium-1.52 Map Pins.html

猜你喜欢
