OpenLayers：创建地图对比窗口（双地图对比）

来源：互联网发布：网络yy骗小钱编辑：程序博客网时间：2024/05/20 19:46

创建地图对比窗口，当左侧地图窗口缩放或平移时，右侧地图窗口也随之发生相应的变化。

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());

}

运行结果如下图所示：

0 0