台站信息在地图上(openlayer)展示

最新推荐文章于 2023-12-31 22:33:05 发布

Hi~Mario

最新推荐文章于 2023-12-31 22:33:05 发布

阅读量446

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_45439099/article/details/105147015

版权

本文详细介绍了一种在前后端分离项目中，如何从数据库获取台站数据，并将其转化为地图上可展示的GeoJSON格式的过程。包括前端使用OpenLayerMap.js加载数据，后端Java接口的编写及数据转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前后端分离的项目中,实现数据(台站)从数据库中取出,并展现在地图页面中,放图:
在这里插入图片描述
其中加载的十字(不仅仅是这个图案,根据类型设置的不同,图案也会有所不同,比如还有星星,方块等!)就是对应的台站,下面标出根据自己的理解,走的步骤~~
1 因为是前后端分离,所以我是通过nginx来配置并访问的项目的,(nginx还需要学习!!!)
在这里插入图片描述

2 前端代码(引入一个封装好的OpenLayerMap.js),之后在地图页面上创建button,点击事件为:
function onButtonPointsGeoJsonClicked(){
gMap.loadPointLayerByGeoJsonWithStyleCallBack("./json.json", “points”, “stationId”, 15,
function setStyleCallback(obj) {
var ret = pointStyles[obj.properties.stationType % 12];
return ret;
},
function onLayerLoaded(err, layer) {
if (!err && layer) {
// do something
}

                    pointsLayer = layer;
                }
            );
    }
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200327181630385.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQzOTA5OQ==,size_16,color_FFFFFF,t_70)

这里的./json.json在实际访问后端数据的时候,是写的后端传数据的接口,地址在上述图片中…
3 后台接口编写
@WebMethodOrder(Order = 9016)
@WebMethod(Action = “getSatStationProtectRegionGeoJsonHN”, Description = “获取地球站保护区GEOJSON”)
@WebMethodDetailDesc(DetailDesc = “获取地球站保护区GEOJSON,由方法自己写JSON，不通过框架,”)
public void getSatStationProtectRegionGeoJsonHN
(
// @SoapParameter(Name = “SatStationId”, Description = “地球站ID”) int SatStationId,
// @SoapParameter(Name = “CoordType”, Description = “坐标类型,1:WGS84 2:高德”) int CoordType
)
{
try {

		List<QueryFilter> propList = null;
		
			propList = new ArrayList<QueryFilter>();

// propList.add(new QueryFilter(“province_id”, 460000));

		ListEntityBase< com.radioManage.entities.SatStation> lstSat = EntityBase
				.createListFromPropertires( com.radioManage.entities.SatStation.class,
						propList);
		if (lstSat == null || lstSat.size() == 0) {
			CallContext context = this.getCallContext();
			int length = context.finishJson("null");
			putHeaders();

			context.setRespondCode(200);

			return;
		}

		StringWriter writer = new StringWriter();//返给浏览器的
		writer.write("[");

		Integer i;
		final SimpleFeatureType TYPE = DataUtilities.createType("Link",
				"geometry:Point,"
						+ // <- the geometry attribute: Point type
						"stationId:java.lang.Integer,"
						+ // <- a number attribute
						"stationType:java.lang.Integer"
	
		);
		for (int index = 0; index < lstSat.size(); index++) {
			 com.radioManage.entities.SatStation sat = lstSat.get(index);
			PGgeometry geometry = sat.getGeom();
			SimpleFeatureBuilder featureBuilder = new SimpleFeatureBuilder(
					TYPE);
			Geometry geotoolPoint = SatStationGeometryHelper
					.convertPostGisGeometryToJTS(geometry);
			FeatureJSON featureJSON = new FeatureJSON(new GeometryJSON(7));

			featureBuilder.add(geotoolPoint);
			featureBuilder.add(sat.getSatId());
			featureBuilder.add(1);
			

			
			SimpleFeature feature = featureBuilder.buildFeature(null);

			if (index > 0) {
				writer.write(",");
			}
			featureJSON.writeFeature(feature, writer);
		}
		writer.write("]");

		CallContext context = this.getCallContext();
		int length = context.finishJson(writer.toString());

		putHeaders();

		context.setRespondCode(200);
		writer = null;
	} catch (Exception e) {
		com.fujp.commons.Log.Trace(e);
	}

	return;
}

4 至于上面写的代码,是为了组装前端需要的数据格式,前端要的格式是:
[
{
“type”: “Feature”,
“properties”: {
“stationId”: 629803,
“stationType”: 2
},
“geometry”: {
“type”: “Point”,
“coordinates”: [
118.707926,
32.235702
]
}
},
{
“type”: “Feature”,
“properties”: {
“stationId”: 329008,
“stationType”: 3
},
“geometry”: {
“type”: “Point”,
“coordinates”: [
118.72865,
32.20345
]
}
}
]
5 后端是怎么组装前端所需的数据???
************