OpenLayers:动态要素来自Object列表的信息

时间:2015-04-26 11:57:06

标签: java javascript openlayers

我正在使用OpenLayers。我需要创建一个objectList对象来显示地图中的特征信息。所以,我从控制器传递一个列表到我的jsp文件,需要在js文件中使用它。但是,我的对象未定义,我无法检索信息。 enter code here所以我尝试创建一个JSON对象并传递它。但是,仍然有同样的问题。我跟随这个例子: http://jorix.github.io/OL-FeaturePopups/examples/feature-popups.html

map.js



// Projections
// -----------
var sphericalMercatorProj = new OpenLayers.Projection('EPSG:900913');
var geographicProj = new OpenLayers.Projection('EPSG:4326');

// Vector layers
// -------------
// Sprinters: layer with different attributes.
var sprintersLayer = new OpenLayers.Layer.Vector('Sprinters (translated labels)', {
    styleMap: new OpenLayers.StyleMap({
        externalGraphic: 'resources/img/mobile-loc.png',
        graphicOpacity: 1.0,
        graphicWith: 16,
        graphicHeight: 26,
        graphicYOffset: -26
    })
});
sprintersLayer.addFeatures(getSprintersFeatures());

// Create map
// ----------
var map = new OpenLayers.Map({
    div: 'map',
    theme: null,
    projection: sphericalMercatorProj,
    displayProjection: geographicProj,
    units: 'm',
    numZoomLevels: 18,
    maxResolution: 156543.0339,
    maxExtent: new OpenLayers.Bounds(
        -20037508.34, -20037508.34, 20037508.34, 20037508.34
    ),
    controls: [
        new OpenLayers.Control.Attribution(),
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.PanZoom(),
        new OpenLayers.Control.LayerSwitcher()
    ],
    layers: [
        new OpenLayers.Layer.OSM('OpenStreetMap', null),
        sprintersLayer
    ],
    center: new OpenLayers.LonLat(0, 0),
    zoom: 2
});


// Sprinters features
// ------------------
function getSprintersFeatures() {
	
	console.info("in getSprintersFeatures ");
	var features= [];
	var geojson = { 'type': 'FeatureCollection',
		    'features': features};
  
    // Think here is my problem.
	var list=eval(document.getElementById("${chaine}"));
	
	for(var i=0;i< list.length;i++){
		
		var longit=list[i][0];
		var latitud=list[i][1];
		var time=list[i][2];
		
		var list= new Array();
		
		var geom={};
		geom.type='Point';
		geom.coordinates=[longit, latitud];
		
		var prop={};
		prop.Longitude=longit;
		prop.Latitude= latitud;
		prop.Time=time;
		
		var elem={};
		var resultTab=[];
		elem.type='Feature';
		elem.geometry= geom ;
		elem.properties= prop ;
		
		features.push(elem);
		console.info(elem);
	}
	
	var reader = new OpenLayers.Format.GeoJSON();
    return reader.read(geojson);
}
&#13;
<c:forEach items="${listFromController}" var="cor" varStatus="stat">
	<c:choose>
		<c:when test="${stat.count == 1}">
          <c:set var="chaine" value="${chaine}[[${cor.longitude},${cor.latitude},${cor.time}]" />
       	</c:when>
       	<c:otherwise>
          <c:set var="chaine" value="${chaine},[${cor.longitude},${cor.latitude},${cor.time}]" />
        </c:otherwise>
   	</c:choose>
</c:forEach>
<c:set var="chaine" value="${chaine}]"/>

<div id="map" class="mws-panel-body"> </div>
<script src="resources/map.js"></script>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

使用导航器解析JSON对象很困难。所以要处理它,我们必须使用一个函数来创建JSON对象。然后,我们可以将它与jQuery ajax一起使用。 我们必须在spring上下文中注入这个bean,然后创建我们的JSON函数:

&#13;
&#13;
<bean id="cnManager"  
    class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean">  
  <property name="favorPathExtension" value="true"/>  
  <property name="ignoreAcceptHeader" value="true" />  
  <property name="defaultContentType" value="text/html" />  
  <property name="useJaf" value="false"/>  
  
  <property name="mediaTypes">  
    <map>  
   <entry key="html" value="text/html" />  
   <entry key="json" value="application/json" />  
   <entry key="xml" value="application/xml" />  
    </map>  
  </property>  
 </bean>  
&#13;
&#13;
&#13;

&#13;
&#13;
@RequestMapping(value = "/list.json", method = RequestMethod.GET, produces = { "application/json" })
	@ResponseStatus(HttpStatus.OK)
	public @ResponseBody
	List<Mesure> list() {
		return s.list();
	}
&#13;
&#13;
&#13;