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

You may also like...