openlayers通过pgrouting规划路径实现轨迹播放功能
2012-06-15 11:33
417 查看
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>OpenLayers map preview</title>
<link rel="stylesheet" href="js/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="js/map/OpenLayers.js" type="text/javascript"></script>
<script src="js/map/zh-CN.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
table.featureInfo, table.featureInfo td, table.featureInfo th {
border: 1px solid #ddd;
border-collapse: collapse;
margin: 0;
padding: 0;
font-size: 90%;
padding: .2em .1em;
}
table.featureInfo th {
padding: .2em .2em;
text-transform: uppercase;
font-weight: bold;
background: #eee;
}
table.featureInfo td {
background: #fff;
}
table.featureInfo tr.odd td {
background: #eee;
}
table.featureInfo caption {
text-align: left;
font-size: 100%;
font-weight: bold;
text-transform: uppercase;
padding: .2em .2em;
}
#options {
/* margin-left: 120px;
margin-top: 10px;
*/
position: absolute;
left: 250px;
top: 25px;
z-index: 1000;
}
</style>
<script defer="defer" type="text/javascript">
/*
* Green style
*/
var style_green = {
strokeColor: "#00FF00",
strokeWidth: 3,
strokeDashstyle: "solid",
pointRadius: 6,
pointerEvents: "visiblePainted"
};
var data = [];
//将所有点坐标放入数组
var allpoints = [];
function getVars(){
var stnode = $("#start").val();
var ednode = $("#end").val();
if(stnode==''){
stnode="0";
}
if(ednode==''){
ednode="0";
}
$.get('getAllpointsServlet?startnode='+stnode+'&endnode='+ednode, function(result){
// data = eval(result);
data = result.split("#");
draw();
});
}
//绘制线路
var drawlayer;
var gjson = new OpenLayers.Format.GeoJSON();
function draw(){
if (drawlayer != null) {
map.removeLayer(drawlayer);
}
drawlayer = new OpenLayers.Layer.Vector("定制路线",{styleMap:new OpenLayers.StyleMap({'default':{
strokeColor: "#00FF00",
strokeOpacity: 0.5,
strokeWidth: 4
}})});
map.addLayer(drawlayer);
if (data != null && data.length > 0) {
for(var i=0;i<data.length;i++){
var features = gjson.read(data[i],"FeatureCollection");
if(features){
drawlayer.addFeatures(features);
} }
}
//将线层上的各个点数据存入数组以备轨迹播放使用
allpoints = [];
for(var i=0;i<data.length;i++){
var datav = eval("("+data[i]+")");
var temp = (datav.coordinates +"").split(","); //坐标时数字类型
for(var t=0;t<2;t++){ //测试只存一个点
allpoints.push(temp[t]);
}
}
}
var markers;
var x = 0;
function AddMarker(){
x = 0; //置0
if (markers != null) {
map.removeLayer(markers);
}
markers = new OpenLayers.Layer.Markers("人");
map.addLayer(markers);
//marker
var imgUrl = "http://localhost:9000/OpenLayersTest/images/locus.png";
var icon = new OpenLayers.Icon(imgUrl);
var marker = new OpenLayers.Marker(new OpenLayers.LonLat(1785.043176062168,-25.67064759297935), icon);
markers.addMarker(marker);
fn();
}
function fn() {
if (x < allpoints.length) {
var lonlat = new OpenLayers.LonLat(allpoints[x], allpoints[x+1]);
//set center
var zoom = map.getZoom();
// map.setCenter(lonlat, zoom);
//draw marker
markers.clearMarkers();
var imgUrl = "http://localhost:9000/OpenLayersTest/images/locus.png";
var icon = new OpenLayers.Icon(imgUrl);
var marker = new OpenLayers.Marker(lonlat, icon);
markers.addMarker(marker);
//draw again
setTimeout(fn, 200);
x += 2;
}
}
var map;
var tiled;
var locator;
function init(){
format = 'image/png';
var bounds = new OpenLayers.Bounds(
-2.404, -87.451,
1883.898, 1022.186
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 7.3683671875,
projection: "EPSG:900913",
units: 'm'
};
map = new OpenLayers.Map('map', options);
// setup tiled layer
tiled = new OpenLayers.Layer.WMS(
"137矿井结构", "http://localhost:9009/geoserver/cite/wms",
{
LAYERS: 'cite:output',
format: format
},
{isBaseLayer: true}
);
locator = new OpenLayers.Layer.WMS(
"分站定位器", "http://localhost:9009/geoserver/cite/wms",
{
LAYERS: 'cite:locatorinfo',
format: 'image/png',
transparent: "true"
},
{isBaseLayer: false}
);
map.addLayers([tiled,locator]);
//定义出定位器的部分信息渲染成label
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
var vectorLayer = new OpenLayers.Layer.Vector("设备信息", {
styleMap: new OpenLayers.StyleMap({'default':{
strokeColor: "#00FF00",
strokeOpacity: 1,
strokeWidth: 1,
fillColor: "#FF5500",
fillOpacity: 0.3,
pointRadius: 6,
pointerEvents: "visiblePainted",
// label with \n linebreaks
label : '设备名: <%="${name}"%>\n 人 数: <%="${age}"%>',
fontColor: '<%="${favColor}"%>',
fontSize: "12px",
fontFamily: "Courier New, monospace",
fontWeight: "bold",
labelAlign: '<%="${align}"%>',
labelXOffset: '<%="${xOffset}"%>',
labelYOffset: '<%="${yOffset}"%>'
}}),
renderers: renderer
});
// 新建一个点图层
var point = new OpenLayers.Geometry.Point(807.504, 527.168);
var pointFeature = new OpenLayers.Feature.Vector(point);
pointFeature.attributes = {
name: "1号定位器",
age: 20,
favColor: 'red',
align: "cm",
xOffset: 25,
yOffset: 25
};
map.addLayer(vectorLayer);
vectorLayer.addFeatures([pointFeature]);
// build up all controls
map.addControl(new OpenLayers.Control.PanZoomBar({
position: new OpenLayers.Pixel(6, 18)
}));
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.Scale($('scale')));
map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToExtent(bounds);
// alert("Layers "+map.layers[0].params.LAYERS);
// support GetFeatureInfo
map.events.register('click', map, function (e) {
document.getElementById('nodelist').innerHTML = "Loading... please wait...";
var params = {
REQUEST: "GetFeatureInfo",
EXCEPTIONS: "application/vnd.ogc.se_xml",
BBOX: map.getExtent().toBBOX(),
SERVICE: "WMS",
VERSION: "1.1.1",
X: e.xy.x,
Y: e.xy.y,
INFO_FORMAT: 'text/html',
QUERY_LAYERS: map.layers[0].params.LAYERS,
FEATURE_COUNT: 50,
Layers: 'cite:output',
WIDTH: map.size.w,
HEIGHT: map.size.h,
format: format,
styles: map.layers[0].params.STYLES,
srs: map.layers[0].params.SRS};
// merge filters
if(map.layers[0].params.CQL_FILTER != null) {
params.cql_filter = map.layers[0].params.CQL_FILTER;
}
if(map.layers[0].params.FILTER != null) {
params.filter = map.layers[0].params.FILTER;
}
if(map.layers[0].params.FEATUREID) {
params.featureid = map.layers[0].params.FEATUREID;
}
OpenLayers.loadURL("http://localhost:9009/geoserver/cite/wms", params, this, setHTML, setHTML);
OpenLayers.Event.stop(e);
});
}
// sets the HTML provided into the nodelist element
function setHTML(response){
document.getElementById('nodelist').innerHTML = response.responseText;
};
</script>
</head>
<body onload="init()">
<div id="map" class="smallmap">
<div id="options">
<img src="js/map/img/drag-rectangle-on.png" />
<img src="js/map/img/measuring-stick-on.png" />
<img src="js/map/img/panning-hand-on.png" /> </div>
</div>
<div id="searchbox" style="padding-top:5px;">查询条件：
起点：<input type="text" id="start" />
终点：<input type="text" id="end" />
<input type="button" onclick="getVars();" title="查询" value="查 询" />
<input type="button" onclick="AddMarker();" title="轨迹回放" value="轨迹回放" /></div>
<!-- <div id="wrapper">
<div id="location">location</div>
<div id="scale"></div>
</div> -->
<div id="nodelist">
</div>
</body>
</html>
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>OpenLayers map preview</title>
<link rel="stylesheet" href="js/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="js/map/OpenLayers.js" type="text/javascript"></script>
<script src="js/map/zh-CN.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
table.featureInfo, table.featureInfo td, table.featureInfo th {
border: 1px solid #ddd;
border-collapse: collapse;
margin: 0;
padding: 0;
font-size: 90%;
padding: .2em .1em;
}
table.featureInfo th {
padding: .2em .2em;
text-transform: uppercase;
font-weight: bold;
background: #eee;
}
table.featureInfo td {
background: #fff;
}
table.featureInfo tr.odd td {
background: #eee;
}
table.featureInfo caption {
text-align: left;
font-size: 100%;
font-weight: bold;
text-transform: uppercase;
padding: .2em .2em;
}
#options {
/* margin-left: 120px;
margin-top: 10px;
*/
position: absolute;
left: 250px;
top: 25px;
z-index: 1000;
}
</style>
<script defer="defer" type="text/javascript">
/*
* Green style
*/
var style_green = {
strokeColor: "#00FF00",
strokeWidth: 3,
strokeDashstyle: "solid",
pointRadius: 6,
pointerEvents: "visiblePainted"
};
var data = [];
//将所有点坐标放入数组
var allpoints = [];
function getVars(){
var stnode = $("#start").val();
var ednode = $("#end").val();
if(stnode==''){
stnode="0";
}
if(ednode==''){
ednode="0";
}
$.get('getAllpointsServlet?startnode='+stnode+'&endnode='+ednode, function(result){
// data = eval(result);
data = result.split("#");
draw();
});
}
//绘制线路
var drawlayer;
var gjson = new OpenLayers.Format.GeoJSON();
function draw(){
if (drawlayer != null) {
map.removeLayer(drawlayer);
}
drawlayer = new OpenLayers.Layer.Vector("定制路线",{styleMap:new OpenLayers.StyleMap({'default':{
strokeColor: "#00FF00",
strokeOpacity: 0.5,
strokeWidth: 4
}})});
map.addLayer(drawlayer);
if (data != null && data.length > 0) {
for(var i=0;i<data.length;i++){
var features = gjson.read(data[i],"FeatureCollection");
if(features){
drawlayer.addFeatures(features);
} }
}
//将线层上的各个点数据存入数组以备轨迹播放使用
allpoints = [];
for(var i=0;i<data.length;i++){
var datav = eval("("+data[i]+")");
var temp = (datav.coordinates +"").split(","); //坐标时数字类型
for(var t=0;t<2;t++){ //测试只存一个点
allpoints.push(temp[t]);
}
}
}
var markers;
var x = 0;
function AddMarker(){
x = 0; //置0
if (markers != null) {
map.removeLayer(markers);
}
markers = new OpenLayers.Layer.Markers("人");
map.addLayer(markers);
//marker
var imgUrl = "http://localhost:9000/OpenLayersTest/images/locus.png";
var icon = new OpenLayers.Icon(imgUrl);
var marker = new OpenLayers.Marker(new OpenLayers.LonLat(1785.043176062168,-25.67064759297935), icon);
markers.addMarker(marker);
fn();
}
function fn() {
if (x < allpoints.length) {
var lonlat = new OpenLayers.LonLat(allpoints[x], allpoints[x+1]);
//set center
var zoom = map.getZoom();
// map.setCenter(lonlat, zoom);
//draw marker
markers.clearMarkers();
var imgUrl = "http://localhost:9000/OpenLayersTest/images/locus.png";
var icon = new OpenLayers.Icon(imgUrl);
var marker = new OpenLayers.Marker(lonlat, icon);
markers.addMarker(marker);
//draw again
setTimeout(fn, 200);
x += 2;
}
}
var map;
var tiled;
var locator;
function init(){
format = 'image/png';
var bounds = new OpenLayers.Bounds(
-2.404, -87.451,
1883.898, 1022.186
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 7.3683671875,
projection: "EPSG:900913",
units: 'm'
};
map = new OpenLayers.Map('map', options);
// setup tiled layer
tiled = new OpenLayers.Layer.WMS(
"137矿井结构", "http://localhost:9009/geoserver/cite/wms",
{
LAYERS: 'cite:output',
format: format
},
{isBaseLayer: true}
);
locator = new OpenLayers.Layer.WMS(
"分站定位器", "http://localhost:9009/geoserver/cite/wms",
{
LAYERS: 'cite:locatorinfo',
format: 'image/png',
transparent: "true"
},
{isBaseLayer: false}
);
map.addLayers([tiled,locator]);
//定义出定位器的部分信息渲染成label
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
var vectorLayer = new OpenLayers.Layer.Vector("设备信息", {
styleMap: new OpenLayers.StyleMap({'default':{
strokeColor: "#00FF00",
strokeOpacity: 1,
strokeWidth: 1,
fillColor: "#FF5500",
fillOpacity: 0.3,
pointRadius: 6,
pointerEvents: "visiblePainted",
// label with \n linebreaks
label : '设备名: <%="${name}"%>\n 人 数: <%="${age}"%>',
fontColor: '<%="${favColor}"%>',
fontSize: "12px",
fontFamily: "Courier New, monospace",
fontWeight: "bold",
labelAlign: '<%="${align}"%>',
labelXOffset: '<%="${xOffset}"%>',
labelYOffset: '<%="${yOffset}"%>'
}}),
renderers: renderer
});
// 新建一个点图层
var point = new OpenLayers.Geometry.Point(807.504, 527.168);
var pointFeature = new OpenLayers.Feature.Vector(point);
pointFeature.attributes = {
name: "1号定位器",
age: 20,
favColor: 'red',
align: "cm",
xOffset: 25,
yOffset: 25
};
map.addLayer(vectorLayer);
vectorLayer.addFeatures([pointFeature]);
// build up all controls
map.addControl(new OpenLayers.Control.PanZoomBar({
position: new OpenLayers.Pixel(6, 18)
}));
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.Scale($('scale')));
map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToExtent(bounds);
// alert("Layers "+map.layers[0].params.LAYERS);
// support GetFeatureInfo
map.events.register('click', map, function (e) {
document.getElementById('nodelist').innerHTML = "Loading... please wait...";
var params = {
REQUEST: "GetFeatureInfo",
EXCEPTIONS: "application/vnd.ogc.se_xml",
BBOX: map.getExtent().toBBOX(),
SERVICE: "WMS",
VERSION: "1.1.1",
X: e.xy.x,
Y: e.xy.y,
INFO_FORMAT: 'text/html',
QUERY_LAYERS: map.layers[0].params.LAYERS,
FEATURE_COUNT: 50,
Layers: 'cite:output',
WIDTH: map.size.w,
HEIGHT: map.size.h,
format: format,
styles: map.layers[0].params.STYLES,
srs: map.layers[0].params.SRS};
// merge filters
if(map.layers[0].params.CQL_FILTER != null) {
params.cql_filter = map.layers[0].params.CQL_FILTER;
}
if(map.layers[0].params.FILTER != null) {
params.filter = map.layers[0].params.FILTER;
}
if(map.layers[0].params.FEATUREID) {
params.featureid = map.layers[0].params.FEATUREID;
}
OpenLayers.loadURL("http://localhost:9009/geoserver/cite/wms", params, this, setHTML, setHTML);
OpenLayers.Event.stop(e);
});
}
// sets the HTML provided into the nodelist element
function setHTML(response){
document.getElementById('nodelist').innerHTML = response.responseText;
};
</script>
</head>
<body onload="init()">
<div id="map" class="smallmap">
<div id="options">
<img src="js/map/img/drag-rectangle-on.png" />
<img src="js/map/img/measuring-stick-on.png" />
<img src="js/map/img/panning-hand-on.png" /> </div>
</div>
<div id="searchbox" style="padding-top:5px;">查询条件：
起点：<input type="text" id="start" />
终点：<input type="text" id="end" />
<input type="button" onclick="getVars();" title="查询" value="查 询" />
<input type="button" onclick="AddMarker();" title="轨迹回放" value="轨迹回放" /></div>
<!-- <div id="wrapper">
<div id="location">location</div>
<div id="scale"></div>
</div> -->
<div id="nodelist">
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 通过MediaPlayer实现简单的音乐播放（进度条实现快进的功能）
- Unity通过plane加摄像头实现视频播放功能
- C#中 如何通过路径实现文件上传功能
- Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能 视频网站中提供的在线视频播放功能,播放的都是FLV格式的文件,它是Flash动画文件,可通过Flash制作的播放器来播
- kindeditor本身支持上传flash功能，但是我们经常需要上传一些flv、mp4或则其它格式的视频。 其实具体的播放功能是通过jwplayer实现的。我只对kindeditor简单的修改了一下
- 如何通过动态生成Html灵活实现DataGrid分类统计的界面显示功能 activeandbadboy [原作]
- 自动播放功能的实现
- 通过Keepalived实现Redis Failover自动故障切换功能
- C指针通过编译器实现汇编语言类似内存间接寻址功能，编程语言的差异主要来自编译器的解释
- 实现OWA 2010通过短信方式发送邮件提醒功能
- IE8等不支持placeholder，通过javascript实现此功能，能够兼容多种浏览器
- 基于OpenLayers实战地理信息系统（离线地图，通过基站转经纬度，Quartz深入，轨迹实战）
- 基于jsp和servlet，通过复选框实现批量删除的功能
- 通过sftp实现文件分发功能
- Flask框架通过Flask_login实现用户登录功能示例
- Android使用MediaRecorder和Camera实现视频录制及播放功能整理
- 使用VideoView 或者SurfaceView 实现视频播放功能
- Java通过SMS短信平台实现发短信功能 含多语言
- Delphi通过调用Http接口实现短信发送的功能
- 通过动态内存分配来实现类似于动态数组的功能