WebGL Earth 三维地球

最新推荐文章于 2024-08-12 09:05:41 发布

zkcharge

最新推荐文章于 2024-08-12 09:05:41 发布

阅读量3.7k

点赞数

分类专栏： WebGL

本文链接：https://blog.csdn.net/zkcharge/article/details/17417345

版权

WebGL 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WebGL Earth</title>
    <!-- <script src="js/api.js"></script>-->
    <script src="http://www.webglearth.com/api.js"></script>
    <script>
        加载默认地图
        //function initialize() {
        //    var options = { zoom: 3.0, position: [47.19537, 8.524404] };
        //    var earth = new WebGLEarth('earth_div', options);
        //}
        加载自定义地图 其实是一张图片 无法缩放
        //function initialize() {
        //    var earth = new WebGLEarth('earth_div', { zoom: 2, proxyHost: 'http://data.webglearth.com/cgi-bin/corsproxy.fcgi?url=' });
        //    var customTMS = earth.initMap(WebGLEarth.Maps.CUSTOM, ['TMS', 'http://data.webglearth.com/natural-earth-color/{z}/{x}/{y}.jpg', 1, 5, 256, true]);
        //     name, url, minZoom, maxZoom, tileSize, flip-y-axis
        //    earth.setBaseMap(customTMS);
        //}

        var markerinfo;
        var markerflag = false;

        function initialize() {
            var earth = new WebGLEarth('earth_div', { zoom: 2, proxyHost: 'http://data.webglearth.com/cgi-bin/corsproxy.fcgi?url=' });
            var customTMS = earth.initMap(WebGLEarth.Maps.CUSTOM, ['TMS', 'http://data.webglearth.com/natural-earth-color/{z}/{x}/{y}.jpg', 1, 5, 256, true]);
            // name, url, minZoom, maxZoom, tileSize, flip-y-axis<img src="images/earth_surface_2048.jpg" />
            earth.setBaseMap(customTMS);
            var marker = earth.initMarker(35, 114, 'images/pin_up.png', 30, 30);
            marker.on('click', showInfo);

            markerinfo = earth.initMarker(36, 114, 'images/pin_up.png', 30, 30);
            markerinfo.bindPopup('hello world==========================HHHHH').openPopup();

            markerinfo.on('click', showInfowindow);

        }
        var showInfo = function (e) {
            alert('You clicked at ' + e.latitude + ',' + e.longitude);
            alert('Relative coords: ' + e.offsetX + ',' + e.offsetY);
        }
        var showInfowindow = function (e) {
            if (markerflag == true) {
                markerinfo.openPopup();
                markerflag = false;
            }
            else {
                markerinfo.closePopup();
                markerflag = true;
            }
        }



    </script>
    <style>
        html, body, #earth_div
        {
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>
</head>
<body οnlοad="initialize()">
    <div id="earth_div" style="width: 100%; border: 1px solid gray; padding: 2px;"></div>
</body>
</html>