基于OpenLayers的简单应用

从百草园到三味书屋

浏览: 52276 次
性别:
来自: 杭州

最近访客更多访客>>

zhangshaoyousss

kontage

boostwadehuhu

ylf123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

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;">&nbsp;</div>
	</div>
	<div id="left"></div>
	<div id="map"></div>
</body>
</html>