两个思路: 1.客户断每次操作地图后发起两次请求:取主地图和鹰眼地图,鹰眼地图根据主地图窗口在临时图层生成一个方框 2.页面初始化的时候从服务器获取一张小图(鹰眼图,可以是事先做好的,也可以通过MapJ生成),同时获得这张鹰眼图的minx,miny,maxx,maxy,zoom,每次操作地图后通过主地图的minx,miny,maxx,maxy,然后在页面上根据这几对坐标和zoom生成一个div叠加到鹰眼图上
推荐第二种方式,减少服务器的压力!
第一种方式我已经不怎么用了,代码也找不到,网上的一段:
private void responsebound(MapJ mymap, MapJ boundmap, HttpServletResponse response) { ServletOutputStream sout = null; try { Layer anlayer = boundmap.getLayers().elementAt(0); FeatureFactory ff = boundmap.getFeatureFactory(); PrimaryKey pk = new PrimaryKey(new Attribute(101)); Rendition rend = RenditionImpl.getDefaultRendition(); rend.setvalue(Rendition.STROKE, Color.red); rend.setvalue(Rendition.STROKE_WIDTH, 2); rend.setvalue(Rendition.FILL_OPACITY, new Float(0.0D)); DoublePoint p1 = new DoublePoint(0.0D, 0.0D); DoublePoint p2 = new DoublePoint(imgsizex, 0.0D); DoublePoint p3 = new DoublePoint(imgsizex, imgsizey); DoublePoint p4 = new DoublePoint(0.0D, imgsizey); DoublePoint mp1 = mymap.transformScreenToNumeric(p1); DoublePoint mp2 = mymap.transformScreenToNumeric(p2); DoublePoint mp3 = mymap.transformScreenToNumeric(p3); DoublePoint mp4 = mymap.transformScreenToNumeric(p4); double p[] = new double[10]; p[0] = mp1.x; p[1] = mp1.y; p[2] = mp2.x; p[3] = mp2.y; p[4] = mp3.x; p[5] = mp3.y; p[6] = mp4.x; p[7] = mp4.y; p[8] = mp1.x; p[9] = mp1.y; Feature ft = ff.createRegion(p, rend, null, null, pk); PrimaryKey spk[] = { new PrimaryKey(new Attribute(101)) }; Vector col = new Vector(); FeatureSet ftset = anlayer.searchByPrimaryKey(col, spk, null); PrimaryKey primarykey; if(ftset == null) primarykey = anlayer.addFeature(ft); else anlayer.replaceFeature(pk, ft); boundmap.setDeviceBounds(new DoubleRect(0.0D, 0.0D, smallimgsizex, smallimgsizey)); boundmap.setDistanceUnits(mymap.getDistanceUnits()); if(mymap.getZoom() / boundmap.getZoom() >= 0.80000000000000004D) { boundmap.setZoom(mymap.getZoom() * 1.25D); boundmap.setCenter(mymap.getCenter()); } else { boundmap.setZoom(resetzoom); boundmap.setCenter(resetpoint); } } catch(Exception e) { e.printStackTrace(); } response.setContentType("image/jpeg"); try { sout = response.getOutputStream(); ImageRequestComposer irc = ImageRequestComposer.create(boundmap, 65535, Color.white, "image/jpeg"); MapXtremeImageRenderer renderer = new MapXtremeImageRenderer(mapxtremeurl); renderer.render(irc); renderer.toStream(sout); } catch(Exception e) { e.printStackTrace(); } try { if(sout != null) sout.close(); } catch(Exception exception) { } }
第二种方式就是javascript了: var ViewScaleX = (boundMap_RX-boundMap_LX)/boundMap_W; var ViewScaleY = (boundMap_TY-boundMap_BY)/boundMap_H;
var xView1 = (map.LX-boundMap_LX)/ViewScaleX; var xView2 = boundMap_W - (boundMap_RX - map.RX)/ViewScaleX; var yView1 = (boundMap_TY - map.TY)/ViewScaleY; var yView2 = boundMap_H-(map.BY-boundMap_BY)/ViewScaleY; var Height = yView2-yView1; var Width = xView2-xView1;
改变鹰眼方框的大小(boundMap_BOX , Width , Height); 移动鹰眼方块(boundMap_BOX , parseInt(boundimg.border)+xView1 , parseInt(boundimg.border)+yView1);
archive 评论:
第一种方法要能够准确实现鹰眼矩形 而第二种方法对于独立坐标系是可以使用的,如果使用大地坐标系而且显示范围较大时(如:整个世界)很难准确实现鹰眼矩形(除非你能够在客户端实现投影匹配)
|