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&v=2&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.36, 8.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.85288236, 121.93262495999998, 31.856515919999996, 30.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
完成后。就可以部署调试了。
