OpenLayers显示本地图片

最新推荐文章于 2024-05-14 17:29:51 发布

原创最新推荐文章于 2024-05-14 17:29:51 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Feature #label #numZoomLevels

OpenLayers 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个使用OpenLayers库实现的地图应用程序。该程序加载了WMS图层，并通过GeoJSON格式展示了多个标记点，同时自定义了标记样式。文章还包含了完整的HTML页面结构及JavaScript代码。

<%@ 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>