openlayers入門之使用openlayers描述車輛運動軌跡



不介紹概念直接上例子,需要了解的可以直接看API

先來簡單的,展示個地圖看看

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'test.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="openlayers/lib/OpenLayers.js"></script>
</head>

<body>
<div id="map"></div>
</body>
<script type="text/javascript">
// 使用指定的文檔元素創建地圖
var map = new OpenLayers.Map("map");

// 創建一個 OpenStreeMap raster layer
// 把這個圖層添加到map中
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
// 設定視圖縮放地圖程度為最大
map.zoomToMaxExtent();

</script>
</html>
看結果,

接下來我們把地圖定位到北京,北京的經緯度大概是 lat = 39.9306804  lon = 116.3854147 

我們設置地圖的中心

代碼是:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'test.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="openlayers/lib/OpenLayers.js"></script>
</head>

<body>
<div id="map"></div>
</body>
<script type="text/javascript">
// 使用指定的文檔元素創建地圖
var map = new OpenLayers.Map("map");

// 創建一個 OpenStreeMap raster layer
// 把這個圖層添加到map中
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
// 設定視圖縮放地圖程度為最大
map.zoomToMaxExtent();

var lat = 39.9306804;
var lon = 116.3854147;
var zoom = 11;
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
//設置地圖中心和縮放級別
map.setCenter(lonLat, zoom);
</script>
</html>

接下來我們就新建一個圖層畫軌跡

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'test.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="openlayers/lib/OpenLayers.js"></script>
</head>

<body>
<div id="map"></div>
</body>
<script type="text/javascript">
// 使用指定的文檔元素創建地圖
var map = new OpenLayers.Map("map");

// 創建一個 OpenStreeMap raster layer
// 把這個圖層添加到map中
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
// 設定視圖縮放地圖程度為最大
map.zoomToMaxExtent();

var lat = 39.9306804;
var lon = 116.3854147;
var zoom = 11;
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
//設置地圖中心和縮放級別
map.setCenter(lonLat, zoom);
//注冊一個單擊事件來展示界面上對應的坐標
map.events.register('click', map, function (e) {
var lonlat0 =map.getLonLatFromPixel(e.xy);
alert(lonlat0.lon+", "+lonlat0.lat);
var pixel = new OpenLayers.Pixel(e.xy.x,e.xy.y);
var lonlat = map.getLonLatFromPixel(pixel);
lonlat.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326")); //由900913坐標系轉為4326
alert(lonlat.lon+", "+lonlat.lat);
});

var featurecollection = {
"type": "FeatureCollection",
"features": [
{"geometry": {
"type": "GeometryCollection",
"geometries": [
{
"type": "LineString",
"coordinates":
[[12941518, 4856065],
[13941518, 4956065]]
},
{
"type": "Polygon",
"coordinates":
[[[12941518, 4856065],
[12947518, 4856065],
[12941518, 4866065]
]]
},
{
"type":"Point",
"coordinates":[12941518, 4856065]
}
]
},
"type": "Feature",
"properties": {}}
]
};
var geojson_format = new OpenLayers.Format.GeoJSON();
var vector_layer = new OpenLayers.Layer.Vector();
map.addLayer(vector_layer);
vector_layer.addFeatures(geojson_format.read(featurecollection));
</script>
</html>


最后設置軌跡的樣式和開始結束標識

<%@ page language="java" import="java.util.*,zss.njupt.util.RTreeManager" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
String id=request.getParameter("id");
List<String> pointList=RTreeManager.getMovingStatus(id, null, null);
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>軌跡展示</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script src="openlayers/lib/OpenLayers.js"></script>
<!-- bring in the OpenStreetMap OpenLayers layers.
Using this hosted file will make sure we are kept up
to date with any necessary changes -->
<script src="openlayers/lib/OpenStreetMap.js"></script>

</head>

<body>
<div id="map" class="smallmap"></div>

</body>
<script type="text/javascript">
var toMercator = OpenLayers.Projection.transforms['EPSG:900913']['EPSG:4326'];
var map = new OpenLayers.Map({
div : "map",
layers : [ new OpenLayers.Layer.OSM() ],
controls : [ new OpenLayers.Control.Navigation({
dragPanOptions : {
enableKinetic : true
}
}),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.Zoom() ],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
var lat = 39.9306804;
var lon = 116.3854147;
var zoom = 12;
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter(lonLat, zoom);
//map.addEventListener("click",function(e){ alert(e.point.lng+"--"+e.point.lat);});

/* map.events.register('click', map, function (e) {
var lonlat0 =map.getLonLatFromPixel(e.xy);
alert(lonlat0.lon+", "+lonlat0.lat);
var pixel = new OpenLayers.Pixel(e.xy.x,e.xy.y);
var lonlat = map.getLonLatFromPixel(pixel);
lonlat.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326")); //由900913坐標系轉為4326
alert(lonlat.lon+", "+lonlat.lat);
}); */
var points=[];
var point,startPoint,start,end;
<% for(int i=0;i<pointList.size();i=i+2){%>
point=new OpenLayers.LonLat(<%=pointList.get(i+1)%>,<%=pointList.get(i)%>).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"))
points.push([point.lon,point.lat]);
<% if(i==0){ %>
startPoint= [point.lon,point.lat];
start=point;
<%}%>
<% if(i==pointList.size()-2){ %>
end=point;
<%}%>

<%}%>

var style_green = {
strokeColor: "#00FF00",
strokeWidth: 3,
strokeDashstyle: "dashdot",
pointRadius: 6,
pointerEvents: "visiblePainted"
};
var featurecollection = {
"type": "FeatureCollection",
"features": [
{"geometry": {
"type": "GeometryCollection",
"geometries": [
{
"type": "LineString",
"coordinates": points
},
{
"type":"Point",
"coordinates":startPoint
}
]
},
"type": "Feature",
"properties": {}}
]
};


var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
layer_style.fillOpacity = 0.9;
layer_style.graphicOpacity = 1;
layer_style.strokeWidth = 4;
layer_style.strokeColor = "#080808";
layer_style.strokeOpacity = 1;

var geojson_format = new OpenLayers.Format.GeoJSON();
var vector_layer = new OpenLayers.Layer.Vector("軌跡", {style: layer_style});
map.addLayer(vector_layer);
vector_layer.addFeatures(geojson_format.read(featurecollection));
//標記圖層
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);

var size = new OpenLayers.Size(37,62);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var startIcon = new OpenLayers.Icon('icon/start.png', size, offset);
var endIcon = new OpenLayers.Icon('icon/end.png', size, offset);
markers.addMarker(new OpenLayers.Marker(start,startIcon));
markers.addMarker(new OpenLayers.Marker(end,endIcon));
</script>
</html>


完整代碼下載地址:http://download.csdn.net/detail/jiaotuwoaini/9525219


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com