标绘资源组件

src/design/index.less

@@ -120,3 +120,9 @@ ul {
   font-weight: normal;
   font-style: normal;
 }
+@font-face {
+  font-family: 'DINProMedium';
+  src: url('/public/login/fonts/DINProMedium.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}

src/packages/components/Charts/Maps/MapPlot/config.ts

@@ -0,0 +1,20 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { MapPlotConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const option = {
+  dataset: { ...dataJson },
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = MapPlotConfig.key
+  public chartConfig = cloneDeep(MapPlotConfig)
+  public option = cloneDeep(option)
+  constructor() {
+    super(); 
+    this.attr.w = 380; 
+    this.attr.h = 375;
+  }
+}

src/packages/components/Charts/Maps/MapPlot/config.vue

@@ -0,0 +1,13 @@
+<template>
+</template>
+
+<script setup lang="ts">
+
+const props = defineProps({
+    optionData: {
+      type: Object,
+      required: true
+    }
+  }
+)
+</script>

src/packages/components/Charts/Maps/MapPlot/data.json

@@ -0,0 +1,698 @@
+{
+  "小模型": [
+    {
+      "name": "小汽车",
+      "image": "{gltfServerUrl}/mars/img/qiche.jpg",
+      "type": "model",
+      "style": {
+        "scale": 0.1,
+        "url": "{gltfServerUrl}/mars/qiche.gltf"
+      }
+    },
+    {
+      "name": "警车",
+      "image": "{gltfServerUrl}/mars/img/jingche.jpg",
+      "type": "model",
+      "style": {
+        "scale": 3,
+        "url": "{gltfServerUrl}/mars/jingche/jingche.gltf"
+      }
+    },
+    {
+      "name": "消防车",
+      "image": "{gltfServerUrl}/mars/img/xiaofangche.jpg",
+      "type": "model",
+      "style": {
+        "url": "{gltfServerUrl}/mars/firedrill/xiaofangche.gltf"
+      }
+    },
+    {
+      "name": "起重车",
+      "image": "{gltfServerUrl}/mars/img/qzcar.jpg",
+      "type": "model",
+      "style": {
+        "url": "{gltfServerUrl}/mars/qzcar/GKZY_anim.gltf"
+      }
+    },
+    {
+      "name": "土方车",
+      "image": "{gltfServerUrl}/mars/img/tufangche.jpg",
+      "type": "model",
+      "style": {
+        "url": "{gltfServerUrl}/mars/car/tufangche.glb"
+      }
+    },
+    {
+      "name": "挖掘机",
+      "image": "{gltfServerUrl}/mars/img/wajueji.jpg",
+      "type": "model",
+      "style": {
+        "scale": 3,
+        "url": "{gltfServerUrl}/mars/car/wajueji.glb"
+      }
+    },
+
+    {
+      "name": "MQ-9无人机",
+      "image": "{gltfServerUrl}/mars/img/MQ-9-Predator.jpg",
+      "type": "model",
+      "style": {
+        "scale": 1,
+        "url": "{gltfServerUrl}/mars/MQ-9-Predator.glb"
+      }
+    },
+    {
+      "name": "战机",
+      "image": "{gltfServerUrl}/mars/img/zhanji.jpg",
+      "type": "model",
+      "style": {
+        "scale": 0.1,
+        "url": "{gltfServerUrl}/mars/zhanji.glb"
+      }
+    },
+    {
+      "name": "飞机",
+      "image": "{gltfServerUrl}/mars/img/feiji.jpg",
+      "type": "model",
+      "style": {
+        "url": "{gltfServerUrl}/mars/feiji.glb"
+      }
+    },
+
+    {
+      "name": "渔船",
+      "image": "{gltfServerUrl}/mars/img/ship-09.jpg",
+      "type": "model",
+      "style": {
+        "url": "{gltfServerUrl}/mars/ship/ship09.glb",
+        "scale": 1
+      }
+    },
+    {
+      "name": "煤炭船",
+      "image": "{gltfServerUrl}/mars/img/ship-05.jpg",
+      "type": "model",
+      "style": {
+        "url": "{gltfServerUrl}/mars/ship/ship05.glb",
+        "scale": 1
+      }
+    },
+    {
+      "name": "拖轮",
+      "image": "{gltfServerUrl}/mars/img/ship-04.jpg",
+      "type": "model",
+      "style": {
+        "url": "{gltfServerUrl}/mars/ship/ship04.glb",
+        "scale": 1
+      }
+    },
+
+    {
+      "name": "散货船",
+      "image": "{gltfServerUrl}/mars/img/ship-01.jpg",
+      "type": "model",
+      "style": {
+        "url": "{gltfServerUrl}/mars/ship/ship01.glb",
+        "scale": 1
+      }
+    },
+    {
+      "name": "集装箱船",
+      "image": "{gltfServerUrl}/mars/img/ship-03.jpg",
+      "type": "model",
+      "style": {
+        "url": "{gltfServerUrl}/mars/ship/ship03.glb",
+        "scale": 1
+      }
+    },
+    {
+      "name": "化工品船",
+      "image": "{gltfServerUrl}/mars/img/ship-08.jpg",
+      "type": "model",
+      "style": {
+        "url": "{gltfServerUrl}/mars/ship/ship08.glb",
+        "scale": 1
+      }
+    },
+
+    {
+      "name": "行人",
+      "image": "{gltfServerUrl}/mars/img/man.jpg",
+      "type": "model",
+      "style": {
+        "url": "{gltfServerUrl}/mars/man/walk.gltf"
+      }
+    },
+    {
+      "name": "巡逻人员",
+      "image": "{gltfServerUrl}/mars/img/gongren.jpg",
+      "type": "model",
+      "style": {
+        "url": "{gltfServerUrl}/mars/man/gongren.glb"
+      }
+    },
+    {
+      "name": "消防员",
+      "image": "{gltfServerUrl}/mars/img/xiaofangyuan.jpg",
+      "type": "model",
+      "style": {
+        "url": "{gltfServerUrl}/mars/firedrill/xiaofangyuan.glb"
+      }
+    },
+
+    {
+      "name": "风力发电机",
+      "image": "{gltfServerUrl}/mars/img/fengche.jpg",
+      "type": "model",
+      "style": {
+        "url": "{gltfServerUrl}/mars/fengche.gltf"
+      }
+    },
+    {
+      "name": "电线塔",
+      "image": "{gltfServerUrl}/mars/img/tower.jpg",
+      "type": "model",
+      "style": {
+        "url": "{gltfServerUrl}/mars/tower/tower.glb"
+      }
+    },
+    {
+      "name": "电线架子",
+      "image": "{gltfServerUrl}/mars/img/railway-jiazi.jpg",
+      "type": "model",
+      "style": {
+        "url": "{gltfServerUrl}/mars/railway/jiazi.glb",
+        "scale": 0.001
+      }
+    }
+  ],
+  "二维平面类": [
+    {
+      "name": "线",
+      "image": "{plotPath}/img/polyline.jpg",
+      "type": "polyline",
+      "style": {
+        "clampToGround": false
+      }
+    },
+    {
+      "name": "闭合线",
+      "image": "{plotPath}/img/polyline.jpg",
+      "type": "polyline",
+      "style": {
+        "closure": true,
+        "clampToGround": false
+      }
+    },
+    {
+      "name": "贴地线",
+      "image": "{plotPath}/img/polyline_clampToGround.jpg",
+      "type": "polyline",
+      "style": {
+        "clampToGround": true,
+        "color": "#ffff00"
+      }
+    },
+    {
+      "name": "流动线",
+      "image": "{plotPath}/img/polyline_flow.jpg",
+      "type": "polyline",
+      "style": {
+        "clampToGround": false,
+        "materialType": "LineFlow",
+        "image": "img/textures/lineClr.png",
+        "color": "#33e8df"
+      }
+    },
+    {
+      "name": "动态线",
+      "image": "{plotPath}/img/polyline_flow2.jpg",
+      "type": "polyline",
+      "style": {
+        "clampToGround": false,
+        "materialType": "LineFlow",
+        "image": "img/textures/LinkPulse.png",
+        "color": "#33e8df",
+        "width": 8
+      }
+    },
+    {
+      "name": "曲线",
+      "image": "{plotPath}/img/curve.jpg",
+      "type": "curve",
+      "edittype": "polyline",
+      "style": {
+        "clampToGround": false
+      }
+    },
+    {
+      "name": "贴地曲线",
+      "image": "{plotPath}/img/curve_clampToGround.jpg",
+      "type": "curve",
+      "edittype": "polyline",
+      "style": {
+        "clampToGround": true,
+        "color": "#ffff00"
+      }
+    },
+    {
+      "name": "走廊",
+      "image": "{plotPath}/img/corridor.jpg",
+      "type": "corridor"
+    },
+    {
+      "name": "贴地走廊",
+      "image": "{plotPath}/img/corridor_clampToGround.jpg",
+      "type": "corridor",
+      "style": {
+        "clampToGround": true,
+        "color": "#ffff00"
+      }
+    },
+    {
+      "name": "面",
+      "image": "{plotPath}/img/polygon.jpg",
+      "type": "polygon"
+    },
+    {
+      "name": "贴地面",
+      "image": "{plotPath}/img/polygon_clampToGround.jpg",
+      "type": "polygon",
+      "style": {
+        "clampToGround": true,
+        "color": "#ffff00"
+      }
+    },
+    {
+      "name": "矩形",
+      "image": "{plotPath}/img/rectangle.jpg",
+      "type": "rectangle"
+    },
+    {
+      "name": "贴地矩形",
+      "image": "{plotPath}/img/rectangle_clampToGround.jpg",
+      "type": "rectangle",
+      "style": {
+        "clampToGround": true,
+        "color": "#ffff00"
+      }
+    },
+    {
+      "name": "平面",
+      "image": "{plotPath}/img/plane.jpg",
+      "type": "plane"
+    },
+    {
+      "name": "等腰三角形",
+      "image": "{plotPath}/img/triangleDY.jpg",
+      "type": "triangleDY",
+      "edittype": "polygon",
+      "style": {
+        "color": "#2ef7e6"
+      },
+      "hide": true
+    },
+    {
+      "name": "正三角形",
+      "image": "{plotPath}/img/regular3.jpg",
+      "type": "regular",
+      "edittype": "polygon",
+      "style": {
+        "border": 3,
+        "color": "#2ef7e6"
+      }
+    },
+    {
+      "name": "正方形",
+      "image": "{plotPath}/img/regular4.jpg",
+      "type": "regular",
+      "edittype": "polygon",
+      "style": {
+        "border": 4,
+        "color": "#2ef7e6"
+      }
+    },
+    {
+      "name": "正五边形",
+      "image": "{plotPath}/img/regular5.jpg",
+      "type": "regular",
+      "edittype": "polygon",
+      "style": {
+        "border": 5,
+        "color": "#2ef7e6"
+      }
+    },
+    {
+      "name": "圆",
+      "image": "{plotPath}/img/circle.jpg",
+      "type": "circle"
+    },
+    {
+      "name": "贴地圆",
+      "image": "{plotPath}/img/circle_clampToGround.jpg",
+      "type": "circle",
+      "style": {
+        "clampToGround": true,
+        "color": "#ffff00"
+      }
+    },
+    {
+      "name": "动态圆",
+      "image": "{plotPath}/img/circle_animation.jpg",
+      "type": "circle",
+      "style": {
+        "materialType": "CircleWave",
+        "count": 2,
+        "outline": false
+      }
+    },
+    {
+      "name": "椭圆",
+      "image": "{plotPath}/img/ellipse.jpg",
+      "type": "ellipse"
+    },
+    {
+      "name": "贴地椭圆",
+      "image": "{plotPath}/img/ellipse_clampToGround.jpg",
+      "type": "ellipse",
+      "style": {
+        "clampToGround": true,
+        "color": "#ffff00"
+      }
+    },
+    {
+      "name": "扇形",
+      "image": "{plotPath}/img/sector.jpg",
+      "type": "sector",
+      "edittype": "polygon",
+      "style": {
+        "color": "#2ef7e6"
+      }
+    },
+    {
+      "name": "弓形",
+      "image": "{plotPath}/img/lune.jpg",
+      "type": "lune",
+      "edittype": "polygon",
+      "style": {
+        "color": "#2ef7e6"
+      }
+    },
+    {
+      "name": "贴地矩形图片",
+      "image": "{plotPath}/img/gugong.jpg",
+      "type": "rectangle",
+      "edittype": "rectangle",
+      "style": {
+        "materialType": "Image",
+        "image": "img/tietu/gugong.jpg",
+        "repeat": 1,
+        "opacity": 1.0
+      }
+    },
+    {
+      "name": "圆形图片",
+      "image": "{plotPath}/img/leida.jpg",
+      "type": "circle",
+      "style": {
+        "materialType": "Image",
+        "image": "img/tietu/leida.jpg",
+        "outline": false,
+        "repeat": 1,
+        "opacity": 0.8
+      }
+    },
+    {
+      "name": "多边形图片",
+      "image": "{plotPath}/img/excavate_bottom_min.jpg",
+      "type": "polygon",
+      "style": {
+        "materialType": "Image",
+        "image": "img/textures/excavate_bottom_min.jpg",
+        "repeat": 1,
+        "opacity": 1.0
+      }
+    }
+  ],
+  "三维立体类": [
+    {
+      "name": "墙体",
+      "image": "{plotPath}/img/wall.jpg",
+      "type": "wall"
+    },
+
+    {
+      "name": "闭合墙体",
+      "image": "{plotPath}/img/wall.jpg",
+      "type": "wall",
+      "style": {
+        "closure": true
+      }
+    },
+    {
+      "name": "动态墙体",
+      "image": "{plotPath}/img/wall_fence.jpg",
+      "type": "wall",
+      "style": {
+        "materialType": "LineFlow",
+        "image": "img/textures/fence.png",
+        "axisY": true,
+        "color": "#36ff5b",
+        "outline": false
+      }
+    },
+    {
+      "name": "动态箭头墙体",
+      "image": "{plotPath}/img/wall_arrow.jpg",
+      "type": "wall",
+      "style": {
+        "materialType": "LineFlow",
+        "image": "img/textures/arrow.png",
+        "axisY": false,
+        "repeat_x": 10,
+        "color": "#36ff5b",
+        "outline": false
+      }
+    },
+
+    {
+      "name": "竖立图片(墙)",
+      "type": "wall",
+      "image": "{plotPath}/img/wall_tanhao.jpg",
+      "maxPointNum": 2,
+      "style": {
+        "materialType": "LineFlow",
+        "image": "img/textures/fence.png",
+        "axisY": true,
+        "color": "#ff0000",
+        "image2": "img/textures/tanhao.png",
+        "color2": "#FFFF00",
+        "outline": false
+      }
+    },
+
+    {
+      "name": "拉伸走廊",
+      "image": "{plotPath}/img/extrudedCorridor.jpg",
+      "type": "corridor",
+      "style": {
+        "diffHeight": 100,
+        "color": "#00ff00"
+      }
+    },
+    {
+      "name": "管道",
+      "image": "{plotPath}/img/polylineVolume.jpg",
+      "type": "polylineVolume",
+      "hide": true
+    },
+    {
+      "name": "多边立体",
+      "image": "{plotPath}/img/extrudedPolygon.jpg",
+      "type": "polygon",
+      "style": {
+        "diffHeight": 100,
+        "color": "#00ff00"
+      }
+    },
+    {
+      "name": "立方体",
+      "image": "{plotPath}/img/extrudedRectangle.jpg",
+      "type": "rectangle",
+      "style": {
+        "diffHeight": 100,
+        "color": "#00ff00"
+      }
+    },
+
+    {
+      "name": "立体正三角形",
+      "image": "{plotPath}/img/regular3d.jpg",
+      "type": "regular",
+      "edittype": "polygon",
+      "style": {
+        "border": 3,
+        "diffHeight": 100,
+        "color": "#00ff00"
+      }
+    },
+    {
+      "name": "立体正方形",
+      "image": "{plotPath}/img/regular4d.jpg",
+      "type": "regular",
+      "edittype": "polygon",
+      "style": {
+        "border": 4,
+        "diffHeight": 100,
+        "color": "#00ff00"
+      }
+    },
+    {
+      "name": "立体正五边形",
+      "image": "{plotPath}/img/regular5d.jpg",
+      "type": "regular",
+      "edittype": "polygon",
+      "style": {
+        "border": 5,
+        "diffHeight": 100,
+        "color": "#00ff00"
+      }
+    },
+
+    {
+      "name": "盒子",
+      "image": "{plotPath}/img/box.jpg",
+      "type": "box"
+    },
+
+    {
+      "name": "圆柱体",
+      "image": "{plotPath}/img/extrudedCircle.jpg",
+      "type": "circle",
+      "style": {
+        "diffHeight": 100,
+        "color": "#00ff00"
+      }
+    },
+    {
+      "name": "圆锥体",
+      "image": "{plotPath}/img/cylinder.jpg",
+      "type": "cylinder"
+    },
+
+    {
+      "name": "椭圆柱体",
+      "image": "{plotPath}/img/extrudedEellipse.jpg",
+      "type": "ellipse",
+      "style": {
+        "diffHeight": 100,
+        "color": "#00ff00"
+      }
+    },
+    {
+      "name": "球体",
+      "image": "{plotPath}/img/ellipsoid.jpg",
+      "type": "ellipsoid"
+    },
+    {
+      "name": "半球体",
+      "image": "{plotPath}/img/ellipsoid.jpg",
+      "type": "ellipsoid",
+      "style": {
+        "maximumConeDegree": 90
+      }
+    }
+  ],
+  "军事标绘": [
+    {
+      "name": "粗直箭头",
+      "image": "{plotPath}/img/straightArrow.jpg",
+      "type": "straightArrow",
+      "edittype": "polygon",
+      "style": {
+        "clampToGround": true,
+        "color": "#ffff00"
+      }
+    },
+    {
+      "name": "粗单尖直箭头",
+      "image": "{plotPath}/img/fineArrow.jpg",
+      "type": "fineArrow",
+      "edittype": "polygon",
+      "style": {
+        "clampToGround": true,
+        "color": "#ffff00"
+      }
+    },
+    {
+      "name": "燕尾直箭头",
+      "image": "{plotPath}/img/fineArrowYW.jpg",
+      "type": "fineArrowYW",
+      "edittype": "polygon",
+      "style": {
+        "clampToGround": true,
+        "color": "#ffff00"
+      }
+    },
+    {
+      "name": "攻击箭头",
+      "image": "{plotPath}/img/attackArrow.jpg",
+      "type": "attackArrow",
+      "edittype": "polygon",
+      "style": {
+        "clampToGround": true,
+        "color": "#ffff00"
+      }
+    },
+    {
+      "name": "平尾攻击箭头",
+      "image": "{plotPath}/img/attackArrowPW.jpg",
+      "type": "attackArrowPW",
+      "edittype": "polygon",
+      "style": {
+        "clampToGround": true,
+        "color": "#ffff00"
+      }
+    },
+    {
+      "name": "燕尾攻击箭头",
+      "image": "{plotPath}/img/attackArrowYW.jpg",
+      "type": "attackArrowYW",
+      "edittype": "polygon",
+      "style": {
+        "clampToGround": true,
+        "color": "#ffff00"
+      }
+    },
+    {
+      "name": "钳击箭头",
+      "image": "{plotPath}/img/doubleArrow.jpg",
+      "type": "doubleArrow",
+      "edittype": "polygon",
+      "style": {
+        "clampToGround": true,
+        "color": "#ffff00"
+      }
+    },
+    {
+      "name": "闭合曲面",
+      "image": "{plotPath}/img/closeVurve.jpg",
+      "type": "closeVurve",
+      "edittype": "polygon",
+      "style": {
+        "clampToGround": true,
+        "color": "#ffff00"
+      }
+    },
+    {
+      "name": "集结地",
+      "image": "{plotPath}/img/gatheringPlace.jpg",
+      "type": "gatheringPlace",
+      "edittype": "polygon",
+      "style": {
+        "clampToGround": true,
+        "color": "#ffff00"
+      }
+    }
+  ]
+}

src/packages/components/Charts/Maps/MapPlot/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const MapPlotConfig: ConfigType = {
+  key: 'MapPlot',
+  chartKey: 'VMapPlot',
+  conKey: 'VCMapPlot',
+  title: '标绘资源',
+  category: ChatCategoryEnum.MAP,
+  categoryName: ChatCategoryEnumName.MAP,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'plot_show.png'
+}

src/packages/components/Charts/Maps/MapPlot/index.vue

@@ -0,0 +1,191 @@
+<template>
+  <div>
+    <div class="content">
+      <div class="title">
+        标绘资源{{ selectPlot? `(${selectPlot})`: '' }}
+        <Icon v-if="selectPlot" :icon="`tabler:arrow-back`" size="24px" style="cursor: pointer;" @click="selectPlotItem('')"/>
+      </div>
+      <div class="item-list" v-if="!selectPlot">
+        <div class="item" @click="selectPlotItem('二维平面类')">
+          <div class="item-icon icon-2d"></div>
+          <div class="item-inteval"></div>
+          <div class="item-span">二维平面类</div>
+          <div class="item-number">{{ plotList['二维平面类']?.length || 0 }}</div>
+        </div>
+        <div class="item" @click="selectPlotItem('三维立体类')">
+          <div class="item-icon icon-3d"></div>
+          <div class="item-inteval"></div>
+          <div class="item-span">三维立体类</div>
+          <div class="item-number">{{ plotList['三维立体类']?.length || 0 }}</div>
+        </div>
+        <div class="item" @click="selectPlotItem('军事标绘')">
+          <div class="item-icon icon-military"></div>
+          <div class="item-inteval"></div>
+          <div class="item-span">军事标绘</div>
+          <div class="item-number">{{ plotList['军事标绘']?.length || 0 }}</div>
+        </div>
+        <div class="item" @click="selectPlotItem('防火专题图标')">
+          <div class="item-icon icon-fireproof"></div>
+          <div class="item-inteval"></div>
+          <div class="item-span">防火专题图标</div>
+          <div class="item-number">{{ plotList['防火专题图标']?.length || 0 }}</div>
+        </div>
+        <div class="item" @click="selectPlotItem('小模型')">
+          <div class="item-icon icon-model"></div>
+          <div class="item-inteval"></div>
+          <div class="item-span">小模型</div>
+          <div class="item-number">{{ plotList['小模型']?.length || 0 }}</div>
+        </div>
+      </div>
+      <div class="item-list" v-else>
+        <div class="secondary-item" v-for="item in selectPlotList" :title="item.name">
+          <a-image
+            :width="53"
+            :height="53"
+            :preview="false"
+            :src="`/public/components/MapPlot/list/${item.image}`"
+          />
+        </div>
+        
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, PropType, nextTick } from 'vue'
+import Icon from '@/components/Icon/Icon.vue';
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object,
+    required: true
+  }
+})
+const plotList = props.chartConfig.option.dataset
+const selectPlot = ref('')
+const selectPlotList = computed(() => {
+  if(selectPlot.value){
+    return plotList[selectPlot.value].map(item => {
+      return {...item, image:item.image?.replace('{plotPath}/img/','')}
+    })
+  }
+  return []
+})
+const selectPlotItem = (type) => {
+  selectPlot.value = type
+}
+console.log('props',props,plotList)
+</script>
+<style lang="scss" scoped>
+.content{
+  width: 100%;
+  height: 100%;
+  background: #113825;
+  border: 1px solid #00611A;
+  padding-top: 17px;
+  padding-left: 20px;
+  padding-right: 7px;
+  .title{
+    font-family: 'PingFangSC-Medium';
+    font-weight: 500;
+    font-size: 16px;
+    color: #FFFFFF;
+    line-height: 22px;
+    user-select: none;
+    margin-bottom: 17px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .item-list{
+    display: flex;
+    flex-wrap: wrap;
+    overflow: auto;
+    max-height: calc(100% - 38px);
+    scrollbar-width: none; 
+    ::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+    .item{
+      width: 104px;
+      height: 136px;
+      background-image: url('/public/components/MapPlot/plot_item_background.png');
+      background-size: 100% 100%;
+      padding-top: 16px;
+      padding-left: 13px;
+      padding-right: 13px;
+      margin-right: 13px;
+      margin-bottom: 14px;
+      cursor: pointer;
+      .item-icon{
+        width: 60px;
+        height: 60px;
+        background-size: 100% 100%;
+        margin: auto;
+        margin-bottom: 7px;
+      }
+      .icon-2d{
+        background-image: url('/public/components/MapPlot/2d_icon.png');
+      }
+      .icon-3d{
+        background-image: url('/public/components/MapPlot/3d_icon.png');
+      }
+      .icon-fireproof{
+        background-image: url('/public/components/MapPlot/fireproof_icon.png');
+      }
+      .icon-military{
+        background-image: url('/public/components/MapPlot/military_icon.png');
+      }
+      .icon-model{
+        background-image: url('/public/components/MapPlot/model_icon.png');
+      }
+      .item-inteval{
+        width: 80px;
+        height: 2px;
+        background: linear-gradient( 90deg, #05954F 0%, rgba(12,199,135,0) 100%);
+        margin-bottom: 6px;
+      }
+      .item-span{
+        height: 17px;
+        font-family: 'PingFangSC-Medium';
+        font-weight: 500;
+        font-size: 12px;
+        color: #FFFFFF;
+        line-height: 17px;
+        user-select: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .item-number{
+        height: 18px;
+        font-family: 'DINProMedium';
+        font-weight: 500;
+        font-size: 14px;
+        color: #58FF95;
+        line-height: 18px;
+        user-select: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    .secondary-item{
+      width: 55px;
+      height: 55px;
+      border: 1px solid #113825;
+      margin-right: 3px;
+      margin-bottom: 3px;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/packages/components/Charts/Maps/index.ts

@@ -2,5 +2,6 @@ import { MapBaseConfig } from './MapBase/index'
 import { MapAmapConfig } from './MapAmap/index'
 import {Mars3dConfig} from './MapMars3d'
 import { MapLayerConfig } from './MapLayer'
+import { MapPlotConfig } from './MapPlot'
 
-export default [MapBaseConfig, MapAmapConfig,Mars3dConfig,MapLayerConfig]
+export default [MapBaseConfig, MapAmapConfig,Mars3dConfig,MapLayerConfig,MapPlotConfig]