openlayer 如何实现鹰眼功能？

时间：2022-11-24 10:17:17
我写了如下的代码：在function overViewTool()中加入鹰眼，可无法实现，表现为：红色虚线框与鹰眼框一样大，地图也是放大好多倍后的效果，请问应该如何写？

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers map preview</title>
<!--设置地图显示样式-->
<style type="text/css">
#map {
width: 800px;
height: 600px;
border: 1px solid black;
}
#wrapper {
width: 800px;
}
#location {
float: right;
}
</style>

<!--导入openlayers脚本-->
<link rel="stylesheet" href="OpenLayers/theme/default/style.css" type="text/css" />
<script src="OpenLayers/lib/OpenLayers.js"></script>
<script src="OpenLayers/lib/Firebug/debug.js"></script>


<script defer="defer" type="text/javascript">
var map;
var xzq;
/*显示Ajax返回的HTML内容*/
function setHTML(response) 
{ 
var str = response.responseText;
document.getElementById('nodelist').innerHTML=str;
};

/*加入鹰眼工具*/
function overViewTool()
{
/********************************************************************************************************************/
//下面是鹰眼，未成功
var constantina = new OpenLayers.LonLat(-3625801.1699537,6219377.5259815);
var options = {
layers: [xzq.clone()],
minRatio: 8,
maxRatio: 128
};
var overview = new OpenLayers.Control.OverviewMap(options);
map.addControl(overview);
map.setCenter(constantina, 4);
overview.maximizeControl();    
/********************************************************************************************************************/
}


function addLayers()
{
/*****************增加地图的图层*******************************/   
//增加行政区图层
xzq = new OpenLayers.Layer.WMS("行政区划分层", "http://localhost:8888/geoserver/wms",
{
layers: 'topp:XZQ_REGION',
srs: 'EPSG:4326',
tiled: 'true'
},
{   
buffer: 0
} 
);
map.addLayers([xzq]);
}


/*初始化地图*/
function init()
{
var bounds = new OpenLayers.Bounds(
-3625801.1699537, 437414.86785050004,
2307153.5739537003, 6219377.5259815
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 23175.604468388283,
projection: "EPSG:4326",
units: 'degrees'
};
map = new OpenLayers.Map('map', options);
            
addLayers();//添加图层
overViewTool();//添加鹰眼
map.zoomToExtent(bounds);
}
        </script>
    </head>

    <body onload="init()">
        <div id="map"></div>
        <div id="wrapper">
            <div id="location"></div>
            <div id="scale"></div>
        </div>
    </body>
</html>

3 个解决方案

#1

发现在这捣腾GIS实在是没有必要，那么多专门的GIS网站，象gissky,gisempire,gischina等等，在这里提问应该有答案！

#2

openlayer好像挺火的

#3

嗯，关注，谢谢提供的信息

#1

发现在这捣腾GIS实在是没有必要，那么多专门的GIS网站，象gissky,gisempire,gischina等等，在这里提问应该有答案！

#2

openlayer好像挺火的

#3

嗯，关注，谢谢提供的信息
标签：

相关文章