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>
- 大小: 146 KB
分享到:
相关推荐
如题,基于开源的gis框架(openlayers)设计的js组件,支持异步加载,可扩展。同时也提供了webgis操作的相关案例和代码,无论是学习还是工作需要均可满足。纯前端框架,下载后无需配置,可直接运行。
里面是教学视频,共五章,基于OpenLayers实战地理信息系统教程,基于OpenLayers实战地理信息系统教程基于OpenLayers实战地理信息系统教程基于OpenLayers实战地理信息系统教程
基于openlayers和canvas绘制海量数据的实现
基于OpenLayers的油田信息查询系统,马月琴,,为加快数字化油田建设和提高油田行业的生产效率,通过分析图形化展示在油田行业的发展现状,同时结合数字化油田建设的现实需求,
本课程旨在快速搭建地理信息展示系统。主要目的在于让学员了解OpenLayers的基本概念及关键API、掌握内网离线地图优化项目实战技巧以及结合地理信息系统展示的特点使用OpenLayers实战解决实际问题。
基于Openlayers的地图应用Vue组件非常强大且灵活。它内置了百度、高德、天地图瓦片,并支持与方正、超图、山海经纬、航天精一等PGIS厂商对接,为用户提供了丰富的地图数据选择。组件库中包含了文本、图形、html、...
基于openlayers实现点密度、比例符号、分级渲染等专题图,效果还不错,里面附带演示数据。
ngeo一个旨在简化基于AngularJS和OpenLayers应用程序开发的JS库
一个Vue与Openlayers结合的应用示例,以组件的方式在Vue中使用openlayers地图,以及可以进行简单的地图配置
Openlayers 简单实例6 距离面积量算2
基于openlayers的局域网地图开发第8课基本图形绘制源码(为了减少文件大小,文件中不包含地图文件,如需要地图文件可下载第7课源码或自行下载地图文件,并将其命名为simpleMap并将其放入项目根目录),课程基于...
Openlayers 简单实例4 工具条放在图外
基于Openlayers3+JQuery+.NET+SQLSERVER实现,此代码为《WebGIS之OpenLayers全面解析》中示例所附的源代码。
基础WebGIS应用程式_基于openlayers,与GeoServer和PostGIS联动.zip
govgisgovgis 基于openlayers地图应用
Openlayers 简单实例5 距离面积量算
基于openlayers实现如下功能: 1、实现图片地图,图片地图比例尺 2、绘制点的路径 3、绘制多边形,定位不规则多边形中心点,显示名称 4、多边形编辑 5、地图全屏,地图截图 6、点是否在区域中判定 7、暂停,播放,...
Openlayers 简单实例1 选择点击拖动
基于openlayers的局域网地图开发第7课地图控件源码,代码包含地图文件(simpleMap文件夹),基于openlayers开发局域网地图开发课程,可以实现地图显示、地点标注、绘制图形、添加图片与文字、地图保存与恢复、地点...
由于OL3本身不具有专题图生成功能,本程序借助第三方js库生成专题图,可选择分级方法和分级数。为方面大家,源程序里的页面文件、CSS文件和JS文件都放到文档中了,并添加了生成的效果图。