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
完成后。就可以部署調試了。
