地图API_卫星地图_离线地图_地图可视化_离线地图二次开发

运行重置
            <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href='http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet' />
    <script src='http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #container {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
</style>

<body>
    <div id="container"></div>
    <div id="loadingOverlay">
        <h1>Loading...</h1>
    </div>
</body>
<script>

    bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
    var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.dc-tian-w-satellite' });

    var pinBuilder = new bmgl.PinBuilder();

    var bluePin = viewer.entities.add({
        name: "点击摄像,固定视角",
        position: bmgl.Cartesian3.fromDegrees(-75.170726, 39.9208667),
        billboard: {
            image: pinBuilder.fromColor(bmgl.Color.ROYALBLUE, 48).toDataURL(),
            verticalOrigin: bmgl.VerticalOrigin.BOTTOM,
        },
    });

    var questionPin = viewer.entities.add({
        name: "点击摄像,固定视角",
        position: bmgl.Cartesian3.fromDegrees(-75.1698529, 39.9220071),
        billboard: {
            image: pinBuilder.fromText("?", bmgl.Color.BLACK, 48).toDataURL(),
            verticalOrigin: bmgl.VerticalOrigin.BOTTOM,
        },
    });

    var url = bmgl.buildModuleUrl("http://www.bigemap.com/templates/img/view.png");
    var groceryPin = bmgl.when(
        pinBuilder.fromUrl(url, bmgl.Color.GREEN, 48),
        function (canvas) {
            return viewer.entities.add({
                name: "点击摄像,固定视角",
                position: bmgl.Cartesian3.fromDegrees(-75.1705217, 39.921786),
                billboard: {
                    image: canvas.toDataURL(),
                    verticalOrigin: bmgl.VerticalOrigin.BOTTOM,
                },
            });
        }
    );

    //Create a red pin representing a hospital from the maki icon set.
    var hospitalPin = bmgl.when(
        pinBuilder.fromMakiIconId("hospital", bmgl.Color.RED, 48),
        function (canvas) {
            return viewer.entities.add({
                name: "点击摄像,固定视角",
                position: bmgl.Cartesian3.fromDegrees(-75.1698606, 39.9211275),
                billboard: {
                    image: canvas.toDataURL(),
                    verticalOrigin: bmgl.VerticalOrigin.BOTTOM,
                },
            });
        }
    );

    //Since some of the pins are created asynchronously, wait for them all to load before zooming/
    bmgl.when.all(
        [bluePin, questionPin, groceryPin, hospitalPin],
        function (pins) {
            viewer.flyTo(pins);
        }
    );
</script>

</html>