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
转载自：https://blog.csdn.net/jiaotuwoaini/article/details/51452095
