var map = null;
Ext.onReady(function(){
new Ext.Viewport({
layout : "border",
items : [ {
region : "north",
height : 65,
contentEl:'title'
}, {
title : "图层管理",
region : "west",
width : 200,
collapsible : true,
contentEl:'left'
}, {
xtype : "panel",
title:'传感器数据在线监控地图',
region : "center",
contentEl:'map'
} ]
});
initMap();
initMarker();
});
var initMarker = function(){
var pm2d5 = new OpenLayers.Layer.Text('外包企业',{location:'resource/pm2.5.txt'});
var mvi = new OpenLayers.Layer.Text('国内上市公司',{location:'resource/mvi.txt'});
var aim = new OpenLayers.Layer.Text('外企',{location:'resource/aim.txt'});
var gas = new OpenLayers.Layer.Text('私有软件作坊',{location:'resource/gas.txt'});
map.addLayers([pm2d5,mvi,aim,gas]);
};
var initMap = function(){
var mapDiv = $('div#mapPanel');
$(window).resize(function() {
mapDiv.css({width:$(window).width(),height:$(window).height(),'overflow-y':'hidden'});
});
map = new OpenLayers.Map('map',{});
var city = new OpenLayers.Layer.Image(
'天津地区',
'resource/map.jpg',
new OpenLayers.Bounds(0,0,472,745),
new OpenLayers.Size(580, 288), {numZoomLevels:8}
);
map.addLayer(city);
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.LayerSwitcher({
div:$('div#left')[0]//将图层切换控件渲染到left上
}));
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.KeyboardDefaults());
map.zoomToMaxExtent();
};
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<title>基于OpenLayers的简单应用</title>
<link rel="stylesheet" href="js/openlayers/theme/default/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/extjs/ext-all.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/openlayers/lib/OpenLayers.js" charset="utf8"></script>
<script type="text/javascript" src="js/index.js" charset="utf8"></script>
</head>
<body>
<div id="mapPanel"></div>
<div id="title" style="background:url('resource/head1_04.jpg') left center repeat-x;height:65px;">
<div style="background:url('resource/head1_01-02.jpg') left center no-repeat;height:62px;padding-top:2px;"> </div>
</div>
<div id="left"></div>
<div id="map"></div>
</body>
</html>
