openlayers入門之使用openlayers描述車輛運動軌跡
阿新 • • 發佈:2019-01-06
不介紹概念直接上例子,需要了解的可以直接看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>