openlayers通过pgrouting规划路径实现轨迹播放功能
<%@ 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>
转载自：https://blog.csdn.net/wangyingda415/article/details/7665886
