1. 程式人生 > >WebGL Earth 三維地球

WebGL Earth 三維地球

<!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 onload="initialize()">
    <div id="earth_div" style="width: 100%; border: 1px solid gray; padding: 2px;"></div>
</body>
</html>


相關推薦

WebGL Earth 地球

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf

工程管理,用網頁就夠了!——Wish3D Earth在線地球強勢上線

施工隊 拍攝 采集 過程 .cn 平板 jpg 分析 部門 大型工程涉及到眾多的施工隊、管理單位和相關部門,相互之間需要傳遞的數據、文件的數量是驚人的,必須建立起有效的信息管理方法,使管理者及時把握工程的信息,全面準確地控制工程施工情況。 現代化的建築工程管理信

WebGL停車場視覺化管理系統 DEMO(thingjs 停車場3D視覺化管理)

隨著社會的發展,城市中的汽車越來越多。車輛集中存放管理的場所被人類提出車輛進出的秩序、車輛存放的安全性、車輛存放管理的有償性等要求。停車場系統應用現代機械電子及通訊科學技術,集控制硬體、軟體於一體。隨著科技的發展,停車場管理系統也日新月異,目前最為專業化的停車場系統為免取卡停車場。 簡易DEMO 

Cesium開源地球離線地圖釋出原始碼示例功能

一、概述 Cesium開源三維地球離線地圖釋出原始碼提供了地圖切換、查詢定位、模型載入、專題圖疊加顯示和測量功能等,旨在為使用者提供一個可以在Cesium快速載入離線地圖或線上地圖的解決方案,並提供技術支援。 除了現有基本功能之外,還可以根據使用者的實際需求免費開發工作量較

基於 Cesium 的Web地球客戶端程式開發框架

MarsGIS for Cesium三維地球框架 是火星科技研發的一個Web三維地圖開發平臺系統,是火星科技團隊成員多年GIS開發和Cesium使用的技術沉澱。基於Cesium和現代Web技術棧全新構建, 集成了領先的開源地相簿、視覺化庫,提供了全新的大資料視覺化、實時流資料

[GitHub開源]基於HTML5實現的輕量級Google Earth地圖引擎,帶你暢遊世界

A WebGL virtual globe and map engine WebGlobe WebGlobe是基於HTML5原生WebGL實現的輕量級Google Earth三維地圖引擎。

基於supermap webgl樓層顯隱控制思路

find 基於 layers cpn fin 多個 var super blog supermap 9D 產品中,可以先獲取到模型的simd值,再調用setOnlyObjsVisible方法控制模型中單個物體的顯示和隱藏。 var smid = "94"; //樓層的s

借助WebGL可視化技術檢索3D動態圖像

WebG 三維可視 大數據可視化平臺是通過三維表現技術來表示復雜的信息,實現對海量數據的立體呈現。可視化技術借助人腦的視覺思維能力,通過挖掘數據之間重要的關聯關系將若幹關聯性的可視化數據進行匯總處理,揭示數據中隱含的規律和發展趨勢,從而提高數據的使用效率。在解決了海量數據分析耗時過長、挖掘深度不夠、數

數字地球雲平臺

大數據三維數字地球雲平臺開放式的設計,雲計算與雲服務技術,擴展非常方便和快捷,整合海量的影像、矢量、地名、高程、三維模型等數據,基於服務器的三維地圖雲平臺,為客戶提供一體化、一站式產品與服務。三維數字地球雲平臺支持影像數據集、高程數據集、矢量數據集、地名數據集、KML數據集等。具體如下: 影像數據:支持Ima

基於WebGL架構的3D視覺化平臺—裝置管理(ThingJS實現裝置管理3D視覺化)

國內高層建築不斷興建,它的特點是高度高、層數多、體量大。面積可達幾萬平方米到幾十萬平方米。這些建築都是一個個龐然大物,高高的聳立在地面上,這是它的外觀,而隨之帶來的內部的建築裝置也是大量的。為了提高裝置利用率,合理地使用能源,加強對建築裝置狀態的監視等,自然地就提出了樓宇自動化控制系統。下面我們將用Thing

基於three.js/WebGL的免費開源場景編輯器ShadowEditor

基於three.js的線上3D場景編輯器,使用mongodb儲存3D模型和場景資料。   原始碼1:https://github.com/tengge1/ShadowEditor 原始碼2:https://gitee.com/tengge1/ShadowEditor 線上演示:https:/

虛擬電子沙盤開發教程第一課 利用WPF建立3d gis數字地球(非axhost方式)

三維虛擬電子沙盤開發教程第一課 利用WPF建立3d gis數字地球(非axhost方式) 下一步新建一個wpf工程。然後引用SDK中的gislib.dll,NewGisBiao.dll如下圖: 下面上程式碼 <Window x:Class="Teach3DGIS.MainWi

電子沙盤開發教程第課 利用WPF建立3d gis數字地球(非axhost方式)

三維電子沙盤開發教程第三課 利用WPF建立3d gis數字地球(非axhost方式) 下面介紹向量圖層的控制顯示:上程式碼 foreach(string key in gis3d.SetFile.Biao.Keys)// gis3d.SetFile.Biao 該物件裡儲存了所有向

互動數字沙盤開發教程第二課 利用WPF建立3d gis數字地球(非axhost方式)

三維互動視覺化數字沙盤開發教程第二課 利用WPF建立3d gis數字地球(非axhost方式) 上一篇實現了一個基本球,在基本球中已經實現了類似google earth的操作,即滑鼠單鍵拖動,滾輪放大,滑鼠中鍵按下左右旋轉、上下拉伸。 多點觸控操作:單指拖動,雙指旋轉和縮放,5指上下拉伸、左

WebGL以渲染的影象作為紋理

一、本節概述: WebGL渲染三維圖形,然後將渲染結果做為紋理貼到另一個三維物體上去。實際上,把渲染結果作為紋理使用,就是動態的生成影象,而不是向伺服器請求載入外部影象。在紋理影象被貼上圖形之前,我們還可以對其做一些額外的處理,比如動態模糊和景深效果。 二、本節知識點: 幀緩衝區

WebGL筆記_繪製流程以及座標變換(一)

WebGL繪製一個模型的步驟: 1、獲取模型的頂點座標 2、圖元裝配(即畫相應的三角形面片) 3、光柵化(生成片元,繪製每個三角片上的畫素點,染色、紋理對映都在此步) 頂點座標處理 現實中最常見的三維模型,都是通過3D建模軟體匯出的檔案,檔案內

數字地球釋出平臺(開源)

轉自 三維數字地球釋出平臺探索--幾款開源軟體介紹 先寫想法: 想做個簡單的地形漫遊,於是考慮在ww直接開發,或找個控制元件形式的開發元件。 最大的期望有: 1. 支援google的sketchup,快速智慧三維建模 2. 設計模式做好點,最好先做成元件形式,然後開發應用

環境: Ubuntu下 Cesiumjs 除錯環境配置 (著名的虛擬地球開源專案)

Cesiumjs 是一個開源三維GIS專案,類似於谷歌地球。 環境配置如下: 1: 安裝 Chrome 瀏覽器,參照: http://blog.csdn.net/zangle260/article/details/39475771 2:安裝 js 相關元件,參照: ht

c#兩種方式呼叫google地球,呼叫COM API以及呼叫GEPLUGIN 與js互動,載入kml檔案,dae檔案。將二高德地圖覆蓋到到谷歌地球表面。

網路上資源很多不全面,自己在開發的時候走了不少彎路,在這裡整理了最全面的google全套開發,COM互動,web端互動。封裝好了各種模組功能。 直接就可以呼叫。 第一種方式:呼叫COMAPI實現呼叫google地球 1、安裝googleearth客戶端。傳送門:https://pan.baidu.com/

webgl(three.js)實現室內定位,樓宇bim、實時定位視覺化解決方案

(寫在前面,談談物聯網展會)上次深圳會展中心舉行物聯網展會,到了展會一看,80%以上的物聯網應用都是在搞RFID,室內定位,我一度懷疑物聯網落地方案的方向侷限性與市場導向,後來多方面瞭解才明白,展會上看到的不能體現目前物聯網最前沿最廣泛的應用,很多大的企業與技術前沿企業沒有參與這樣的展會,一是不屑於參加,二是