移动端适配

Map/data.js

@@ -8,7 +8,7 @@ var line=[
             pitch: -0.17567078388335267,
             roll: 0.0007402932651014993,
             waitTime:0,
-            str:"梁启超故居坐落在广东十大最美乡村茶坑村，位于会城城区以南12公里处，周边有小鸟天堂、陈皮村、凌云塔等景点。"
+            str:"梁启超故居坐落在广东十大最美乡村茶坑村，位于会城城区以南12公里处，周边有小鸟天堂、陈皮村、凌云塔等景点"
         },
         {
             alt: 20.573154074728986,
@@ -18,7 +18,7 @@ var line=[
             pitch: -0.18753964610000073,
             roll: 0.000950649275732296,
             waitTime:0,
-            str:"景区分为梁启超故居和梁启超纪念馆两大部分，共占地5000平方米。"
+            str:"景区分为梁启超故居和梁启超纪念馆两大部分，共占地5000平方米"
         },
         {
             name:"梁启超铜像",
@@ -29,7 +29,7 @@ var line=[
             pitch: -0.3893116388246525,
             roll: 0.0025027522595539864,
             waitTime:0,
-            str:"纪念馆大院中央树立着一尊铜像，高2.38米，重400多公斤，他是由新会籍的广州美术学院林敦厚教授、雕塑家林汉强父子设计。"
+            str:"纪念馆大院中央树立着一尊铜像，高2.38米，重400多公斤，他是由新会籍的广州美术学院林敦厚教授、雕塑家林汉强父子设计"
         },
         { //梁启超铜像
             name:"梁启超铜像",
@@ -40,7 +40,7 @@ var line=[
             pitch: -0.246886498360682,
             roll: 0.0023183034479474784,
             waitTime:4,
-            str:"铜像中的梁启超一手叉腰，一手紧握书卷，目光坚毅执着，作深思状，再现了当年忧国忧民、不断探索，并为之奋斗的爱国主义精神，和战斗不息的风采。"
+            str:"铜像中的梁启超一手叉腰，一手紧握书卷，目光坚毅执着，作深思状，再现了当年忧国忧民、不断探索，并为之奋斗的爱国主义精神，和战斗不息的风采"
         },
         {
             name:"梁启超故居",
@@ -51,7 +51,7 @@ var line=[
             pitch: -0.5554753981425735,
             roll: 0.002542842223709485,
             waitTime:0,
-            str:"梁启超故居是一幢古色古香的青砖土瓦平房，由一正厅、一便厅、一饭厅、二耳房组成，占地155平方米。"
+            str:"梁启超故居是一幢古色古香的青砖土瓦平房，由一正厅、一便厅、一饭厅、二耳房组成，占地155平方米"
         },
 
         {  //梁启超故居
@@ -63,7 +63,7 @@ var line=[
             pitch: -0.5449234540460521,
             roll: 0.00017874928005578994,
             waitTime:4,
-            str:"故居一直以来受到人们的悉心保护，近20年来，各级人民政府多次拨划专项经费，由文物部门遵照“不改变原状”原则进行修缮，恢复原貌，1996年国务院公布梁启超故居为第四批全国重点文物保护单位。"
+            str:"故居一直以来受到人们的悉心保护，近20年来，各级人民政府多次拨划专项经费，由文物部门遵照“不改变原状”原则进行修缮，恢复原貌，1996年国务院公布梁启超故居为第四批全国重点文物保护单位"
         },
         {
             name:"怡堂书室",
@@ -74,7 +74,7 @@ var line=[
             pitch: -0.5317373563033367,
             roll: 6.282543489796363,
             waitTime:0,
-            str:"怡堂书室是梁启超曾祖父所建，是梁启超少年读书、接受儒家传统思想的地方，清光绪十八年夏天，梁启超携同新婚妻子李蕙仙回乡，就居住在书室的偏房，长女梁思顺也出生于此。"
+            str:"怡堂书室是梁启超曾祖父所建，是梁启超少年读书、接受儒家传统思想的地方，清光绪十八年夏天，梁启超携同新婚妻子李蕙仙回乡，就居住在书室的偏房，长女梁思顺也出生于此"
         },
         {  //怡堂书室
             name:"怡堂书室",
@@ -95,7 +95,7 @@ var line=[
             pitch: -0.564558614614687,
             roll: 0.0026953472759601027,
             waitTime:0,
-            str:"为缅怀任公矢志不渝的爱国情怀以及在教育、学术上的卓越贡献，2001年又建成梁启超故居纪念馆，建筑面积达1600平方米，建筑形式中西合璧，既有晚清岭南侨乡建筑韵味，更隐现天津饮冰室风格 ，兴建的纪念馆前还有一个巨大的鱼池。"
+            str:"为缅怀任公矢志不渝的爱国情怀以及在教育、学术上的卓越贡献，2001年又建成梁启超故居纪念馆，建筑面积达1600平方米，建筑形式中西合璧，既有晚清岭南侨乡建筑韵味，更隐现天津饮冰室风格 ，兴建的纪念馆前还有一个巨大的鱼池"
         },
         { //梁启超纪念馆
             name:"梁启超纪念馆",
@@ -116,7 +116,7 @@ var line=[
             pitch: -0.42560498964579985,
             roll: 0.0025862857056759836,
             waitTime:6,
-            str:"纪念馆以丰富的历史图片展现了任公爱国图强、毕生奋斗的事迹，陈列展出了任公的部分著作，《饮冰室合集》、《欧游心影集》和《时务报》、《清议报》、《国风报》等珍贵典籍，再现了任公伟大的爱国主义精神、思想体系。"
+            str:"纪念馆以丰富的历史图片展现了任公爱国图强、毕生奋斗的事迹，陈列展出了任公的部分著作，《饮冰室合集》、《欧游心影集》和《时务报》、《清议报》、《国风报》等珍贵典籍，再现了任公伟大的爱国主义精神、思想体系"
         },
         {  //仁堂
             name:"仁堂",
@@ -149,7 +149,7 @@ var line=[
             pitch: -0.4018670146106973,
             roll: 0.0025030639507974684,
             waitTime:2,
-            str:"茶坑旧乡府原址为北帝庙及祠堂，因年久失修在台风中倒塌。"
+            str:"茶坑旧乡府原址为北帝庙及祠堂，因年久失修在台风中倒塌"
         },
         {
             name:"茶坑旧乡府",
@@ -160,7 +160,7 @@ var line=[
             pitch: -0.4240895122494892,
             roll: 0.002569573437314787,
             waitTime:2,
-            str:"1960年，梁启超长子、著名建筑设计大师梁思成回乡之时，恰逢村内计划修建办公楼，梁思成在大队临时办公室完成了村委（即“旧乡府”）的设计。"
+            str:"1960年，梁启超长子、著名建筑设计大师梁思成回乡之时，恰逢村内计划修建办公楼，梁思成在大队临时办公室完成了村委（即“旧乡府”）的设计"
         },
      
         {  //茶坑旧乡府

Map/index.html

@@ -52,8 +52,8 @@
             /* left:30%; */
             height: 50px;
             border-radius: 15px;
-            text-align:center;
-            line-height:50px;
+            text-align:left;
+            line-height:20px;
         }
     </style>
      <script src="./Source/DGE.min.js"></script>

Map/map.js

@@ -82,7 +82,6 @@ addLabels();
 //添加地名
 function addLabels(){
     ps.map(p=>{
-        console.log(p);
         map.viewer.entities.add({
             id:p.name,
             position:Global.Cartesian3.fromDegrees(p.lng,p.lat,p.alt),
@@ -138,37 +137,65 @@ function intervalFun(){
             if(index==line.length-2){
                 clear()
             }
-            setFontsize()
+            let txtdiv=document.getElementById("font");
+            setFont(line[index].str,txtdiv)
             j++;
         }
     },300);
-    console.log("interval",interval)
 }
 function addStr(str){
-    var txtdiv=document.getElementById("font");
+    let txtdiv=document.getElementById("font");
     while(txtdiv.hasChildNodes()) 
     {
         txtdiv.removeChild(txtdiv.firstChild);
     }
     if(str!="false"){
-        var txt=document.createTextNode(str);
-        txtdiv.appendChild(txt);
+        setFont(str,txtdiv)
     }
-    setFontsize()
+   // setFontStyle()
 }
-//字体自动大小适应
-function setFontsize(){
-    var txtdiv=document.getElementById("font");
+/**
+ * 根据屏幕大小动态调节换行
+ * @param {*} str  字符串
+ * @param {*} txtdiv  字符串要展示的div
+ */
+function setFont(str,txtdiv){
+  
+        let count =parseInt(30/400*window.innerWidth)-4;
+        let strCount=str.length;
+        let rows=Math.ceil(strCount/count);
+        let endCount=strCount%count;
+        let rowCounts=[];
+        let innertxt="";
+        for(let i=1;i<rows;i++){
+            rowCounts.push(count);
+            innertxt+=str.substr(count*(i-1),count)+"<br>";
+        }
+        rowCounts.push(endCount)
+        innertxt+=str.substr(count*(rows-1),endCount==0?count:endCount);
+        txtdiv.innerHTML=innertxt;
+    
     let width=(window.innerWidth-txtdiv.clientWidth)/2;
     let fontsize=14/1920 *window.innerWidth;
-     var left=(width/window.innerWidth)*100+"%";
-     let styleStr="position: absolute;z-index: 100;bottom: 10%;background-color:rgba(157,96,34,0.5);color:white;left:"+left+";font-size:"+fontsize+"px"
+     let left=(width/window.innerWidth)*100+"%";
+     let styleStr="position: absolute;z-index: 100;bottom: 10%;background-color:rgba(157,96,34,0.5);color:white;left:"+left+";font-size:"+fontsize+"px;";
+     //styleStr+="lineHeight:"+5*rows+"px;";
+     styleStr+="height:"+20*rows+"px"
      txtdiv.setAttribute('style',styleStr);
 }
+// //字体自动大小适应
+// function setFontStyle(){
+
+//     var txtdiv=document.getElementById("font");
+//     let width=(window.innerWidth-txtdiv.clientWidth)/2;
+//     let fontsize=14/1920 *window.innerWidth/4;
+//      var left=(width/window.innerWidth)*100+"%";
+//      let styleStr="position: absolute;z-index: 100;bottom: 10%;background-color:rgba(157,96,34,0.5);color:white;left:"+left+";font-size:"+fontsize+"px"
+//      txtdiv.setAttribute('style',styleStr);
+// }
 //清除
 function clear(){
     clearInterval(interval);
-    console.log("interval",interval)
     var txtdiv=document.getElementById("font");
     while(txtdiv.hasChildNodes()) 
     {