创建地图对比窗口，当左侧地图窗口缩放或平移时，右侧地图窗口也随之发生相应的变化。
1. 创建HTML文件，引入OpenLayers开发包，插入地图div元素。
2. 创建地图实例对象map，添加基础图层和相应控件。
map.addLayers([china,china_p]);
map.setCenter(newOpenLayers.LonLat(116.39, 39.91), 8);
map.addControl(newOpenLayers.Control.Navigation());
map.addControl(newOpenLayers.Control.LayerSwitcher());
3. 创建地图实例对象map2，添加基础图层和相应控件。
varosm = new OpenLayers.Layer.OSM();
map2.addLayer(osm);
map2.setCenter(newOpenLayers.LonLat(116.39, 39.91).transform(new OpenLayers.Projection("EPSG:4326"),map2.getProjectionObject()), 8);
map2.addControl(newOpenLayers.Control.Navigation());
map2.addControl(newOpenLayers.Control.LayerSwitcher());
4. 为map注册“move”和“zoomend”事件。
map.events.on(
{
"move":moveListener,
"zoomend":zoomListener
}
);
5. 添加moveListener和zoomListener监听函数。
functionmoveListener(event) {
map2.setCenter(map.getCenter().transform(newOpenLayers.Projection("EPSG:4326"), map2.getProjectionObject()));
}
functionzoomListener(event) {
map2.zoomTo(map.getZoom());
}
运行结果如下图所示：