From f0efddd9e32b9c5dc828401c4092be004b4826cf Mon Sep 17 00:00:00 2001
From: ansel0926 <ansel0926@gmail.com>
Date: 星期三, 18 五月 2022 12:05:08 +0800
Subject: [PATCH] 添加标签
---
view/project/drawPlot.html | 6
assets/service/drawService.js | 17 ++
view/project/editText.html | 194 ++++++++++++++++++++++++++++++++
libs/Cesiumplus/CesiumDraw.js | 4
assets/map/map3D.js | 95 +++++++++++++--
5 files changed, 299 insertions(+), 17 deletions(-)
diff --git a/assets/map/map3D.js b/assets/map/map3D.js
index 269e21d..dce4111 100644
--- a/assets/map/map3D.js
+++ b/assets/map/map3D.js
@@ -242,6 +242,34 @@
}
});
}
+ if(entity._name=='drawTextEtity'){//缂栬緫鏍囩
+ 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-330],
+ content: 'project/editText.html',
+ success: function (layero, index) {
+ var iframe = window['layui-layer-iframe' + index];
+ let id=entity._id;
+ let title=entity.title;
+ let fontColor=entity._label._fillColor._value.toCssHexString();
+ let fontSize=entity._label._font._value.split(" ")[0].replace("px","");
+ let fontFamily=entity._label._font._value.split(" ")[1];
+ iframe.child(id,title,fontColor,fontSize,fontFamily);
+ }
+ });
+ }
else if(entity._name=='drawPointEntity'){//缂栬緫鐐�
document.getElementById("pop_" +entity.id).style.display="block";
layer.config({
@@ -887,6 +915,55 @@
"fontstyle":signPointEntity._label._font._value.split(" ")[1],
"popContent":popContent
}
+ }
+ 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 updateText(type,id,val){//淇敼鏍囩锛歾zf
+ let signPointEntity = viewer.entities.getById(id)
+ if(type==1){//鏍囩鏂囧瓧
+ signPointEntity.title=val;
+ signPointEntity._label._text._value = val;
+ let treeLabelNode=getNodeById(signPointEntity.id,layerMenu[3].children)
+ treeLabelNode.title=val;
+ }
+ else if(type==2){//鏍囩棰滆壊
+ if(val==''){
+ val=signPointEntity._label._fillColor._value;
+ }
+ signPointEntity._label._fillColor._value = Cesium.Color.fromCssColorString(val);
+ }
+ else if(type==3){//鏍囩瀛椾綋澶у皬
+ let font=signPointEntity._label._font._value.split(" ");
+ signPointEntity._label._font._value = val+"px "+font[1];
+ }
+ else if(type==4){//鏍囩瀛椾綋
+ let font=signPointEntity._label._font._value.split(" ");
+ signPointEntity._label._font._value = font[0]+" "+val;
+ }
+ let saveData= {
+ "id":signPointEntity._id,
+ "type": "text",
+ "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({
@@ -1686,8 +1763,6 @@
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
- //pixelOffset: new Cesium.Cartesian2(0.0, 5.0),
- eyeOffset:new Cesium.Cartesian3(0,20,0),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
@@ -1695,18 +1770,12 @@
distanceDisplayCondition: window.localStorage.getItem("visualDistance")?new Cesium.DistanceDisplayCondition(0, window.localStorage.getItem("visualDistance")):new Cesium.DistanceDisplayCondition(0, 100000.0)
},
});
- let popup = new Popup({
- viewer:viewer,
- geometry:cartesian,
- entity:entity,
- id: "pop_" + entity.id,
- type:'label',
- content:drawEntity.popContent?drawEntity.popContent:null,
- })
- if( drawEntity.popContent!=null&& drawEntity.popContent!=""){
- $("#pop_" + entity.id).children(".bx-popup-content-ctn").children(".bx-popup-content").children(".textarea")[0].innerHTML = drawEntity.popContent;
+ if(drawEntity.content!=null&&drawEntity.content!=""){
+ entity.title=drawEntity.content;
}
- document.getElementById("pop_" +entity.id).style.display="none";
+ else{
+ entity.title = "鏍囩" + new Date(drawEntity.createTime).format("yyyyMMddhhmmss");
+ }
addTreeNode({
"title": entity.title,
"id": entity.id,
diff --git a/assets/service/drawService.js b/assets/service/drawService.js
index 6ac310c..e70a619 100644
--- a/assets/service/drawService.js
+++ b/assets/service/drawService.js
@@ -117,6 +117,23 @@
"fontstyle":'SimSun',
}
}
+ else if(type=='text'){
+ var cartographic=Cesium.Cartographic.fromCartesian(drawEntity._position._value);
+ var lng=Cesium.Math.toDegrees(cartographic.longitude);
+ var lat=Cesium.Math.toDegrees(cartographic.latitude);
+ var alt=cartographic.height;
+ saveData= {
+ "id":id,
+ "type": type,
+ "longitude": lng,
+ "latitude": lat,
+ "height": alt,
+ "content":drawEntity.title,
+ "color":drawEntity._label._fillColor._value.toCssColorString(),
+ "fontsize":30,
+ "fontstyle":'SimSun',
+ }
+ }
let token = window.localStorage.getItem("token");
$.ajax({
diff --git a/libs/Cesiumplus/CesiumDraw.js b/libs/Cesiumplus/CesiumDraw.js
index 55bc1f9..55a6c78 100644
--- a/libs/Cesiumplus/CesiumDraw.js
+++ b/libs/Cesiumplus/CesiumDraw.js
@@ -615,8 +615,10 @@
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
font: '20px LiSu',
fillColor: Cesium.Color.YELLOW,
+ outlineColor: Cesium.Color.BLACK,
+ outlineWidth: 2,
+ style: Cesium.LabelStyle.FILL_AND_OUTLINE,
text: labelText,
- eyeOffset:new Cesium.Cartesian3(0,20,0),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
distanceDisplayCondition: window.localStorage.getItem("visualDistance")?new Cesium.DistanceDisplayCondition(0, window.localStorage.getItem("visualDistance")):new Cesium.DistanceDisplayCondition(0, 100000.0)
diff --git a/view/project/drawPlot.html b/view/project/drawPlot.html
index 45f27de..144c237 100644
--- a/view/project/drawPlot.html
+++ b/view/project/drawPlot.html
@@ -86,16 +86,16 @@
</li>
<li class="hover" onclick="drawplot('label')">
<div>
- <img class="mapImg" src="../../assets/images/draw/鏂囧瓧.png">
+ <img class="mapImg" src="../../assets/images/draw/鐐�.png">
</div>
<div>鏂囧瓧鏍囪鐐�</div>
</li>
- <!-- <li class="hover" onclick="drawplot('text')">
+ <li class="hover" onclick="drawplot('text')">
<div>
<img class="mapImg" src="../../assets/images/draw/鏂囧瓧.png">
</div>
<div>鏍囩</div>
- </li> -->
+ </li>
<!-- <li>
<input id="text" class="labelInput" type="text" placeholder="杈撳叆鏂囧瓧" autocomplete="off" />
</li> -->
diff --git a/view/project/editText.html b/view/project/editText.html
new file mode 100644
index 0000000..07c6fb8
--- /dev/null
+++ b/view/project/editText.html
@@ -0,0 +1,194 @@
+<!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;
+ }
+ .text2{
+ float:left;
+ color:white;
+ font-size:16px;
+ margin-left: 30px;
+ margin-top: 20px;
+ }
+ .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;
+ }
+ .textarea{
+ width: 260px;
+ height: 140px;
+ margin-left: 25px;
+ margin-right: 50px;
+ margin-top: 20px;
+ font-size: 16px;
+ text-indent: 8px;
+ outline: 0;
+ 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;
+ resize:none;
+ }
+ .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>
+ <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
+ 鏍囩棰滆壊
+ </div>
+ <div id="colorSelect" style="display:inline-block;margin-top: 5px;">
+ </div>
+ </div>
+ <div>
+ <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
+ 鏍囩澶у皬
+ </div>
+ <div style="display:inline-block;margin-top: 5px; width: 150px;">
+ <select id="fontsize" lay-verify="required" class="my-select" lay-filter="fontsize">
+ <option value="10">10</option>
+ <option value="20">20</option>
+ <option value="30">30</option>
+ <option value="40">40</option>
+ <option value="50">50</option>
+ <option value="60">60</option>
+ <option value="70">70</option>
+ <option value="80">80</option>
+ <option value="90">90</option>
+ <option value="100">100</option>
+ <option value="110">110</option>
+ <option value="120">120</option>
+ <option value="130">130</option>
+ <option value="140">140</option>
+ <option value="150">150</option>
+ </select>
+ </div>
+ </div>
+ <div>
+ <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
+ 鏍囩瀛椾綋
+ </div>
+ <div style="display:inline-block;margin-top: 5px;width: 150px;">
+ <select id="fontfamily" lay-verify="required" class="my-select" lay-filter="fontfamily">
+ <option value="SimSun">瀹嬩綋</option>
+ <option value="SimHei">榛戜綋</option>
+ <option value="Microsoft">寰蒋闆呴粦</option>
+ <option value="KaiTi">妤蜂綋</option>
+ <option value="FangSong">浠垮畫</option>
+ <option value="LiSu">闅朵功</option>
+ <option value="MingLiU">缁嗘槑浣�</option>
+ </select>
+ </div>
+ </div>
+ </form>
+ </div>
+ <script>
+ var currentTextId
+ function child(id,text,fontColor,fontSize,fontfamily) {
+ currentTextId=id
+ layui.use(['element', 'layer', 'form','colorpicker'], function () {
+ var element = layui.element;
+ var form = layui.form;
+ var colorpicker = layui.colorpicker;
+ $("#input").val(text)
+ colorpicker.render({
+ elem: '#colorSelect',
+ color: fontColor,
+ size:'20px',
+ done: function (color) {
+ parent.updateText(2,currentTextId,color);
+ },
+ });
+ fontSize=parseInt(fontSize);
+ $("#fontsize").val(fontSize);
+ form.on("select(fontsize)", function (data) {
+ parent.updateText(3,currentTextId,data.value);
+ })
+ $("#fontfamily").val(fontfamily);
+ form.on("select(fontfamily)", function (data) {
+ parent.updateText(4,currentTextId,data.value);
+ })
+ form.render();
+ });
+ }
+ function labelChange(e) {
+ parent.updateText(1,currentTextId,$("#input").val());
+ }
+ </script>
+
+
+</body>
+
+</html>
\ No newline at end of file
--
Gitblit v1.9.1