From cc021a0544a8c0b2a056cec3168da119515a8e38 Mon Sep 17 00:00:00 2001
From: ansel0926 <ansel0926@gmail.com>
Date: 星期六, 14 五月 2022 16:53:59 +0800
Subject: [PATCH] 点标记
---
assets/map/map3D.js | 356 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 345 insertions(+), 11 deletions(-)
diff --git a/assets/map/map3D.js b/assets/map/map3D.js
index b8c2f73..78455c7 100644
--- a/assets/map/map3D.js
+++ b/assets/map/map3D.js
@@ -113,6 +113,8 @@
//娣诲姞娴锋磱娴佸姩鏁堟灉
// addSeaFlow();
+ //鍒濆鍖栫粯鍒跺浘褰�
+ initDrawEntity();
}
var mouseMoveHandler
@@ -146,6 +148,10 @@
viewer.clock.onTick.removeEventListener(onTickCallback);
var pick = viewer.scene.pick(movement.position);
CesiumPop.removeDiv();
+
+ if(labelLayer!=null){//鍏抽棴鏂囧瓧缂栬緫寮圭獥
+ layer.close(labelLayer);
+ }
if (pick != undefined && pick instanceof Cesium.Cesium3DTileFeature) {
var propertyNames = pick.getPropertyNames();
var length = propertyNames.length;
@@ -198,12 +204,13 @@
else if (pick != undefined && pick instanceof Object) {
var pickPrimitive = pick.primitive;
var entity = pick.id;
+ var cartesian = viewer.scene.pickPosition(movement.position);
//娣诲姞鏂囧瓧鏍囩浜嬩欢锛歾zf
if(entity!=undefined && entity instanceof Object &&entity.title!=undefined){
if(entity._name=='drawLabelEtity'){
- if(labelLayer!=null){
- layer.close(labelLayer);
- }
+ layer.config({
+ extend: 'myskin/style.css' //鍚屾牱闇�瑕佸厛鍔犺浇鏂扮毊鑲�
+ });
labelLayer=layer.open({
type: 2,
title: '<i class="iconfont icon-huitu i-item" style="font-size: 18px; color: white;"></i> ' + "缂栬緫鏂囧瓧",
@@ -223,13 +230,37 @@
}
});
}
+ else if(entity._name=='drawPointEntity'){
+ document.getElementById("pop_" +entity.id).style.display="block";
+ layer.config({
+ extend: 'myskin/style.css' //鍚屾牱闇�瑕佸厛鍔犺浇鏂扮毊鑲�
+ });
+ labelLayer=layer.open({
+ type: 2,
+ title: '<i class="iconfont icon-huitu i-item" style="font-size: 18px; color: white;"></i> ' + "缂栬緫鐐�",
+ maxmin: true,
+ skin: 'layer-ext-myskin',
+ shade: 0,
+ maxmin: false,
+ scrollbar: false,
+ shadeClose: true, //鐐瑰嚮閬僵鍏抽棴灞�
+ area: ['320px', '300px'],
+ resize: false,
+ offset: ['50px',document.body.clientWidth-340],
+ content: 'project/editPoint.html',
+ success: function (layero, index) {
+ var iframe = window['layui-layer-iframe' + index];//鎷垮埌iframe鍏冪礌
+ iframe.child(entity._id,entity.title);//鍚戞iframe灞傛柟娉� 浼犻�掑弬鏁�
+ }
+ });
+ }
}
- var cartesian = viewer.scene.pickPosition(movement.position);
- var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
- var lat = Cesium.Math.toDegrees(cartographic.latitude);
- var lng = Cesium.Math.toDegrees(cartographic.longitude);
- var alt1 = cartographic.height;
- if (pickPrimitive instanceof Cesium.PointPrimitive || pickPrimitive instanceof Cesium.GroundPolylinePrimitive || pickPrimitive instanceof Cesium.GroundPrimitive) {
+ // var cartesian = viewer.scene.pickPosition(movement.position);
+ // var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+ // var lat = Cesium.Math.toDegrees(cartographic.latitude);
+ // var lng = Cesium.Math.toDegrees(cartographic.longitude);
+ // var alt1 = cartographic.height;
+ // if (pickPrimitive instanceof Cesium.PointPrimitive || pickPrimitive instanceof Cesium.GroundPolylinePrimitive || pickPrimitive instanceof Cesium.GroundPrimitive) {
// CesiumPop.bindPopGlobeEventHandler(viewer);
// var content = '<div class="mapPop font2">'
// + '<div style="margin-top:10px;margin-left:15px;">'
@@ -255,7 +286,7 @@
// "primitive": pick.primitive
// }
// CesiumPop.addDivPop(options);
- }
+ // }
}
@@ -757,8 +788,95 @@
let font=signPointEntity._label._font._value.split(" ");
signPointEntity._label._font._value = font[0]+" "+val;
}
-
+ // let mydata = "{id:'" + signPointEntity._id + "',";
+ // mydata = mydata + "type:label,";
+ // mydata = mydata + "longitude:" + signPointEntity._position._value.x + ",";
+ // mydata = mydata + "latitude:" + signPointEntity._position._value.y + ",";
+ // mydata = mydata + "height:" + signPointEntity._position._value.z + ",";
+ // mydata = mydata + "content:" + signPointEntity.title + ",";
+ // mydata = mydata + "color:'" + signPointEntity._label._fillColor._value.toCssColorString() + "',";
+ // mydata = mydata + "fontsize:'" + signPointEntity._label._font._value[0].replace("px","") + "',";
+ // mydata = mydata + "fontstyle:'" + signPointEntity._label._font._value[1] + "'}";
+ let saveData= {
+ "id":signPointEntity._id,
+ "type": "label",
+ "longitude": signPointEntity._position._value.x,
+ "latitude": signPointEntity._position._value.y,
+ "height": signPointEntity._position._value.z,
+ "content":signPointEntity.title,
+ "color":signPointEntity._label._fillColor._value.toCssColorString(),
+ "fontsize":signPointEntity._label._font._value.split(" ")[0].replace("px",""),
+ "fontstyle":signPointEntity._label._font._value.split(" ")[1],
+ }
+ let token = window.localStorage.getItem("token");
+ $.ajax({
+ type: "post",
+ async: false,
+ url: parent.httpConfig.webApiUrl + "landstamp/front/updateDrawEntity",
+ data: saveData,
+ contentType: "application/x-www-form-urlencoded",
+ beforeSend:function(request){
+ request.setRequestHeader("token",token);
+ },
+ success: function (data) {
+ console.log(data)
+ },
+ error: function (XMLHttpRequest, textStatus, errorThrown) {
+ console.log("ajax璇锋眰澶辫触锛�");
+ }
+ });
}
+
+function updatePoint(type,id,val){//淇敼鐐癸細zzf
+ let signPointEntity = viewer.entities.getById(id);
+ let popId="pop_"+id;
+ let saveData;
+ if(type==1){
+ signPointEntity.title=val;
+ let treeLabelNode=getNodeById(signPointEntity.id,layerMenu[3].children)
+ treeLabelNode.title=val;
+ $("#" + popId).children(".bx-popup-header-ctn")[0].innerText=val;
+ saveData= {
+ "id":signPointEntity._id,
+ "type": "point",
+ "longitude": signPointEntity._position._value.x,
+ "latitude": signPointEntity._position._value.y,
+ "height": signPointEntity._position._value.z,
+ "content":signPointEntity.title,
+ }
+ }
+ else if(type==2){
+ let urlArr = val.split("/");
+ let newUrl=urlArr.splice(3).join("/")
+ $("#" + popId).children(".bx-popup-content-ctn").children(".bx-popup-content").children(".image")[0].src = val;
+ saveData= {
+ "id":signPointEntity._id,
+ "type": "point",
+ "longitude": signPointEntity._position._value.x,
+ "latitude": signPointEntity._position._value.y,
+ "height": signPointEntity._position._value.z,
+ "imagePath":newUrl,
+ }
+ }
+
+ let token = window.localStorage.getItem("token");
+ $.ajax({
+ type: "post",
+ async: false,
+ url: parent.httpConfig.webApiUrl + "landstamp/front/updateDrawEntity",
+ data: saveData,
+ contentType: "application/x-www-form-urlencoded",
+ beforeSend:function(request){
+ request.setRequestHeader("token",token);
+ },
+ success: function (data) {
+ console.log(data)
+ },
+ error: function (XMLHttpRequest, textStatus, errorThrown) {
+ console.log("ajax璇锋眰澶辫触锛�");
+ }
+ });
+}
function addSeaFlow() {
var waterFace = [121.52380572667727, 40.857604886322704, -30.580650037676627 + 400.0,
@@ -1088,4 +1206,220 @@
})
});
viewer.scene.primitives.add(waterPrimitive);*/
+}
+
+function initDrawEntity(){//zzf:鍒濆鍖栧浘褰�
+
+ let token = window.localStorage.getItem("token");
+ $.ajax({
+ type: "get",
+ async: false,
+ url: parent.httpConfig.webApiUrl + "landstamp/front/getDrawEntity",
+ contentType: "application/json;charset=utf-8",
+ beforeSend:function(request){
+ request.setRequestHeader("token",token);
+ },
+ success: function (data) {
+ if(data.rows!=null){
+ for(let i=0;i<data.rows.length;i++){
+ if(data.rows[i].type=="point"){
+ drawAjaxPoint(data.rows[i])
+ }
+ else if(data.rows[i].type=="polyline"){
+ drawAjaxPolyline(data.rows[i])
+ }
+ else if(data.rows[i].type=="polygon"){
+ drawAjaxPolygon(data.rows[i])
+ }
+ else if(data.rows[i].type=="label"){
+ drawAjaxLabel(data.rows[i])
+ }
+ }
+ }
+ },
+ error: function (XMLHttpRequest, textStatus, errorThrown) {
+ console.log("ajax璇锋眰澶辫触锛�");
+ }
+ });
+}
+
+function drawAjaxPoint(drawEntity){//鍔犺浇鐐�
+ //
+ let cartesian3 = Cesium.Cartesian3.fromDegrees(drawEntity.longitude, drawEntity.latitude, drawEntity.height);
+ console.log(drawEntity.content,cartesian3.x,cartesian3.y,cartesian3.z)
+ let cartesian=new Cesium.Cartesian3(parseFloat(drawEntity.longitude),parseFloat(drawEntity.latitude),parseFloat(drawEntity.height))
+ var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+ var entity=viewer.entities.add({
+ id:drawEntity.id,
+ name:"drawPointEntity",
+ position:cartesian,
+ label: {
+ show: true,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+ font: 'bold 14px Helvetica',
+ fillColor: Cesium.Color.WHITE,
+ text: "",
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000000.0)
+ },
+ billboard: {
+ image: "../assets/images/icon/icon1.png",
+ width: 40,
+ height: 40,
+ rotation: 0,
+ verticalOrigin: Cesium.VerticalOrigin.TOP,
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,//骞垮憡鐗屼笉杩涜娣卞害妫�娴�
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000000.0)
+ }
+ });
+ if(drawEntity.content!=null&&drawEntity.content!=""){
+ entity.title=drawEntity.content;
+ }
+ else{
+ entity.title = "鐐�" + new Date(drawEntity.createTime).format("yyyyMMddhhmmss");
+ }
+ let popup = new Popup({
+ viewer:viewer,
+ geometry:cartesian,
+ entity:entity,
+ id: "pop_" + entity.id
+ })
+ if( drawEntity.imagePath!=null&& drawEntity.imagePath!=""){
+ $("#pop_" + entity.id).children(".bx-popup-content-ctn").children(".bx-popup-content").children(".image")[0].src = parent.httpConfig.webApiUrl+drawEntity.imagePath;
+ }
+ document.getElementById("pop_" +entity.id).style.display="none";
+ addTreeNode({
+ "title": entity.title,
+ "id": entity.id,
+ "field": "Entity",
+ "checked": true,
+ "spread": true,
+ "children": [],
+ "ext": {
+ "lng": Cesium.Math.toDegrees(cartographic.longitude),
+ "lat": Cesium.Math.toDegrees(cartographic.latitude)
+ }
+ }, "4");
+}
+
+function drawAjaxPolyline(drawEntity){//鍔犺浇绾�
+ var measureLinePositonsArray = [];//瀛樺偍宸查噺娴嬬殑绾挎鐨勬姌鐐�
+ let longitudeList=drawEntity.longitude.split(",");
+ let latitudeList=drawEntity.latitude.split(",");
+ let heightList=drawEntity.height.split(",");
+ //鐐瑰潗鏍�
+ for(let i=0;i<longitudeList.length;i++){
+ let cartesian=new Cesium.Cartesian3(parseFloat(longitudeList[i]),parseFloat(latitudeList[i]),parseFloat(heightList[i]))
+ measureLinePositonsArray.push(cartesian);
+ }
+ var drawpointArr = [];
+ var measureLineGroundEntity = viewer.entities.add({
+ id:drawEntity.id,
+ name: 'measureLineGroundEntity',
+ polyline: {
+ clampToGround: true,
+ width: 1,
+ material: new Cesium.Color.fromBytes(255,124,0,255),
+ positions:measureLinePositonsArray
+ },
+ drawpointArr: drawpointArr,
+ measureLinePositonsArray: measureLinePositonsArray
+ });
+ measureLineGroundEntity.title = "鎶樼嚎" + new Date(drawEntity.createTime).format("yyyyMMddhhmmss");
+ addTreeNode({
+ "title": measureLineGroundEntity.title,
+ "id": measureLineGroundEntity.id,
+ "field": "Entity",
+ "checked": true,
+ "spread": true,
+ "children": [],
+ "ext": {
+ // "lng": Cesium.Math.toDegrees(cartographic.longitude),
+ // "lat": Cesium.Math.toDegrees(cartographic.latitude)
+ }
+ }, "4");
+}
+
+function drawAjaxPolygon(drawEntity){//鍔犺浇闈�
+ var polyPositions = [];//瀛樺偍澶氳竟褰㈢殑鐐�
+ let longitudeList=drawEntity.longitude.split(",");
+ let latitudeList=drawEntity.latitude.split(",");
+ let heightList=drawEntity.height.split(",");
+ //鐐瑰潗鏍�
+ for(let i=0;i<longitudeList.length;i++){
+ let cartesian=new Cesium.Cartesian3(parseFloat(longitudeList[i]),parseFloat(latitudeList[i]),parseFloat(heightList[i]))
+ polyPositions.push(cartesian);
+ }
+ var polygon = new Cesium.PolygonHierarchy();
+ polygon.positions=polyPositions;
+ var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
+ polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
+ let cartographic = Cesium.Cartographic.fromCartesian(polyCenter, viewer.scene.globe.ellipsoid, new Cesium.Cartographic());
+ var measurePolyGonGroundEntity = viewer.entities.add({
+ id:drawEntity.id,
+ name: 'measurePolyGonGroundEntity',
+ polygon: {
+ material: new Cesium.ColorMaterialProperty(Cesium.Color.RED.withAlpha(0.3)),
+ classificationType: Cesium.ClassificationType.BOTH,
+ outline: true,
+ outlineColor: Cesium.Color.WHITE,
+ hierarchy: new Cesium.CallbackProperty(function () {
+ return polygon;
+ }, false)
+ }
+ });
+ measurePolyGonGroundEntity.title = "闈�" + new Date(drawEntity.createTime).format("yyyyMMddhhmmss");
+ addTreeNode({
+ "title": measurePolyGonGroundEntity.title,
+ "id": measurePolyGonGroundEntity.id,
+ "field": "Entity",
+ "checked": true,
+ "spread": true,
+ "children": [],
+ "ext": {
+ "lng": Cesium.Math.toDegrees(cartographic.longitude),
+ "lat": Cesium.Math.toDegrees(cartographic.latitude)
+ }
+ }, "4");
+}
+
+function drawAjaxLabel(drawEntity){//鍔犺浇鏂囧瓧
+ let cartesian=new Cesium.Cartesian3(parseFloat(drawEntity.longitude),parseFloat(drawEntity.latitude),parseFloat(drawEntity.height))
+ var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+ cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+ var entity = viewer.entities.add({
+ id:drawEntity.id,
+ name: 'drawLabelEtity',
+ position: cartesian.clone(),
+ label: {
+ text: drawEntity.content,
+ font: drawEntity.fontsize+'px '+drawEntity.fontstyle,
+ fillColor: Cesium.Color.fromCssColorString(drawEntity.color),
+ outlineColor: Cesium.Color.BLACK,
+ outlineWidth: 2,
+ style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000000000000.0)
+ }
+ });
+ entity.title=drawEntity.content,
+ addTreeNode({
+ "title": entity.title,
+ "id": entity.id,
+ "field": "Entity",
+ "checked": true,
+ "spread": true,
+ "children": [],
+ "ext": {
+ "lng": Cesium.Math.toDegrees(cartographic.longitude),
+ "lat": Cesium.Math.toDegrees(cartographic.latitude)
+ }
+ }, "4");
}
\ No newline at end of file
--
Gitblit v1.9.1