OpenWebGlobe-开源三维GIS初体验（附源码和演示）

时间  2019-11-12
标签 openwebglobe 开源 三维 gis 体验 源码 演示 繁體版
原文   原文链接

1.OpenWebGlobe简介javascript

OpenWebGlobe是一个高性能的三维引擎。可应用于可视化仿真，游戏，三维GIS，虚拟现实等领域。它使用纯javascript编写，能够运行在任何支持HTML五、WebGL的浏览器上。使用OpenWebGlobe能够快速构建一个属于您本身的三维地球。国内的天地图三维地球使用的就是该开源程序。天地图三维地球地址为http://map.tianditu.com/3d/index3d.html。html

2.OpenWebGlobe的搭建环境java

（1）在Github上下载最新的开源库，https://github.com/OpenWebGlobe/WebViewergit

（2）搭建WebViewergithub

     下载依赖两个Google的库，依次以下closure_library和closure-compiler，这个Closure工具使维护一具巨大的javascript代码库更容易。Closure本质上是扩展了javascript，并引入了其它语言的一些功能，好比 命名空间，类型检查和数据隐藏。此外，它实现这些功能不是发生在运行时的。若是感兴趣能够研究一下。OpenWebGlobe就是基于Closure管理js文件的。这里提供一个OpenWebGlobe编译使用Closure文件地址为：https://github.com/downloads/OpenWebGlobe/WebViewer/external.tar.gz，将文件解压到该external下。如图chrome

    下载Python2.7.x版本并安装，修改scripts/setup.bat文件，将Python的路径修改到与本地安装路径相同。如图canvas

    下载Java JDK1.7.x版本并安装，因为编译时须要调用jar命令，必须在Windows环境变量中指定JAVA_HOME，并在Path中输入Java的bin路径c#

    运行 scripts /compile.bat，建议修改该批处理文件，文本末尾加上 pause，这样报错能够看到。若是有报错信息，通常是你Python版本，必定是2.7，若是错误信息中有Java，保证你的JDK及环境变量和版本正确。跨域

   若是编译正确，compiled 已经生成出了脚本库，以下浏览器

3.第一个OpenWebGlobe例子

     感到不可理解的是官方给出的例子不能运行，OpenWebGlobe的官网可能在维护，他给的资源链接不上，最后参考了这篇博客http://blog.sina.com.cn/s/blog_4c8b1bdd01018dxi.html，搭建了基于天地图的自定义图层。以下

（1）修改全局入口source/core/globerenderer.js 里头部须要添加你建立的自定义图层，咱们在末尾加载了一个叫owg.hhyImageLayer的自定义图层（就像c#中的引用同样，这就是谷歌Closure实现的）以下

goog.provide('owg.GlobeRenderer');
goog.require('goog.debug.Logger');
goog.require('owg.Texture');
goog.require('owg.GlobeCache');
goog.require('owg.MercatorQuadtree');
goog.require('owg.OSMImageLayer');
goog.require('owg.ViewFrustum');
goog.require('owg.i3dImageLayer');
goog.require('owg.owgImageLayer');
goog.require('owg.i3dElevationLayer');
goog.require('owg.owgElevationLayer');
goog.require('owg.GoogleImageLayer');
goog.require('owg.OYMImageLayer');
goog.require('owg.TMSImageLayer');
goog.require('owg.WMSImageLayer');
goog.require('owg.WMTSImageLayer');
goog.require('owg.owgGeometryLayer');
goog.require('owg.owgPointCloudLayer');
goog.require('owg.hhyImageLayer');

 

（2）同时继续在该文件件中添加本身自定义图层类型的逻辑处理

      // OpenStreetMap tile layout
      else if (options["service"] == "osm")
      {
         if (goog.isDef(options["url"]) && options["url"].length>0)
         {
            var imgLayer = new OSMImageLayer();
            if (goog.isDef(options["minlod"]))
            {
               imgLayer.userminlod = options["minlod"];
            }
            if (goog.isDef(options["maxlod"]))
            {
               imgLayer.usermaxlod = options["maxlod"];
            }
            imgLayer.Setup(options["url"]);
            index = this.imagelayerlist.length;
            this.imagelayerlist.push(imgLayer);
            this._UpdateLayers();
         }
      }
      //自定义逻辑处理 ，只须要写下面这段便可
      else if (options["service"] == "hhy") {
            if (goog.isDef(options["url"]) && options["url"].length > 0) {
                var imgLayer = new hhyImageLayer();
                if (goog.isDef(options["minlod"])) {
                    imgLayer.userminlod = options["minlod"];
                }
                if (goog.isDef(options["maxlod"])) {
                    imgLayer.usermaxlod = options["maxlod"];
                }
                imgLayer.Setup(options["url"], options["layer"], options["getTile"]);
                index = this.imagelayerlist.length;
                this.imagelayerlist.push(imgLayer);
                this._UpdateLayers();
          }
      }

在该代码中将自定义须要用到的参数采用options传进去，例如此处，我添加一个getTile做为灵活的图层路径返回处理。就是经过经纬度获取地图切片。

（3）在source/core/layer添加自定义图层类imagelayer_hhy.js，在该js中作图层控制。随便复制一个原有的图层，在原有的imagelayer图层上修改一下，添加getTile处理方法以下

goog.provide('owg.hhyImageLayer');

goog.require('owg.GlobeUtils');
goog.require('owg.ImageLayer');
goog.require('owg.MercatorQuadtree');
goog.require('owg.Texture');

//------------------------------------------------------------------------------
function hhyImageLayer()
{
   this.servers = null;
   this.layer = null;
   this.quadtree = new MercatorQuadtree();
   this.curserver = 0;
 
   //---------------------------------------------------------------------------
   this.Ready = function()
   {
      return true;
   }
   //---------------------------------------------------------------------------
   this.Failed = function()
   {
      return false;
   }
   //---------------------------------------------------------------------------
   this.RequestTile = function (engine, quadcode, layer, cbfReady, cbfFailed, caller) {
       var coords = new Array(4);
       var res = {};
       this.quadtree.QuadKeyToTileCoord(quadcode, res);

       var sFilename = '';
       if (this.getTile) {
           sFilename = this.getTile(res.x, res.y, res.lod, layer);
       } else {

           sFilename = this.servers[this.curserver] + "?T=" +
                      this.layer + "&L=" +
                      res.lod + "&X=" +
                      res.x + "&Y=" +
                      res.y;
       }

       var ImageTexture = new Texture(engine);
       ImageTexture.quadcode = quadcode;   // store quadcode in texture object
       ImageTexture.layer = layer;
       ImageTexture.cbfReady = cbfReady;   // store the ready callback in texture object
       ImageTexture.cbfFailed = cbfFailed; // store the failure callback in texture object
       ImageTexture.caller = caller;
       ImageTexture.loadTexture(sFilename, _cbhhyTileReady, _cbhhyTileFailed, true);


       this.curserver++;
       if (this.curserver >= this.servers.length) {
           this.curserver = 0;
       }

   };
   //---------------------------------------------------------------------------
   this.GetMinLod = function()
   {
      return 0;
   }
  
   //---------------------------------------------------------------------------
   this.GetMaxLod = function()
   {
      return 18;
   }
  
   //---------------------------------------------------------------------------
   this.Contains = function(quadcode)
   {
      if (quadcode.length<19)
      {
         return true;
      } 
      return false;
   }
   //---------------------------------------------------------------------------

   this.Setup = function (serverlist, layer, gettilefn) {
       // Please respect: http://wiki.openstreetmap.org/wiki/Tile_Usage_Policy

       // serverlist:
       //   ["http://a.tile.openstreetmap.org", "http://b.tile.openstreetmap.org", "http://c.tile.openstreetmap.org" ]
       //   or your own tileserver(s).
       //

       this.servers = serverlist;
       this.layer = layer;

       //获取瓦片路径的方法
       this.getTile = gettilefn;

   }
}

hhyImageLayer.prototype = new ImageLayer();

//------------------------------------------------------------------------------

//------------------------------------------------------------------------------
function _cbhhyTileReady(imgTex)
{
   imgTex.cbfReady(imgTex.quadcode, imgTex, imgTex.layer);
   imgTex.cbfReady = null;
   imgTex.cbfFailed = null;
   imgTex.quadcode = null;
   imgTex.caller = null;
   imgTex.layer = null;
}
//--------------------------自定义获取切片的方法----------------------------------------------------
function _cbhhyTileFailed(imgTex)
{
   imgTex.cbfFailed(imgTex.quadcode, imgTex.caller, imgTex.layer);
   imgTex.cbfReady = null;
   imgTex.cbfFailed = null;
   imgTex.quadcode = null;
   imgTex.caller = null;
   imgTex.layer = null;
}
//------------------------------------------------------------------------------
View Code

（4）调用图层编写第一个demo，要将整个文件部署到本地服务器上（我是发布到IIS上的），由于有些资源会出现访问权限问题。

这里咱们调用一下天地图的三维地图影像服务。所有代码以下

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">

<script type="text/javascript" src="../../../external/closure-library/closure/goog/base.js"></script>
<script type="text/javascript" src="../../../compiled/deps.js"></script>
<script type="text/javascript">goog.require('owg.OpenWebGlobe');</script>

<script type="text/javascript">

//------------------------------------------------------------------------------
// called every frame:
function OnRender(context)
{
   ogSetTextColor(context, 0,1,0);
   ogDrawText(context, "www.cnblogs.com/ATtuing", 0, 20);
}
//------------------------------------------------------------------------------

function OnMouseDown(context, button, mx, my)
{
   var scene = ogGetScene(context);
    var world = ogGetWorld(scene);
   
    var result = ogPickGlobe(scene, mx, my);
    /*if (result[0])
    {
        alert("hit: "+ result[1]+ ", " + result[2] + ", " + result[3]);
    }*/
}

function main()
{
    // (1) Specify where artwork is located.
    // This must be a directory and end with "/". It is recommended
    // to have it relative to this html (to prevent cross origin issues).
    ogSetArtworkDirectory("../../../art/");
   
   // (2) create an OpenWebGlobe context using canvas
   // first parameter is canvas-id and second is "fullscreen"
   var ctx = ogCreateContextFromCanvas("canvas", true);
  
   // (3) Create a virtual globe
   var globe = ogCreateGlobe(ctx);
  
   // (4) Add image and an elevation layers
var tdtlayer = {
      url: ['http://t7.tianditu.cn/DataServer'],
      layer: 'img_w',
      service: 'hhy',
      getTile: function (x, y, z) {
          return 'http://t0.tianditu.cn/DataServer?T=img_w&X=' + x + '&y=' + y + '&L=' + z;
      }
  };
ogAddImageLayer(globe, tdtlayer);
   
    //------------ Create a POI with default style -----------------------------------
    var scene = ogGetScene(ctx);
   
    var PoiDefinition =
    {
        text         :     "Hello World! 世界你好",
        position :  [7.66, 46.13, 6000],
        size         :     50
    };
   
    var poi = ogCreatePOI(scene, PoiDefinition);
    //---------------------------------------------------------------------------

   // (5) Set the "Render-Callback" function.
   // The callback function will be called everytime a frame is drawn.
   ogSetRenderFunction(ctx, OnRender);
    ogSetMouseDownFunction(ctx, OnMouseDown);
  
   // (6) Set the background color
   ogSetBackgroundColor(ctx, 0.2,0.2,0.7,1);

}
//------------------------------------------------------------------------------
  
</script>

</head>
<body onload="main()" style="padding:0px; margin:0px; overflow:hidden;">
   <canvas id="canvas"></canvas>         
</body>
</html>
View Code

它添加有平移、缩放，以及视角切换，效果以下：

                                                                      全图

                                                                     赣州斜视

                                                                    故宫

                                                                   人民大会堂 斜视

4.总结

这个OpenWebGlobe是咱们老师让我研究一下的，在研究过程当中也发现文档过于少，例子打不开的问题，但总的来讲OpenWebGlobe是一个很是不错的开源GIS三维js库，之后有时间的话我会多研究一下的。有兴趣的能够查看我附上源码，直接部署个人源码就能够省去第二步的OpenWebGlobe的搭建环境。

期待您的关注…………

源码地址：http://pan.baidu.com/s/1nu7nSI9

在线演示地址：http://sharegis.cn/WebViewer-master/WebViewer-master/source/demos/01_HelloWorld/demo.html（由于跨域显示有点问题，本地部署的话没问题）。

做者：ATtuing

出处：http://www.cnblogs.com/ATtuing

本文版权归做者和博客园共有，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文连接。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程