OpenLayers显示本地图片
程序员文章站
2022-07-07 17:41:09
...
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page isELIgnored ="true" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="<%=basePath%>/Script/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="<%=basePath%>/Style/style.css" type="text/css">
<script src="<%=basePath%>/Script/lib/OpenLayers.js"></script>
<script type="text/javascript">
var map,vector_point,geojson;
function init(){
//创建地图
map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS("OpenLayers Basic","http://vmap0.tiles.osgeo.org/wms/vmap0?",
{
layers:"basic"
},
{
numZoomLevels: 5//设置缩控制器级别，默认是18【不设置情况下】
});
//1.这里定义的jsons应该是通过ajax从后台获取的
var jsons = {
"type" : "FeatureCollection",
"features" : [ {
"type" : "Feature",
"properties" : {
"image" : "<%=basePath%>/Script/img/marker.png"
},
"geometry" : {
"type" : "Point",
"coordinates" : [ 124.70169067383, 43.859191897451 ]
}
}, {
"type" : "Feature",
"properties" : {
"image" : "<%=basePath%>/Script/img/marker-blue.png"
},
"geometry" : {
"type" : "Point",
"coordinates" : [ 125.37673830988, 43.858870032345 ]
}
} ]
};
//新增部分，将对vector_point这个图层定义一个样式，不使用默认样式
var styleMap = new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
fillOpacity: 1,
strokeOpacity:1,
strokeColor: "#000000",
graphicWidth:30,
graphicHeight:50,
externalGraphic: "${image}",
label:'pic',//图标标签
labelXOffset:4,
labelYOffset:24
}),
"select": new OpenLayers.Style({
fillOpacity: 0.6,
strokeOpacity:0.8,
strokeColor: "#000000",
graphicWidth:30,
graphicHeight:50,
externalGraphic: "${image}"
})
});
/*var styleMap = new OpenLayers.StyleMap({
"default": {
fillOpacity: 1,
strokeOpacity:1,
strokeColor: "#000000",
graphicWidth:30,
graphicHeight:50,
externalGraphic: "${image}"
},
"select":{
fillOpacity: 0.6,
strokeOpacity:0.8,
strokeColor: "#000000",
graphicWidth:30,
graphicHeight:50,
externalGraphic: "${image}"
}
});*/
vector_point = new OpenLayers.Layer.Vector("Simple Geometry", {
styleMap : styleMap,
rendererOptions : {
zIndexing : true,
}
});
//创建一个点图层,用来展现我们从后台获取的点信息
//屏蔽这句话vector_point = new OpenLayers.Layer.Vector();
//将地图图层和点图层加载到Map
map.addLayers([ wms, vector_point ]);
//创建GeoJSON类对象,用于解析JSON串
geojson = new OpenLayers.Format.GeoJSON();
vector_point.addFeatures(geojson.read(jsons));//read返回OpenLayers.Feature.Vector
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(125.30593872070312,43.87017822557581),3);
}
</script>
</head>
<body onload="init();">
<div>
<div id="map" class="smallmap"></div>
</div>
</body>
</html>
推荐阅读