地图点位图标类型区分

src/assets/styles/marsMap.scss

@@ -4,30 +4,65 @@
     color: #ffffff;
     font-weight: 600;
     text-shadow: 1px 1px 0px #000000;
-    background: linear - gradient(to bottom, rgba(135, 206, 235, 0.1), rgba(89, 249, 255, 1));  
-    border: 1px solid #59F9FF;
     padding: 3px 13px;
     letter-spacing: 2px;
     border-radius: 14px;
   }
+
+  .color-uav{
+    background: linear - gradient(to bottom, rgba(135, 206, 235, 0.1), rgba(34, 232, 174, 1));  
+    border: 1px solid #22E8AE;
+    &:after{
+      content: "";
+      position: absolute;
+      bottom: -73px;
+      left: calc(50% - 2px);
+      display: block;
+      width: 3px;
+      height: 70px;
+      border-right: 3px solid #22E8AE;
+  }
+  }
+
+  .color-school{
+    background: linear - gradient(to bottom, rgba(135, 206, 235, 0.1), rgba(89, 249, 255, 1));  
+    border: 1px solid #59F9FF;
+    &:after{
+      content: "";
+      position: absolute;
+      bottom: -73px;
+      left: calc(50% - 2px);
+      display: block;
+      width: 3px;
+      height: 70px;
+      border-right: 3px solid #59F9FF;
+  }
+  }
+  .color-park{
+    background: linear - gradient(to bottom, rgba(135, 206, 235, 0.1), rgba(51, 224, 100, 1));  
+    border: 1px solid #33E064;
+    &:after{
+      content: "";
+      position: absolute;
+      bottom: -73px;
+      left: calc(50% - 2px);
+      display: block;
+      width: 3px;
+      height: 70px;
+      border-right: 3px solid #33E064;
+  }
+  }
+ 
+
   
   .marker-icon{
+    display: block;
     margin: auto;
     margin-top:5px;
     width: 40px;
     height: 60px;
-    background: url('../images/default-icon.png');
+   
-    background-size: 100% 100%;
   }
 }
 
-.div-marker:after{
+
-    content: "";
-    position: absolute;
-    bottom: -73px;
-    left: calc(50% - 2px);
-    display: block;
-    width: 3px;
-    height: 70px;
-    border-right: 3px solid #2bcdbb;
-}

src/views/components/map/marsMap.vue

@@ -68,8 +68,13 @@ const params = reactive({
   speed: 500,
 });
 
-let isGamepad  = false;
+// 使用 import.meta.glob 动态导入本地图片
+const imageModules = import.meta.glob('@/assets/images/*.png', { eager: true });
+
+// 获取图片路径
+const imageUrls = Object.values(imageModules).map((module) => module.default);
 
+let isGamepad  = false;
 let map = null;
 let list = [];
 let uav = null;
@@ -99,9 +104,9 @@ onMounted(()=>{
  */
 const onAddGamepadboardListener = () => {
   window.addEventListener("gamepadconnected", function (e) {
-    var gp = navigator.getGamepads()[e.gamepad.index];
+    // var gp = navigator.getGamepads()[e.gamepad.index];
     proxy.$modal.msgSuccess("手柄控制已启动");
-    // 获取无人机最后的信息
+    // 获取无人机固定航线最后的信息
     const uavItem =  mapLayer.uav.getGraphicById('uav1');
     const {heading,pitch,roll,position } = uavItem
     const cartographic = mars3d.LngLatPoint.fromCartesian(position)
@@ -131,9 +136,9 @@ const boostrapUav = () => {
   // // 绘制停机场矩形
   // initRectangle();
   // //渲染所有图标点
-  // initMarker();
+  initMarker();
   //渲染无人机
-  initUav();
+  // initUav();
 };
 
 const startgamepad = () => {
@@ -285,13 +290,13 @@ const initRectangle = () => {
  * 渲染所有点位
  */
 const initMarker = () => {
+  console.log(imageModules)
   PointJson.map((item, index) => {
-    item.point = item.wz.split(",").map(Number);
+  
-    // 绘制水波浪圆
-    circlePoint(item, index);
-
     //绘制名字图标
     lablePoint(item, index);
+    // 绘制水波浪圆
+    circlePoint(item, index);
   });
 };
 
@@ -300,17 +305,18 @@ const initMarker = () => {
  */
 const lablePoint = (item, index) => {
   const markerDiv = new mars3d.graphic.DivGraphic({
-    position: item.wz.split(",").map(Number),
+    position: item.wz,
     id: `marker${index}`,
     name: item.name,
     style: {
       html: `
         <div class="div-marker">
-          <div class="marker-name">${item.name}</div>
+          <div class="marker-name ${item.type == 'school' ? 'color-school' : item.type == 'park' ? 'color-park' :'color-uav' } ">${item.name}</div>
-          <div class="marker-icon"></div>  
+          <img class="marker-icon" src="${item.type == 'school' ? imageUrls[5] : item.type == 'park' ?  imageUrls[4] :imageUrls[6] }" />
         </div>
         `,
       offsetY: -73,
+      clampToGround:true,
       horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
       verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
       distanceDisplayCondition: true, // 按视距距离显示
@@ -325,13 +331,13 @@ const lablePoint = (item, index) => {
  */
 const circlePoint = (item, index) => {
   const graphic = new mars3d.graphic.CircleEntity({
-    position: item.point,
+    position: item.wz,
     style: {
       radius: 50,
       height: 0,
       materialType: mars3d.MaterialType.CircleWave,
       materialOptions: {
-        color: "#59F9FF",
+        color: item.type == 'school' ? '#59F9FF' : item.type == 'park' ?  '#33E064' : '#22E8AE',
         count: 2,
         speed: 6,
       },

src/views/components/map/point.json

@@ -1,211 +1,261 @@
 [
-    {
+  {
-      "name": "云航低空研训基地",
+    "name": "云航低空研训基地",
-      "wz": "120.657967,31.048193"
+    "wz":[120.657967,31.048193,100] 
-    },
+  },
-    {
+  {
-      "name": "吴江公园",
+    "name": "吴江公园",
-      "wz": "120.634741,31.155611"
+    "wz":[120.634741,31.155611,100] ,
-    },
+    "type": "park"
-    {
+  },
-      "name": "江苏同里国家湿地公园",
+  {
-      "wz": "120.806956,31.157053"
+    "name": "江苏同里国家湿地公园",
-    },
+    "wz":[120.806956,31.157053,100] ,
-    {
+    "type": "park"
-      "name": "胜地生态公园",
+  },
-      "wz": "120.650494,31.082684"
+  {
-    },
+    "name": "胜地生态公园",
-    {
+    "wz":[120.650494,31.082684,100] ,
-      "name": "新湖郁金香公园",
+    "type": "park"
-      "wz": "120.634291,31.183498"
+  },
-    },
+  {
-    {
+    "name": "新湖郁金香公园",
-      "name": "潜龙渠公园",
+    "wz":[120.634291,31.183498,100] ,
-      "wz": "120.612246,30.909961"
+    "type": "park"
-    },
+  },
-    {
+  {
-      "name": "芦墟大渠荡生态公园",
+    "name": "潜龙渠公园",
-      "wz": "120.852208,31.028415"
+    "wz":[120.612246,30.909961,100] ,
-    },
+    "type": "park"
-    {
+  },
-      "name": "镜湖公园",
+  {
-      "wz": "120.675721,30.919475"
+    "name": "芦墟大渠荡生态公园",
-    },
+    "wz":[120.852208,31.028415,100] ,
-    {
+    "type": "park"
-      "name": "七都湿地公园",
+  },
-      "wz": "120.384969,30.953492"
+  {
-    },
+    "name": "镜湖公园",
-    {
+    "wz":[120.675721,30.919475,100] ,
-      "name": "芦荡湖湿地公园",
+    "type": "park"
-      "wz": "120.640464,31.117824"
+  },
-    },
+  {
-    {
+    "name": "七都湿地公园",
-      "name": "苏州湾体育公园",
+    "wz":[120.384969,30.953492,100] ,
-      "wz": "120.601284,31.115582"
+    "type": "park"
-    },
+  },
-    {
+  {
-      "name": "震泽公园",
+    "name": "芦荡湖湿地公园",
-      "wz": "120.500364,30.913989"
+    "wz":[120.640464,31.117824,100] ,
-    },
+    "type": "park"
-    {
+  },
-      "name": "东太湖生态园",
+  {
-      "wz": "120.598503,31.148862"
+    "name": "苏州湾体育公园",
-    },
+    "wz":[120.601284,31.115582,100] ,
-    {
+    "type": "park"
-      "name": "汾湖公园",
+  },
-      "wz": "120.833018,31.009082"
+  {
-    },
+    "name": "震泽公园",
-    {
+    "wz":[120.500364,30.913989,100] ,
-      "name": "黎里古镇公园",
+    "type": "park"
-      "wz": "120.711281,30.988861"
+  },
-    },
+  {
-    {
+    "name": "东太湖生态园",
-      "name": "平望文体活动中心",
+    "wz":[120.598503,31.148862,100] ,
-      "wz": "120.624934,30.972651"
+    "type": "park"
-    },
+  },
-    {
+  {
-      "name": "同里古镇公园",
+    "name": "汾湖公园",
-      "wz": "120.723765,31.154999"
+    "wz":[120.833018,31.009082,100] ,
-    },
+    "type": "park"
-    {
+  },
-      "name": "吴江实验小学教育集团太湖校区",
+  {
-      "wz": "120.629232,31.138336"
+    "name": "黎里古镇公园",
-    },
+    "wz":[120.711281,30.988861,100] ,
-    {
+    "type": "park"
-      "name": "吴江实验小学教育集团爱德校区",
+  },
-      "wz": "120.63353,31.149451"
+  {
-    },
+    "name": "平望文体活动中心",
-    {
+    "wz":[120.624934,30.972651,100] ,
-      "name": "吴江实验小学教育集团城中校区",
+    "type": "park"
-      "wz": "120.641363,31.163391"
+  },
-    },
+  {
-    {
+    "name": "同里古镇公园",
-      "name": "吴江实验小学教育集团长安实验小学",
+    "wz":[120.723765,31.154999,100] ,
-      "wz": "120.65505,31.125751"
+    "type": "park"
-    },
+  },
-    {
+  {
-      "name": "鲈乡实验小学教育集团仲英校区",
+    "name": "吴江实验小学教育集团太湖校区",
-      "wz": "120.631532,31.164911"
+    "wz":[120.629232,31.138336,100] ,
-    },
+    "type": "school"
-    {
+  },
-      "name": "鲈乡实验小学教育集团越秀校区",
+  {
-      "wz": "120.628219,31.170382"
+    "name": "吴江实验小学教育集团爱德校区",
-    },
+    "wz":[120.63353,31.149451,100] ,
-    {
+    "type": "school"
-      "name": "鲈乡实验小学教育集团流虹校区",
+  },
-      "wz": "120.635097,31.161342"
+  {
-    },
+    "name": "吴江实验小学教育集团城中校区",
-    {
+    "wz":[120.641363,31.163391,100] ,
-      "name": "思贤实验小学",
+    "type": "school"
-      "wz": "120.636957,31.127222"
+  },
-    },
+  {
-    {
+    "name": "吴江实验小学教育集团长安实验小学",
-      "name": "苏大附属吴江学校",
+    "wz":[120.65505,31.125751,100] ,
-      "wz": "120.642029,31.092945"
+    "type": "school"
-    },
+  },
-    {
+  {
-      "name": "松陵小学",
+    "name": "鲈乡实验小学教育集团仲英校区",
-      "wz": "120.644365,31.155881"
+    "wz":[120.631532,31.164911,100] ,
-    },
+    "type": "school"
-    {
+  },
-      "name": "北门小学",
+  {
-      "wz": "120.648293,31.164774"
+    "name": "鲈乡实验小学教育集团越秀校区",
-    },
+    "wz":[120.628219,31.170382,100] ,
-    {
+    "type": "school"
-      "name": "绣湖东路小学",
+  },
-      "wz": "120.696411,31.155009"
+  {
-    },
+    "name": "鲈乡实验小学教育集团流虹校区",
-    {
+    "wz":[120.635097,31.161342,100] ,
-      "name": "淞南路小学",
+    "type": "school"
-      "wz": "120.666246,31.187018"
+  },
-    },
+  {
-    {
+    "name": "思贤实验小学",
-      "name": "三淞路小学",
+    "wz":[120.636957,31.127222,100] ,
-      "wz": "120.665384,31.184736"
+    "type": "school"
-    },
+  },
-    {
+  {
-      "name": "吉市路小学",
+    "name": "苏大附属吴江学校",
-      "wz": "120.671435,31.175657"
+    "wz":[120.642029,31.092945,100] ,
-    },
+    "type": "school"
-    {
+  },
-      "name": "云龙实验学校",
+  {
-      "wz": "120.668912,31.148545"
+    "name": "松陵小学",
-    },
+    "wz":[120.644365,31.155881,100] ,
-    {
+    "type": "school"
-      "name": "苏州湾外国语学校",
+  },
-      "wz": "120.615709,31.113141"
+  {
-    },
+    "name": "北门小学",
-    {
+    "wz":[120.648293,31.164774,100] ,
-      "name": "实验初级中学",
+    "type": "school"
-      "wz": "120.632518,31.14779"
+  },
-    },
+  {
-    {
+    "name": "绣湖东路小学",
-      "name": "青云实验中学",
+    "wz":[120.696411,31.155009,100] ,
-      "wz": "120.502819,30.827075"
+    "type": "school"
-    },
+  },
-    {
+  {
-      "name": "苏州湾实验初级中学",
+    "name": "淞南路小学",
-      "wz": "120.60238,31.142594"
+    "wz":[120.666246,31.187018,100] ,
-    },
+    "type": "school"
-    {
+  },
-      "name": "松陵第一中学",
+  {
-      "wz": "120.630625,31.167276"
+    "name": "三淞路小学",
-    },
+    "wz":[120.665384,31.184736,100] ,
-    {
+    "type": "school"
-      "name": "金家坝中学",
+  },
-      "wz": "120.783595,31.089252"
+  {
-    },
+    "name": "吉市路小学",
-    {
+    "wz":[120.671435,31.175657,100] ,
-      "name": "平望中学",
+    "type": "school"
-      "wz": "120.646572,30.981293"
+  },
-    },
+  {
-    {
+    "name": "云龙实验学校",
-      "name": "桃源中学",
+    "wz":[120.668912,31.148545,100] ,
-      "wz": "120.48338,30.794556"
+    "type": "school"
-    },
+  },
-    {
+  {
-      "name": "震泽中学",
+    "name": "苏州湾外国语学校",
-      "wz": "120.638371,31.124036"
+    "wz":[120.615709,31.113141,100] ,
-    },
+    "type": "school"
-    {
+  },
-      "name": "吴江中学",
+  {
-      "wz": "120.606418,31.14296"
+    "name": "实验初级中学",
-    },
+    "wz":[120.632518,31.14779,100] ,
-   
+    "type": "school"
-    {
+  },
-      "name": "吴江盛泽中学",
+  {
-      "wz": "120.681466,30.891258"
+    "name": "青云实验中学",
-    },
+    "wz":[120.502819,30.827075,100] ,
-    {
+    "type": "school"
-      "name": "吴江汾湖高级中学",
+  },
-      "wz": "120.850662,31.009218"
+  {
-    },
+    "name": "苏州湾实验初级中学",
-    {
+    "wz":[120.60238,31.142594,100] ,
-      "name": "震泽中学育英学校",
+    "type": "school"
-      "wz": "120.496718,30.909832"
+  },
-    },
+  {
-    {
+    "name": "松陵第一中学",
-      "name": "苏州枫华学校",
+    "wz":[120.630625,31.167276,100] ,
-      "wz": "120.882975,31.052381"
+    "type": "school"
-    },
+  },
-    {
+  {
-      "name": "苏州中学苏州湾学校",
+    "name": "金家坝中学",
-      "wz": "120.645367,31.076471"
+    "wz":[120.783595,31.089252,100] ,
-    },
+    "type": "school"
-    {
+  },
-      "name": "吴江新教育学校",
+  {
-      "wz": "120.693969,31.157251"
+    "name": "平望中学",
-    },
+    "wz":[120.646572,30.981293,100] ,
-    {
+    "type": "school"
-      "name": "苏州大学未来校区",
+  },
-      "wz": "120.666188,31.068729"
+  {
-    },
+    "name": "桃源中学",
-    {
+    "wz":[120.48338,30.794556,100] ,
-      "name": "苏州信息职业技术学院",
+    "type": "school"
-      "wz": "120.632702,31.135007"
+  },
-    },
+  {
-    {
+    "name": "震泽中学",
-        "name": "吴江高级中学",
+    "wz":[120.638371,31.124036,100] ,
-        "wz": "120.645829,31.175176"
+    "type": "school"
-      }
+  },
-  ]
+  {
+    "name": "吴江中学",
+    "wz":[120.606418,31.14296,100] ,
+    "type": "school"
+  },
+  {
+    "name": "吴江盛泽中学",
+    "wz":[120.681466,30.891258,100] ,
+    "type": "school"
+  },
+  {
+    "name": "吴江汾湖高级中学",
+    "wz":[120.850662,31.009218,100] ,
+    "type": "school"
+  },
+  {
+    "name": "震泽中学育英学校",
+    "wz":[120.496718,30.909832,100] ,
+    "type": "school"
+  },
+  {
+    "name": "苏州枫华学校",
+    "wz":[120.882975,31.052381,100] ,
+    "type": "school"
+  },
+  {
+    "name": "苏州中学苏州湾学校",
+    "wz":[120.645367,31.076471,100] ,
+    "type": "school"
+  },
+  {
+    "name": "吴江新教育学校",
+    "wz":[120.693969,31.157251,100] ,
+    "type": "school"
+  },
+  {
+    "name": "苏州大学未来校区",
+    "wz":[120.666188,31.068729,100] ,
+    "type": "school"
+  },
+  {
+    "name": "苏州信息职业技术学院",
+    "wz":[120.632702,31.135007,100] ,
+    "type": "school"
+  },
+  {
+    "name": "吴江高级中学",
+    "wz":[120.645829,31.175176,100] ,
+    "type": "school"
+  }
+]