3D地球交互地图

原理

采用openglobus
代码

<html>
<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://www.openglobus.org/og.css" type="text/css" />
    <script src="http://www.openglobus.org/og.js"></script>
</head>
<body>
    <div id="globus" style="100%;height:100%"></div>
    <script>

    pointLayer = new og.layer.Vector("points", {
        'groundAlign': true,
        'entities': [{
            'name': 'Blue Marker',
            'lonlat': [8.19, 46.73],
            'billboard': {
                'src': 'marker.png',
                'size': [29, 48],
                'offset': [0, 24]
            }
        }, {
            'name': 'label',
            'lonlat': [8.25, 46.74],
            'label': {
                'text': 'Touch me',
                'size': [35],
                'outlineColor': "rgba(0,0,0,.5)"
            }
        }],
        'async': false
    });

    var osm = new og.layer.XYZ("OpenStreetMap", {
        specular: [0.0003, 0.00012, 0.00001],
        shininess: 20,
        diffuse: [0.89, 0.9, 0.83],
        isBaseLayer: true,
        //https://webst02.is.autonavi.com/appmaptile?style=6&x=107860&y=49585&z=17
        //url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
        url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        visibility: true,
        attribution: 'Data @ OpenStreetMap contributors, ODbL'
    });

    globus = new og.Globus({
        "target": "globus",
        "name": "Earth",
        "terrain": new og.terrainProvider.TerrainProvider("OpenGlobus")
        ,"layers": [osm]
    });

    /**
    var pickingObject = null;
    var startClick = new og.math.Vector2(),
        startPos;

    pointLayer.events.on("mouseenter", function (e) {
        globus.planet.renderer.handler.gl.canvas.style.cursor = "pointer";
    });

    pointLayer.events.on("mouseleave", function (e) {
        globus.planet.renderer.handler.gl.canvas.style.cursor = "default";
    });

    pointLayer.events.on("ldown", function (e) {
        globus.planet.renderer.controls[0].deactivate();

        startClick.set(e.x, e.y);
        pickingObject = e.pickingObject;
        startPos = globus.planet.getPixelFromCartesian(pickingObject.getCartesian());
    });

    pointLayer.events.on("lup", function (e) {
        globus.planet.renderer.controls[0].activate();
        pickingObject = null;
    });

    globus.planet.renderer.events.on("mousemove", function (e) {
        if (pickingObject) {
            var d = og.math.vector2(e.x, e.y).sub(startClick);
            var endPos = startPos.add(d);
            var coords = globus.planet.getCartesianFromPixelTerrain(endPos);
            if (coords) {
                pickingObject.setCartesian3v(coords);
            }
        }
    });
*/
    globus.planet.viewExtentArr([8.08, 46.72, 8.31, 46.75]);

    </script>
</body>
</html>
效果

分析

性能上，CPU一直在用，即使没有交互操作