From cc021a0544a8c0b2a056cec3168da119515a8e38 Mon Sep 17 00:00:00 2001
From: ansel0926 <ansel0926@gmail.com>
Date: 星期六, 14 五月 2022 16:53:59 +0800
Subject: [PATCH] 点标记
---
assets/utils/popup.js | 3
view/project/editPoint.html | 128 +++++++++++++++++++++
assets/images/icon/icon1.png | 0
libs/Cesiumplus/CesiumDraw.js | 80 +++++++++----
assets/map/map3D.js | 131 ++++++++++++++++++++-
5 files changed, 304 insertions(+), 38 deletions(-)
diff --git a/assets/images/icon/icon1.png b/assets/images/icon/icon1.png
new file mode 100644
index 0000000..3f49cac
--- /dev/null
+++ b/assets/images/icon/icon1.png
Binary files differ
diff --git a/assets/map/map3D.js b/assets/map/map3D.js
index fa6c49b..78455c7 100644
--- a/assets/map/map3D.js
+++ b/assets/map/map3D.js
@@ -148,6 +148,7 @@
viewer.clock.onTick.removeEventListener(onTickCallback);
var pick = viewer.scene.pick(movement.position);
CesiumPop.removeDiv();
+
if(labelLayer!=null){//鍏抽棴鏂囧瓧缂栬緫寮圭獥
layer.close(labelLayer);
}
@@ -210,7 +211,6 @@
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> ' + "缂栬緫鏂囧瓧",
@@ -227,6 +227,30 @@
success: function (layero, index) {
var iframe = window['layui-layer-iframe' + index];//鎷垮埌iframe鍏冪礌
iframe.child(entity._id,pickPrimitive._text,pickPrimitive._fillColor.toCssHexString(),pickPrimitive._fontSize,pickPrimitive._fontFamily);//鍚戞iframe灞傛柟娉� 浼犻�掑弬鏁�
+ }
+ });
+ }
+ 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灞傛柟娉� 浼犻�掑弬鏁�
}
});
}
@@ -803,6 +827,57 @@
});
}
+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,
121.29444660541178, 40.90418429460569, -54.60203546856298 + 400.0,
@@ -1134,6 +1209,7 @@
}
function initDrawEntity(){//zzf:鍒濆鍖栧浘褰�
+
let token = window.localStorage.getItem("token");
$.ajax({
type: "get",
@@ -1168,21 +1244,54 @@
}
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({
+ 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
+ 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)
}
});
- entity.title = "鐐�" + new Date(drawEntity.createTime).format("yyyyMMddhhmmss");
+ 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,
diff --git a/assets/utils/popup.js b/assets/utils/popup.js
index 3162ba4..7ba4aff 100644
--- a/assets/utils/popup.js
+++ b/assets/utils/popup.js
@@ -18,7 +18,8 @@
$(_this.viewer.container).append( _this.ctn);
//娴嬭瘯寮圭獥鍐呭
var testConfig = {
- header:_this.entity._name,
+ header:_this.entity.title,
+ //header:"",
content:'<img class="image" style="width:100%;height:100%;max-width:200px;max-height:150px" src=""></img>'
}
_this.ctn.append(_this.createHtml(testConfig.header,testConfig.content,_this.id));
diff --git a/libs/Cesiumplus/CesiumDraw.js b/libs/Cesiumplus/CesiumDraw.js
index 8ef7e66..77ed059 100644
--- a/libs/Cesiumplus/CesiumDraw.js
+++ b/libs/Cesiumplus/CesiumDraw.js
@@ -472,32 +472,60 @@
drawHandler.setInputAction(function (movement) {
//鑾峰彇榧犳爣鐐瑰嚮澶勭殑鍧愭爣
drawHandler = drawHandler && drawHandler.destroy();
- var cartesian = options.viewer.scene.pickPosition(movement.position);
- var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
- var height = cartographic.height;//妯″瀷楂樺害
- if (Number(height) < 0) {
- var ray = options.viewer.camera.getPickRay(movement.position);
- cartesian = options.viewer.scene.globe.pick(ray, options.viewer.scene);
- }
- cartographic = Cesium.Cartographic.fromCartesian(cartesian);
- height = cartographic.height;//鍦板舰楂樺害
- // var lng = Cesium.Math.toDegrees(cartographic.longitude);
- // var lat = Cesium.Math.toDegrees(cartographic.latitude);
- // var poiResult = lng + "," + lat + "," + height;
- // document.getElementById(options.printId).value = poiResult;
- // var drawPointEntity = options.viewer.entities.getById("drawPointEntity");
- // if(drawPointEntity == undefined){
- var entity = viewer.entities.add({
- name: 'drawPointEntity',
- position: cartesian.clone(),
- point: {
- color: options.pointcolor,
- pixelSize: 10,
- outlineColor: Cesium.Color.WHITE,
- outlineWidth: 2,
- disableDepthTestDistance: Number.POSITIVE_INFINITY
+ // var cartesian = options.viewer.scene.pickPosition(movement.position);
+ // var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+ // var height = cartographic.height;//妯″瀷楂樺害
+ // if (Number(height) < 0) {
+ // var ray = options.viewer.camera.getPickRay(movement.position);
+ // cartesian = options.viewer.scene.globe.pick(ray, options.viewer.scene);
+ // }
+ // cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+ // height = cartographic.height;//鍦板舰楂樺害
+ // var entity = viewer.entities.add({
+ // name: 'drawPointEntity',
+ // position: cartesian.clone(),
+ // point: {
+ // color: options.pointcolor,
+ // pixelSize: 10,
+ // outlineColor: Cesium.Color.WHITE,
+ // outlineWidth: 2,
+ // disableDepthTestDistance: Number.POSITIVE_INFINITY
+ // }
+ // });
+ let position = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
+ var entity=viewer.entities.add({
+ name:"drawPointEntity",
+ position:position,
+ 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)
}
});
+ var cartesian = entity._position._value
+ let popup = new Popup({
+ viewer:viewer,
+ geometry:cartesian,
+ entity:entity,
+ id: "pop_" + entity.id
+ })
entity.title = "鐐�" + new Date().format("yyyyMMddhhmmss");
addTreeNode({
"title": entity.title,
@@ -507,8 +535,8 @@
"spread": true,
"children": [],
"ext": {
- "lng": Cesium.Math.toDegrees(cartographic.longitude),
- "lat": Cesium.Math.toDegrees(cartographic.latitude)
+ "lng": Cesium.Math.toDegrees(cartesian.x),
+ "lat": Cesium.Math.toDegrees(cartesian.y)
}
}, "4");
saveDrawEntity("point",entity,entity.id);
diff --git a/view/project/editPoint.html b/view/project/editPoint.html
new file mode 100644
index 0000000..a632175
--- /dev/null
+++ b/view/project/editPoint.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="UTF-8">
+ <title>缂栬緫鐐�</title>
+ <style>
+ .text{
+ float:left;
+ color:white;
+ font-size:16px;
+ margin-left: 30px;
+ margin-top: 5px;
+ }
+ .labelInput {
+ width: 150px;
+ height: 30px;
+ margin-left: 25px;
+ margin-right: 50px;
+ line-height: 40px;
+ font-size: 16px;
+ text-indent: 8px;
+ outline: 0;
+ float: left;
+ border: none;
+ border-color: #3b403f;
+ /* box-shadow: 0 2px 6px #3a3c42; */
+ border-top-left-radius: 2px;
+ border-bottom-left-radius: 2px;
+ background-color: rgba(63, 72, 84, 0.7);
+ color: white;
+ }
+ .my-save-btn{
+ margin-top: 80px;
+ margin-left: 100px;
+ width: 70px;
+ height: 30px;
+ color: white;
+ background-color: #303247;
+ border:1px;
+ cursor: pointer;
+ border-radius: 2px;
+ }
+ .my-save-btn:hover{
+ background-color:rgb(107, 169, 220);
+ }
+ .layui-form-select .layui-input {
+ padding-right: 30px;
+ height: 30px;
+ cursor: pointer;
+ background: #20212b;
+ color: grey;
+ border-color: #3b403f;
+ }
+
+ .layui-form-select dl dd.layui-this {
+ background-color: grey;
+ top: 35px;
+ color: #fff;
+ }
+
+ /*涓嬫媺妗嗛珮搴�*/
+ .layui-form-select dl {
+ top: 33px;
+ background: #3b403f !important;
+ color: white;
+ height: 100px;
+ }
+
+ </style>
+ <link href="../../libs/layui/css/layui.css" rel="stylesheet">
+ <script type="text/javascript" src="../../libs/jquery/jquery-3.5.1.min.js"></script>
+ <script type="text/javascript" src="../../libs/layui/layui.js"></script>
+</head>
+
+<body>
+ <div style="margin-top: 20px;">
+ <form class="layui-form" action="">
+ <div>
+ <span class="text">鏍囬</span>
+ <input id="input" class="labelInput" type="text" placeholder="杈撳叆鏂囧瓧" autocomplete="off" oninput="labelChange(event)" onporpertychange="labelChange(event)"/>
+ </div>
+ <div>
+ <span class="text">鍥剧墖</span>
+ <button type="button" class="layui-btn layui-btn-fluid layui-bg-black" style="height:30px;margin-top:10px;line-height: 30px;float: left;" id="uploadImg">
+ <i class="layui-icon"></i>涓婁紶鍥剧墖
+ </button>
+ </div>
+ </form>
+ </div>
+ <script>
+ var currentPointId
+ function child(id,text) {
+ currentPointId=id
+ layui.use(['element', 'layer', 'form','colorpicker','upload'], function () {
+ var element = layui.element;
+ var form = layui.form;
+ var colorpicker = layui.colorpicker;
+ var upload=layui.upload;
+ $("#input").val(text)
+ upload.render({
+ elem: '#uploadImg', //缁戝畾鍏冪礌
+ accept: 'images',
+ url: parent.httpConfig.webApiUrl + "landstamp/front/upload",
+ done: function (res) {
+ if (res.code == 0) {
+ let popId="pop_"+id;
+ parent.updatePoint(2,currentPointId, res.url);
+ }
+ layui.use('layer', function () {
+ var layer = layui.layer;
+ layer.msg(res.msg, { time: 1000 });
+ });
+ }
+ });
+ form.render();
+ });
+ }
+ function labelChange(e) {
+ parent.updatePoint(1,currentPointId,$("#input").val());
+ }
+
+ </script>
+
+
+</body>
+
+</html>
\ No newline at end of file
--
Gitblit v1.9.1