效果
数据结构
{
"xiangZhen": [{
"name": "名称",
"geom": "POINT(116.789 39.7218)",
"x": 116.785,
"y": 39.72
}, {
"name": "名称",
"geom": "POINT(116.78 39.722)",
"x": 116.78,
"y": 39.722
}],
"nongcun": [{
"name": "名称",
"geom": "POINT(116.7 39.72)",
"x": 116.77,
"y": 39.7
}, {
"name": "名称",
"geom": "POINT(116.77 39.73)",
"x": 116.7,
"y": 39.7
}],
"qianDun": [{
"name": "名称",
"geom": "POINT(116.74179.638153)",
"x": 116.74178,
"y": 39.638153
}, {
"name": "名称",
"geom": "POINT(116.7476 39.628)",
"x": 116.7476,
"y": 39.62876
}]
}
1.获取数据
点击按钮后,获取当前点位信息. 根据这个已经标注的点位,查询最近的设备
根据编码查询坐标, 实际应用也可以用 地图点击,获取xy
获取到当前x跟y坐标后,传给后台,后台返回最近点位信息
下面 获取了三种数组的数据,根据实际情况 自行调整
getSyjData: function(object) {
var x = object.x;
var y = object.y;
var options = new Object();
var temp = {
x: x,
y: y
}
options.url = "/manage-api/fanWei/zuiJin";
options.type = "GET";
options.data = temp;
options.errorback = akglobe_config.errBack;
options.callback = function(data) {
if (!data) return;
console.log(data)
ak_xq_syj.clearObject();
ak_commonQuery.clear();
var nongcun = data.nongcun;
var nongcunArr = nongcun[0];
var qianDun = data.qianDun;
var qianDunArr = qianDun[0];
var xiangZhen = data.xiangZhen;
var xiangZhenArr = xiangZhen[0];
var center = {};
center.lon = x;
center.lat = y;
var cities = [];
var nongcunObj = new Object();
nongcunObj.lon = nongcunArr.x;
nongcunObj.lat = nongcunArr.y;
nongcunObj.type = 1;
nongcunArr.type = 1;
cities.push(nongcunObj)
var qianDunObj = new Object();
qianDunObj.lon = qianDunArr.x;
qianDunObj.lat = qianDunArr.y;
qianDunObj.type = 2;
qianDunArr.type = 2;
cities.push(qianDunObj)
var xiangZhenObj = new Object();
xiangZhenObj.lon = xiangZhenArr.x;
xiangZhenObj.lat = xiangZhenArr.y;
xiangZhenObj.type = 3;
xiangZhenArr.type = 3;
cities.push(xiangZhenObj)
ak_xq_syj.showDmline2(center, cities) // 两点之间绘制线路
var rows = [];
// rows.push(object);
rows.push(nongcunArr);
rows.push(qianDunArr);
rows.push(xiangZhenArr);
ak_xq_syj.xq_syj_position(rows);
}
akglobe_config.ajaxQuery(options);
},
2.获取数据后进行两点直接连线
showDmline2: function(center, cities) {
var obj = new Object();
obj.center = center;
obj.cities = cities;
obj.speed = 10;
obj.repeat = 10;
obj.image = 'css/images/animateWall/wh1.png';
obj.width = 11;
obj.color = Cesium.Color.YELLOW;
// ak_commonQuery.addDmLineObj(obj);
this.geoCollectionLine1 = new Cesium.PrimitiveCollection();
this.labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
viewer.scene.primitives.add(this.geoCollectionLine1);
// guanghuan
for (obj in cities) {
var ok = cities[obj];
var material = null;
if (ok.type == 1) {
var material = Cesium.Material.fromType("BlueWaterMaterialPropertyLgCz");
material.uniforms.color = Cesium.Color.BLACK; // SKYBLUE CRIMSON
material.uniforms.speed = 7;
material.uniforms.repeat = 10;
material.uniforms.image =
'css/images/animateWall/wh1.png'; //lineAarrow arrow_1 colors1 lineAarrow.png wh1
} else if (ok.type == 2) {
var material = Cesium.Material.fromType("BlueWaterMaterialPropertyLgCz");
material.uniforms.color = Cesium.Color.CRIMSON; // SKYBLUE CRIMSON
material.uniforms.speed = 7;
material.uniforms.repeat = 10;
material.uniforms.image =
'css/images/animateWall/wh1.png'; //lineAarrow arrow_1 colors1 lineAarrow.png wh1
} else if (ok.type == 3) {
var material = Cesium.Material.fromType("BlueWaterMaterialPropertyLgCz");
material.uniforms.color = Cesium.Color.SKYBLUE; // SKYBLUE CRIMSON
material.uniforms.speed = 7;
material.uniforms.repeat = 10;
material.uniforms.image =
'css/images/animateWall/wh1.png'; //lineAarrow arrow_1 colors1 lineAarrow.png wh1
}
//clickSaoMiao clicklabelNew2
ak_commonQuery.clicklabelNew2({
"name": "北京市通州候黄庄电镀厂",
"address": "漷县镇镇",
"latitude": ok.lon,
"longitude": ok.lat,
"radius": 20,
"color": Cesium.Color.YELLOW,
});
var start = [center.lon, center.lat];
var end = [ok.lon, ok.lat];
var arr = [];
arr.push(start);
arr.push(end);
var newcas = cCesium.lnglatArrToCartesianArr(arr);
var obj = new Object();
var id = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
obj.name = "ss"
obj.address = "";
obj.addtypemarker = config.addtypemarker.common;
obj.cartions = newcas;
obj.material = material;
obj.width = 6;
var line1 = ak_pm_tool.addLineReGeom(this.geoCollectionLine1, obj);
var startPosition = Cesium.Cartesian3.fromDegrees(center.lon, center.lat)
var endPosition = Cesium.Cartesian3.fromDegrees(ok.lon, ok.lat, 10)
var distance = Cesium.Cartesian3.distance(startPosition, endPosition)
distance = distance.toFixed(2) + "米";
console.log(distance);
var id = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
var obj = new Object();
obj.id = "ztqgGj;" + config.addtypemarker.common;
// +";"+db.name+";"+id+";"+db.name
obj.name = distance;
obj.lat = ok.lon;
obj.lng = ok.lat;
obj.fillColor = Cesium.Color.RED;
obj.outlineWidth = 2;
// obj.showBackground=true;
obj.addtypemarker = config.addtypemarker.common;
ak_pm_tool.addLabel(this.labels, obj);
}
},
代码解释如下:
测距:
var startPosition = Cesium.Cartesian3.fromDegrees(center.lon, center.lat)
var endPosition = Cesium.Cartesian3.fromDegrees(ok.lon, ok.lat, 10)
var distance = Cesium.Cartesian3.distance(startPosition, endPosition)
distance = distance.toFixed(2) + "米";
标注文本距离:
var id = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
var obj = new Object();
obj.id = "ztqgGj;" + config.addtypemarker.common;
// +";"+db.name+";"+id+";"+db.name
obj.name = distance;
obj.lat = ok.lon;
obj.lng = ok.lat;
obj.fillColor = Cesium.Color.RED;
obj.outlineWidth = 2;
// obj.showBackground=true;
obj.addtypemarker = config.addtypemarker.common;
ak_pm_tool.addLabel(this.labels1, obj);
绘制线路:
将经纬度坐标,放到数组内,统一转换坐标,然后形成 cesium坐标数组,构建线路
赋予材质信息
var start = [center.lon, center.lat];
var end = [ok.lon, ok.lat];
var arr = [];
arr.push(start);
arr.push(end);
var newcas = cCesium.lnglatArrToCartesianArr(arr);
var obj = new Object();
var id = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
obj.name = "ss"
obj.address = "";
obj.addtypemarker = config.addtypemarker.common;
obj.cartions = newcas;
obj.material = material;
obj.width = 6;
var line1 = ak_pm_tool.addLineReGeom(this.geoCollectionLine1, obj);
材质的写法:
这是一种 线路动画的写法, 也可以用简单的颜色
var material = null;
var material = Cesium.Material.fromType("BlueWaterMaterialPropertyLgCz");
material.uniforms.color = Cesium.Color.CRIMSON; // 表示将材质的颜色 颜色使用变量配置 CRIMSON:深红色
material.uniforms.speed = 7; //速度
material.uniforms.repeat = 10; //重复属性
material.uniforms.image = 'css/images/animateWall/wh1.png'; //lineAarrow arrow_1 colors1 lineAarrow.png wh1 图片
在获取数据时会有多个不同的点位,所以ok.type是根据不同点位类型而去绘制不同的材质样式.
var ok = cities[obj];
var material = null;
if (ok.type == 1) {
var material = Cesium.Material.fromType("BlueWaterMaterialPropertyLgCz");
material.uniforms.color = Cesium.Color.BLACK; // SKYBLUE CRIMSON
material.uniforms.speed = 7;
material.uniforms.repeat = 10;
material.uniforms.image =
'css/images/animateWall/wh1.png'; //lineAarrow arrow_1 colors1 lineAarrow.png wh1
}
3.后台代码
@RequestMapping(value = "/zuiJin", method = RequestMethod.GET)
public Map list(HttpServletRequest request) {
Map map = new HashMap();
Map mapuser= getParametersUserinfo(request);
StringBuilder sbd = new StringBuilder();
sbd.append(" SELECT name, ST_AsText(geom) as geom,ST_X(geom) as x,ST_Y(geom) as y FROM geo_nongcun_shuiyuanjing_point ");
sbd.append("where 1=1 ORDER BY geom <-> GeomFromEWKT('SRID=4326;POINT(");
sbd.append(mapuser.get("x").toString()+" "+mapuser.get("y").toString());
sbd.append(" )') limit 5");
String sql = sbd.toString();
List list = jdbcTemplate.queryForList(sql);
map.put("nongcun", list);
return map;
}
根据点位范围内分组,获取前五条数据 SELECT name, ST_AsText(geom) as geom FROM "geo_sfz_point" where 1=1 ORDER BY geom <-> GeomFromEWKT('SRID=4326;POINT(121.50 31.22)') limit 5;