java - OpenLayers:来自对象列表的动态特征信息

Question

我正在使用 OpenLayers。我需要创建一个对象的 arrayList 以在 map 中显示要素信息。因此，我将一个列表从 Controller 传递到我的 jsp 文件，并需要在 js 文件中使用它。但是，我的对象未定义，我无法检索信息。 在此处输入代码所以我尝试创建一个 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);
}

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

Answer 1

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

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

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