首页>3S(GIS、GPS、RS)前沿>Open Source GIS>HT for Web整合OpenLayers实现GIS地图应...
回复
« 返回列表
gis
gis
管理员
管理员
  • 注册日期2003-07-16
  • 发帖数15951
  • QQ
  • 铜币25345枚
  • 威望15368点
  • 贡献值0点
  • 银元0个
写私信
  • GIS帝国居民
  • 帝国沙发管家
  • GIS帝国明星
  • GIS帝国铁杆
阅读：2439回复：0

HT for Web整合OpenLayers实现GIS地图应用

楼主#
更多 发布于：2015-05-20 19:27
HT for Web作为逻辑拓扑图形组件自身没有GIS功能，但可以与各种GIS引擎即其客户端组件进行融合，各取所长实现逻辑拓扑和物理拓扑的无缝融合，本章将具体介绍HT
 for Web与开发免费的OpenLayers地图结合应用的关键技术点，该文介绍的结合的原理，其实还可推广到与ArcGIS、百度地图以及GoogleMap等众多GIS地图引擎融合的解决方案。



  1. function init(){                  
  2.    graphView = new ht.graph.GraphView();  
  3.    var view = graphView.getView();                  
  4.  
  5.    map = new OpenLayers.Map("map");  
  6.    var ol_wms = new OpenLayers.Layer.WMS(  
  7.        "OpenLayers WMS",  
  8.        "http://vmap0.tiles.osgeo.org/wms/vmap0",  
  9.        {layers: "basic"}  
  10.    );  
  11.    map.addLayers([ol_wms]);  
  12.    map.addControl(new OpenLayers.Control.LayerSwitcher());  
  13.    map.zoomToMaxExtent();                  
  14.    map.events.fallThrough = true;  
  15.  
  16.    map.zoomToProxy = map.zoomTo;  
  17.    map.zoomTo =  function (zoom,xy){  
  18.        view.style.opacity = 0;  
  19.        map.zoomToProxy(zoom, xy);      
  20.        console.log(zoom);  
  21.    };                  
  22.  
  23.    map.events.register("movestart", this, function() {  
  24.    });  
  25.    map.events.register("move", this, function() {                    
  26.    });  
  27.    map.events.register("moveend", this, function() {  
  28.        view.style.opacity = 1;  
  29.        reset();  
  30.    });                  
  31.  
  32.    graphView.getView().className = 'olScrollable';  
  33.    graphView.setScrollBarVisible(false);  
  34.    graphView.setAutoScrollZone(-1);  
  35.    graphView.handleScroll = function(){};  
  36.    graphView.handlePinch = function(){};      
  37.    graphView.mi(function(e){  
  38.        if(e.kind === 'endMove'){  
  39.            graphView.sm().each(function(data){  
  40.                if(data instanceof ht.Node){  
  41.                   var position = data.getPosition(),  
  42.                       x = position.x + graphView.tx(),  
  43.                       y = position.y + graphView.ty();    
  44.  
  45.                   data.lonLat = map.getLonLatFromPixel(new OpenLayers.Pixel(x, y));                                                                      
  46.                }                              
  47.            });  
  48.        }  
  49.    });  
  50.    graphView.enableToolTip();  
  51.    graphView.getToolTip = function(event){  
  52.        var data = this.getDataAt(event);  
  53.        if(data){  
  54.            return '城市：' + data.s('note') + '  
  55. 经度：' + data.lonLat.lon + '  
  56. 维度：' + data.lonLat.lat;  
  57.        }  
  58.        return null;  
  59.    };  
  60.    graphView.isVisible = function(data){  
  61.        return map.zoom > 1 || this.isSelected(data);  
  62.    };  
  63.    graphView.isNoteVisible = function(data){  
  64.        return map.zoom > 6 || this.isSelected(data);  
  65.    };  
  66.    graphView.getLabel = function(data){  
  67.        return '经度：' + data.lonLat.lon + '\n维度：' + data.lonLat.lat;  
  68.    };  
  69.    graphView.isLabelVisible = function(data){  
  70.        return map.zoom > 7 || this.isSelected(data);  
  71.    };                  
  72.  
  73.    view.addEventListener("ontouchend" in document ? 'touchstart' : 'mousedown', function(e){  
  74.        var data = graphView.getDataAt(e);  
  75.        if(data || e.metaKey || e.ctrlKey){  
  76.            e.stopPropagation();  
  77.        }                        
  78.    }, false);  
  79.    view.style.position = 'absolute';  
  80.    view.style.top = '0';  
  81.    view.style.left = '0';  
  82.    view.style.right = '0';  
  83.    view.style.bottom = '0';                  
  84.    view.style.zIndex = 999;  
  85.    map.viewPortDiv.appendChild(view);  
  86.  
  87.    var color = randomColor();  
  88.    lines = china.split('\n');  
  89.    for(var i=0; i<lines.length; i++) {  
  90.        line = lines.trim();  
  91.        if(line.indexOf('【') === 0){  
  92.            //province = line.substring(1, line.length-1);                  
  93.            color = randomColor();  
  94.        }else{  
  95.            var ss = line.split(' ');  
  96.            if(ss.length === 3){  
  97.                createNode(parseFloat(ss[1].substr(3)), parseFloat(ss[2].substr(3)), ss[0].substr(3), color);                                                        
  98.            }  
  99.        }  
  100.    }                                  
  101. }  
  102.  
  103. function reset(){  
  104.    graphView.tx(0);  
  105.    graphView.ty(0);  
  106.    graphView.dm().each(function(data){                      
  107.        if(data.lonLat){                              
  108.            data.setPosition(map.getPixelFromLonLat(data.lonLat));                            
  109.        }  
  110.    });  
  111.    graphView.validate();  
  112. }  
  113.  
  114. function createNode(lon, lat, name, color){  
  115.    var node = new ht.Node();  
  116.    node.s({  
  117.        'shape': 'circle',  
  118.        'shape.background': color,  
  119.        'note': name,                      
  120.        'label.background': 'rgba(255, 255, 0, 0.5)',                      
  121.        'select.type': 'circle'  
  122.    });  
  123.    node.setSize(10, 10);  
  124.    var lonLat = new OpenLayers.LonLat(lon, lat);  
  125.    lonLat.transform('EPSG:4326', map.getProjectionObject());  
  126.    node.setPosition(map.getPixelFromLonLat(lonLat));  
  127.    node.lonLat = lonLat;  
  128.    graphView.dm().add(node);  
  129.    return node;  
  130. }  
喜欢0 评分0
GIS麦田守望者，期待与您交流。
举报 回复
游客

关于GIS帝国论坛

©2003-2015 phpwind.com 赣ICP备15002320号-1

返回顶部