咖啡伴侣

呆在上海
posts - 163, comments - 156, trackbacks - 0, articles - 2

TWaverSVG 结合 GoogleMap

Posted on 2009-10-30 14:45 oathleo 阅读(1694) 评论(3)  编辑  收藏 所属分类: TWaver
GoogleMap是个相当不错的项目,客户里就有不少采用GoogleMap来做底层拓扑呈现。(免费加好用的东西,没有人不喜欢)
TWaverSVG这个时候可以和GoogleMap结合,完成拓扑的Gis展现功能。

1.申请个GoogleMap的Key(废话)
2.半个小时学习下GoogleMap的基本API

3.写代码:
1)构建html,引入googlemap的js
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg" type="text/javascript">
        
</script>
   引入twaver相关js css
省略......

2)编写js前台逻辑
        var map_canvas = document.createElement('div');
        parentDiv.appendChild(map_canvas);
        map_canvas.style.width 
= parentDiv.style.width;
        map_canvas.style.height 
= parentDiv.style.height;
        map_canvas.style.position 
= 'absolute';
        
        
var map = new GMap2(map_canvas);
        map.addControl(
new GLargeMapControl());
        map.addControl(
new GMapTypeControl());
        map.setCenter(
new GLatLng(51.368.24), 5);

        var box = new TWaver.TDataBox({
            url: 'webgis',
            dataBoxKey: 'google',
            synchronizedRequest: 
true,
            initializeParams: {
                'twaver.response.target': 'network'
            }
        });


        network = new TWaver.TSVGNetwork(box, {
            hasToolBar: 
false,
            isToolbarEnable: 
false,
            isNodeResizable: 
false,
            isShapeEditable: 
false,
            isEnablePopupMenu: 
true,
            isEnableRectangleSelect: 
false,
            useDefaultLoading: 
false,
            isExpandToPanel: 
false,
            ieSVGSrcUrl: 'demos
/webgis/svgloading.svg',
            htmlParent: svgDiv,
            prepareCustomPopupMenu: 
function(evt, _currentElement, type){
            
            }
        });

        var refreshNetwork = function(){
            
var southWest = map.getBounds().getSouthWest();
            
var northEast = map.getBounds().getNorthEast();
            
var center = map.getCenter();
            box.appendRequestBaseParams({
                'view_height': parseInt(svgDiv.style.height),
                'view_width': parseInt(svgDiv.style.width),
                'view_map_mminX': southWest.lng(),
                'view_map_mmaxY': southWest.lat(),
                'view_map_mmaxX': northEast.lng(),
                'view_map_mminY': northEast.lat(),
                'center_lat': center.lat(),
                'center_lon': center.lng(),
                'zoom': map.getZoom()
            }, 
true);
            
var selectID = network.getLastSelectedElementID();
            network.refreshSVGNetwork(
null,function(){
                
if (selectID) {
                    network.setCurrentSubNetworkElementSelectedByID(selectID);
                }
            });
        }
        
        GEvent.addListener(map, 
"moveend"function(oldLevel, newLevel){
            refreshNetwork();
        });
        
        GEvent.addListener(map, 
"mousemove"function(latlng){
            window.status 
= latlng;
        });

注意,这里通过googleMap上的监听机制 把Map和Network的联动进行绑定。

3)Java后台代码
    protected TSVGNetwork getNetwork(HttpServletRequest request) {
        GoogleGISNetwork network 
= new GoogleGISNetwork(box, 120.85288236121.9326249599999831.85651591999999630.6819477);
        view_width 
= Integer.valueOf(request.getParameter("view_width")).intValue();
        view_height 
= Integer.valueOf(request.getParameter("view_height")).intValue();
        String minx 
= request.getParameter("view_map_mminX");
        String maxy 
= request.getParameter("view_map_mmaxY");
        String maxx 
= request.getParameter("view_map_mmaxX");
        String miny 
= request.getParameter("view_map_mminY");
        zoom 
= Integer.parseInt(request.getParameter("zoom"));
        centerlat 
= Double.parseDouble(request.getParameter("center_lat"));
        centerlon 
= Double.parseDouble(request.getParameter("center_lon"));
        network.setNetworkParams(Integer.valueOf(view_width).intValue(), Integer.valueOf(view_height).intValue(), Double.valueOf(minx).doubleValue(), Double.valueOf(maxx)
                .doubleValue(), Double.valueOf(miny).doubleValue(), Double.valueOf(maxy).doubleValue(), zoom, 
new GeoCoordinate(centerlon,centerlat));
        
return network;
    }

    
public void handleElementLocation(HttpServletRequest request, HttpServletResponse response) throws Exception {
        String requestContentParameters 
= WebUtils.getRequestParameter(request, ContentParameters);
        String[] idValue 
= WebUtils.parseElementContentParameters(requestContentParameters);
        Element element 
= WebUtils.getElementFromDataBox(box, idValue[0]);
        String[] xy 
= WebUtils.parseParamsComma(idValue[1]);
        
if (!WebUtils.equalNull(idValue[2])) {
            Element parent 
= WebUtils.getElementFromDataBox(box, idValue[2]);
            propertyChangeExecuter.setElementParent(element, parent);
        }
        
int zoom = Integer.parseInt(request.getParameter("zoom"));
        calculateMercatorScreemLocation(element, Integer.parseInt(xy[
0]), Integer.parseInt(xy[1]), view_width, view_height, zoom, centerlat, centerlon);
    }

    
public void handleMultiElementLocation(HttpServletRequest request, HttpServletResponse response) throws Exception {
        String requestContentParameters 
= WebUtils.getRequestParameter(request, ContentParameters);
        String[] idValue 
= WebUtils.parseElementContentParameters(requestContentParameters);
        String[] ids 
= WebUtils.parseParamsComma(idValue[0]);
        String[] xy 
= WebUtils.parseParamsComma(idValue[1]);
        Element parent 
= null;
        
if (!WebUtils.equalNull(idValue[2])) {
            parent 
= WebUtils.getElementFromDataBox(box, idValue[2]);
        }
        
int zoom = Integer.parseInt(request.getParameter("zoom"));
        
for (int i = 0; i < ids.length; i++) {
            Element element 
= WebUtils.getElementFromDataBox(box, ids[i]);
            
if (parent != null) {
                element.setParent(parent);
            }
            calculateMercatorScreemLocation(element, Integer.parseInt(xy[
0]), Integer.parseInt(xy[1]), view_width, view_height, zoom, centerlat, centerlon);
        }
    }

    
public static void calculateMercatorScreemLocation(Element element, int dx, int dy, int viewportWidth, int viewportHeight, int zoom, double centerlat, double centerlon) {
        
if (element instanceof Group) {
            List children 
= element.getChildren();
            Iterator it 
= children.iterator();
            
while (it.hasNext()) {
                Element child 
= (Element) it.next();
                calculateMercatorScreemLocation(child, dx, dy, viewportWidth, viewportHeight, zoom, centerlat, centerlon);
            }
        }
        GeoCoordinate coord 
= element.getGeoCoordinate();
        
if (coord != null) {
            Point centerPoint 
= element.getCenterLocation();
            
int x = (int) centerPoint.getX() + dx;
            
int y = (int) centerPoint.getY() + dy;
            Point screenPoint 
= new Point(x, y);
            GeoCoordinate currentCenterGeoPoint 
= new GeoCoordinate(centerlon,centerlat);
            GeoCoordinate elementGeo 
= GisToolkits.getMercatorGeoPointByScreenPoint(screenPoint,currentCenterGeoPoint,zoom,viewportWidth, viewportHeight);
            element.setGeoCoordinate(
new GeoCoordinate(elementGeo.getLongitude(), elementGeo.getLatitude()));
        }
    }

当然数据节点必须赋值上经纬度信息,这里省略了相关代码。

4)配置后台Servlet

完成后。就可以部署调试了。



Feedback

# re: TWaverSVG 结合 GoogleMap  回复  更多评论   

2009-10-30 23:16 by 林小加
twaver+googlemap = 逻辑图+物理图,强!

# re: TWaverSVG 结合 GoogleMap  回复  更多评论   

2009-11-02 22:56 by gxlx
twaver还有GIS功能?我们公司买的版本怎么没有?

# re: TWaverSVG 结合 GoogleMap[未登录]  回复  更多评论   

2009-11-03 12:04 by javarunway
这个GIS是要单独买的吧?

只有注册用户登录后才能发表评论。


网站导航: