From ef260dff5d38c36272a2ac97d40db70ab3f8c2cc Mon Sep 17 00:00:00 2001 From: BaoXs <bao_dida@163.com> Date: 星期六, 14 五月 2022 16:48:16 +0800 Subject: [PATCH] 添加项目点,点击调整。 整理项目超链接 --- assets/map/map3D.js | 247 +++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 236 insertions(+), 11 deletions(-) diff --git a/assets/map/map3D.js b/assets/map/map3D.js index b8c2f73..fa6c49b 100644 --- a/assets/map/map3D.js +++ b/assets/map/map3D.js @@ -113,6 +113,8 @@ //娣诲姞娴锋磱娴佸姩鏁堟灉 // addSeaFlow(); + //鍒濆鍖栫粯鍒跺浘褰� + initDrawEntity(); } var mouseMoveHandler @@ -146,6 +148,9 @@ 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 +203,14 @@ 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> ' + "缂栬緫鏂囧瓧", @@ -224,12 +231,12 @@ }); } } - 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 +262,7 @@ // "primitive": pick.primitive // } // CesiumPop.addDivPop(options); - } + // } } @@ -757,7 +764,43 @@ 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 addSeaFlow() { @@ -1088,4 +1131,186 @@ }) }); 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 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, + point: { + color: Cesium.Color.RED, + pixelSize: 10, + outlineColor: Cesium.Color.WHITE, + outlineWidth: 2, + disableDepthTestDistance: Number.POSITIVE_INFINITY + } + }); + entity.title = "鐐�" + new Date(drawEntity.createTime).format("yyyyMMddhhmmss"); + 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