前后端分离的项目中,实现数据(台站)从数据库中取出,并展现在地图页面中,放图:
其中加载的十字(不仅仅是这个图案,根据类型设置的不同,图案也会有所不同,比如还有星星,方块等!)就是对应的台站,下面标出根据自己的理解,走的步骤~~
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 后端是怎么组装前端所需的数据???
************