potato-map3d-ui2 0.0.6

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="w-100% h-100% relative" id="main">
+    <map3dt :map-id="mapId" :map-options="mapConfig" />
+    <div class="absolute bottom-10px right-10px z-99">
+      <zoomOut :map="map"/>
+      <zoomIn :map="map"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref,markRaw } from "vue";
+// import axios from "axios";
+//  axios.get('/v2/getKline').then((res:any)=>{
+//   console.log(res);
+// })
+const mapId = ref("mapId");
+const mapConfig = ref({
+  offLine: false,
+  scene: {
+    center: {
+      lat: 33.61816,
+      lng: 108.43506,
+      alt: 805360,
+      heading: 360,
+      pitch: -90,
+    },
+    contextOptions: {
+      webgl: {
+        alpha: true,
+        depth: false,
+        stencil: true,
+        antialias: true,
+        premultipliedAlpha: true,
+        preserveDrawingBuffer: true,
+        failIfMajorPerformanceCaveat: true,
+      },
+      allowTextureFilterAnisotropic: true,
+    },
+    fxaa: true,
+    globe: {
+      preloadAncestors: false,
+    },
+  },
+  terrain: {
+    url: "/mapdata/terrain",
+    show: false,
+    requestMetadata: false,
+  },
+  control: {
+    infoBox: false,
+    baseLayerPicker: false,
+  },
+  basemaps: [
+    {
+      id: 1,
+      name: "天地图影像",
+      type: "group",
+      show: true,
+      layers: [
+        {
+          type: "tdt",
+          name: "卫星",
+          layer: "img_d",
+          key: [
+            "79dbab637f181bf953e0334bfd179f3e",
+            "7dea3b9cbee02a0d5d15699a4d2cf9cb",
+            "de2d36347d44020b5bab35b48c958801",
+            "d0c7b65873a6b8961d42f656b6ef7ae7",
+            "d5ddf0de8791e734dc8a8296b90cea5e",
+          ],
+        },
+        {
+          name: "注记",
+          type: "tdt",
+          layer: "img_z",
+          key: ["de2d36347d44020b5bab35b48c958801"],
+        },
+      ],
+    },
+    {
+      id: 2,
+      name: "天地图电子",
+      type: "group",
+      show: false,
+      layers: [
+        {
+          type: "tdt",
+          name: "底图",
+          layer: "vec_d",
+          key: [
+            "79dbab637f181bf953e0334bfd179f3e",
+            "7dea3b9cbee02a0d5d15699a4d2cf9cb",
+            "de2d36347d44020b5bab35b48c958801",
+            "d0c7b65873a6b8961d42f656b6ef7ae7",
+            "d5ddf0de8791e734dc8a8296b90cea5e",
+          ],
+        },
+        {
+          name: "注记",
+          type: "tdt",
+          layer: "vec_z",
+          key: ["de2d36347d44020b5bab35b48c958801"],
+        },
+      ],
+    },
+    {
+      id: 3,
+      name: "天地图地形地图",
+      type: "group",
+      show: false,
+      layers: [
+        {
+          type: "tdt",
+          name: "底图",
+          layer: "ter_d",
+          key: [
+            "79dbab637f181bf953e0334bfd179f3e",
+            "7dea3b9cbee02a0d5d15699a4d2cf9cb",
+            "de2d36347d44020b5bab35b48c958801",
+            "d0c7b65873a6b8961d42f656b6ef7ae7",
+            "d5ddf0de8791e734dc8a8296b90cea5e",
+          ],
+        },
+        {
+          name: "注记",
+          type: "tdt",
+          layer: "ter_z",
+          key: ["de2d36347d44020b5bab35b48c958801"],
+        },
+      ],
+    },
+    {
+      id: 4,
+      name: "离线天地图卫星",
+      type: "group",
+      show: false,
+      layers: [
+        {
+          url: "/mapdata/maptile/wgs3857imgD/{z}/{x}/{y}.jpg",
+          type: "xyz",
+          name: "卫星",
+          minimumLevel: 3,
+          maximumLevel: 16,
+          minimumTerrainLevel: 3,
+          maximumTerrainLevel: 18,
+        },
+      ],
+    },
+    {
+      id: 5,
+      name: "离线天地图电子",
+      type: "group",
+      show: false,
+      layers: [
+        {
+          url: "/mapdata/maptile/wgs3857img/{z}/{x}/{y}.jpg",
+          type: "xyz",
+          name: "电子",
+          minimumLevel: 1,
+          maximumLevel: 13,
+          minimumTerrainLevel: 1,
+          maximumTerrainLevel: 16,
+        },
+        {
+          url: "/mapdata/maptile/wgs3857imgZ/{z}/{x}/{y}.png",
+          type: "xyz",
+          name: "注记",
+          minimumLevel: 1,
+          maximumLevel: 13,
+          minimumTerrainLevel: 1,
+          maximumTerrainLevel: 16,
+        },
+      ],
+    },
+    {
+      id: 6,
+      name: "离线天地图地形地图",
+      type: "group",
+      show: false,
+      layers: [
+        {
+          url: "/mapdata/maptile/wgs3857vec/{z}/{x}/{y}.jpg",
+          type: "xyz",
+          name: "电子",
+          minimumLevel: 1,
+          maximumLevel: 13,
+          minimumTerrainLevel: 1,
+          maximumTerrainLevel: 16,
+        },
+        {
+          type: "xyz",
+          name: "注记",
+          minimumLevel: 1,
+          maximumLevel: 13,
+          minimumTerrainLevel: 1,
+          maximumTerrainLevel: 16,
+        },
+      ],
+    },
+  ],
+});
+const {map} = markRaw({map:window.map})
+</script>

package/src/assets/base-map.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="风格设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="工具-地图控制" transform="translate(-430.000000, -462.000000)">
+            <g id="地图控制展开" transform="translate(362.000000, 252.000000)">
+                <g id="底图切换" transform="translate(68.000000, 210.000000)">
+                    <rect id="矩形" x="0" y="0" width="24" height="24" rx="4"></rect>
+                    <g id="图层集" transform="translate(3.000000, 4.000000)" fill="#FFFFFF">
+                        <path d="M9.14285714,14.2476191 L1.71428571,10.4380952 L0,11.3188571 L9.14285714,16 L18.2857143,11.3173333 L16.5714286,10.4380952 L9.14285714,14.2476191 Z M9.14285714,10.9333333 L1.71428571,7.12914286 L0,8.00457143 L9.14285714,12.6872381 L18.2857143,8.00457143 L16.5714286,7.12685714 L9.14285714,10.9333333 Z M18.2857143,4.68571429 L9.14285714,0 L0,4.68266666 L9.14285714,9.36609523 L18.2857143,4.68571429 Z M9.14285714,1.74780952 L14.8784762,4.68571429 L9.14285714,7.61904763 L3.40723809,4.68114286 L9.14285714,1.74780952 Z" id="形状"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/face-map.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="风格设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="工具-地图控制" transform="translate(-430.000000, -366.000000)">
+            <g id="地图控制展开" transform="translate(362.000000, 252.000000)">
+                <g id="正视" transform="translate(68.000000, 114.000000)">
+                    <rect id="矩形" x="0" y="0" width="24" height="24" rx="4"></rect>
+                    <path d="M9.80392156,5 L7.88235295,5 C6.24901962,5 5,6.24901961 5,7.88235294 L5,9.80392156 C5,10.3803921 5.38431374,10.7647059 5.96078432,10.7647059 C6.5372549,10.7647059 6.92156863,10.3803921 6.92156863,9.80392156 L6.92156863,7.88235294 C6.92156863,7.30588236 7.30588237,6.92156863 7.88235295,6.92156863 L9.80392156,6.92156863 C10.3803921,6.92156863 10.7647059,6.5372549 10.7647059,5.96078431 C10.7647059,5.38431373 10.3803921,5 9.80392156,5 Z M9.80392156,17.0784314 L7.88235295,17.0784314 C7.30588237,17.0784314 6.92156863,16.6941176 6.92156863,16.117647 L6.92156863,14.1960784 C6.92156863,13.6196079 6.5372549,13.2352941 5.96078432,13.2352941 C5.38431374,13.2352941 5,13.6196079 5,14.1960784 L5,16.117647 C5,17.7509804 6.24901962,19 7.88235295,19 L9.80392156,19 C10.3803921,19 10.7647059,18.6156863 10.7647059,18.0392157 C10.7647059,17.4627451 10.3803921,17.0784314 9.80392156,17.0784314 L9.80392156,17.0784314 Z M18.0392157,13.2352941 C17.4627451,13.2352941 17.0784314,13.6196079 17.0784314,14.1960784 L17.0784314,16.117647 C17.0784314,16.6941176 16.6941176,17.0784314 16.1176471,17.0784314 L14.1960784,17.0784314 C13.6196079,17.0784314 13.2352941,17.4627451 13.2352941,18.0392157 C13.2352941,18.6156863 13.6196079,19 14.1960784,19 L16.1176471,19 C17.7509804,19 19,17.7509804 19,16.117647 L19,14.1960784 C19,13.6196079 18.6156863,13.2352941 18.0392157,13.2352941 L18.0392157,13.2352941 Z M16.1176471,5 L14.1960784,5 C13.6196079,5 13.2352941,5.38431373 13.2352941,5.96078431 C13.2352941,6.5372549 13.6196079,6.92156863 14.1960784,6.92156863 L16.1176471,6.92156863 C16.6941176,6.92156863 17.0784314,7.30588236 17.0784314,7.88235294 L17.0784314,9.80392156 C17.0784314,10.3803921 17.4627451,10.7647059 18.0392157,10.7647059 C18.6156863,10.7647059 19,10.3803921 19,9.80392156 L19,7.88235294 C19,6.24901961 17.7509804,5 16.1176471,5 L16.1176471,5 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero" transform="translate(12.000000, 12.000000) rotate(45.000000) translate(-12.000000, -12.000000) "></path>
+                    <circle id="椭圆形" stroke="#FFFFFF" stroke-width="2" cx="12" cy="12" r="2"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/north-map.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="25px" viewBox="0 0 24 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="风格设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="工具-地图控制" transform="translate(-430.000000, -334.000000)">
+            <g id="地图控制展开" transform="translate(362.000000, 252.000000)">
+                <g id="正北" transform="translate(68.000000, 82.000000)">
+                    <rect id="矩形" x="0" y="0" width="24" height="24" rx="4"></rect>
+                    <g id="坐标-导航-2" transform="translate(11.942388, 15.235281) rotate(-45.000000) translate(-11.942388, -15.235281) translate(5.692388, 8.985281)" fill="#FFFFFF" fill-rule="nonzero">
+                        <path d="M0.333438918,6.66169021 C-0.0808045112,6.52094555 -0.118522633,5.95142061 0.273417898,5.75732389 L11.7872861,0.0532370587 C12.2087452,-0.155588757 12.655459,0.28890255 12.4471894,0.710154616 L6.75732792,12.2260143 C6.56381752,12.6174809 5.99345386,12.5814764 5.85110892,12.1690618 L4.42995548,8.05473511 L0.333438918,6.66136289 L0.333438918,6.66169021 Z" id="路径"></path>
+                    </g>
+                    <g id="N" transform="translate(15.597656, 3.273438)" fill="#FFFFFF" fill-rule="nonzero">
+                        <polygon id="路径" points="0 0 1.65234375 0 3.80859375 3.16796875 3.80859375 0 5.4765625 0 5.4765625 5.7265625 3.80859375 5.7265625 1.6640625 2.58203125 1.6640625 5.7265625 0 5.7265625"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/reset-map.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="风格设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="工具-地图控制" transform="translate(-757.000000, -302.000000)">
+            <g id="地图控制展开" transform="translate(751.000000, 296.000000)">
+                <g id="初始视角" transform="translate(6.000000, 6.000000)">
+                    <rect id="矩形" x="0" y="0" width="24" height="24" rx="4"></rect>
+                    <path d="M9.49019607,4 L7.29411765,4 C5.42745099,4 4,5.42745099 4,7.29411765 L4,9.49019607 C4,10.1490196 4.43921569,10.5882353 5.09803922,10.5882353 C5.75686274,10.5882353 6.19607844,10.1490196 6.19607844,9.49019607 L6.19607844,7.29411765 C6.19607844,6.63529413 6.63529413,6.19607844 7.29411765,6.19607844 L9.49019607,6.19607844 C10.1490196,6.19607844 10.5882353,5.75686274 10.5882353,5.09803922 C10.5882353,4.43921569 10.1490196,4 9.49019607,4 Z M9.49019607,17.8039216 L7.29411765,17.8039216 C6.63529413,17.8039216 6.19607844,17.3647059 6.19607844,16.7058823 L6.19607844,14.5098039 C6.19607844,13.8509804 5.75686274,13.4117647 5.09803922,13.4117647 C4.43921569,13.4117647 4,13.8509804 4,14.5098039 L4,16.7058823 C4,18.572549 5.42745099,20 7.29411765,20 L9.49019607,20 C10.1490196,20 10.5882353,19.5607843 10.5882353,18.9019608 C10.5882353,18.2431373 10.1490196,17.8039216 9.49019607,17.8039216 L9.49019607,17.8039216 Z M18.9019608,13.4117647 C18.2431373,13.4117647 17.8039216,13.8509804 17.8039216,14.5098039 L17.8039216,16.7058823 C17.8039216,17.3647059 17.3647059,17.8039216 16.7058823,17.8039216 L14.5098039,17.8039216 C13.8509804,17.8039216 13.4117647,18.2431373 13.4117647,18.9019608 C13.4117647,19.5607843 13.8509804,20 14.5098039,20 L16.7058823,20 C18.572549,20 20,18.572549 20,16.7058823 L20,14.5098039 C20,13.8509804 19.5607843,13.4117647 18.9019608,13.4117647 L18.9019608,13.4117647 Z M14.5098039,4 C13.8509804,4 13.4117647,4.43921569 13.4117647,5.09803922 C13.4117647,5.75686274 13.8509804,6.19607844 14.5098039,6.19607844 L16.7058823,6.19607844 C17.3647059,6.19607844 17.8039216,6.63529413 17.8039216,7.29411765 L17.8039216,9.49019607 C17.8039216,10.1490196 18.2431373,10.5882353 18.9019608,10.5882353 C19.5607843,10.5882353 20,10.1490196 20,9.49019607 L20,7.29411765 C20,5.42745099 18.572549,4 16.7058823,4 L14.5098039,4 Z M12,14 C13.1045695,14 14,13.1045695 14,12 C14,10.8954305 13.1045695,10 12,10 C10.8954305,10 10,10.8954305 10,12 C10,13.1045695 10.8954305,14 12,14 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/showcontrol-map.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="45px" height="38px" viewBox="0 0 45 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient x1="52.8824474%" y1="173.212368%" x2="52.8824474%" y2="0%" id="linearGradient-1">
+            <stop stop-color="#232323" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#063F3B" stop-opacity="0.500949246" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#448C6E" offset="0%"></stop>
+            <stop stop-color="#3CBEB5" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="风格设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="工具-地图控制" transform="translate(-126.000000, -495.000000)">
+            <g id="编组-2" transform="translate(127.000000, 496.000000)">
+                <path d="M6.72075922,0 L41.8344768,0 C42.3867616,-1.01453063e-16 42.8344768,0.44771525 42.8344768,1 L42.8344768,35 C42.8344768,35.5522847 42.3867616,36 41.8344768,36 L6.72075922,36 C6.29032881,36 5.90818997,35.7245699 5.77207592,35.3162278 L0,18 L0,18 L5.77207592,0.683772234 C5.90818997,0.275430095 6.29032881,9.67247203e-16 6.72075922,0 Z" id="矩形" stroke="#3CBEB5" fill-opacity="0.5" fill="url(#linearGradient-1)"></path>
+                <path d="M23,9 C27.9705648,9 32,13.0294352 32,18 C32,22.9705648 27.9705648,27 23,27 C18.0294352,27 14,22.9705648 14,18 C14,13.0294352 18.0294352,9 23,9 Z M23,22.0184502 C22.272384,22.0184502 21.5612242,22.120987 20.8830756,22.316939 C21.3919004,24.3099107 22.2103381,25.6051661 23,25.6051661 C23.7896619,25.6051661 24.6080996,24.3099107 25.116433,22.3176885 C24.4387971,22.1209865 23.7276287,22.0184502 23,22.0184502 Z M19.5705219,22.8341133 L19.5386627,22.8495206 C19.0242416,23.1128027 18.5398789,23.4351215 18.0948042,23.8113914 C18.8025448,24.4098525 19.6201129,24.8804099 20.5131361,25.1892682 C20.1343531,24.5406744 19.8166813,23.7422455 19.5705219,22.8341133 Z M26.4296352,22.8333694 L26.3782144,23.0180423 C26.1397855,23.8502587 25.8398888,24.5848195 25.4872753,25.1891386 C26.3798871,24.8804099 27.1974552,24.4098525 27.9045555,23.8126086 C27.4510202,23.4273911 26.9558824,23.0995822 26.4296352,22.8333694 Z M18.9924677,18.6979434 L15.4263956,18.697545 C15.5678195,20.2528291 16.1774976,21.6728484 17.1132903,22.8154634 C17.7634358,22.2525877 18.487131,21.7880639 19.262801,21.4337996 C19.1151718,20.5797376 19.0226977,19.6590598 18.9924677,18.6979434 Z M30.5736044,18.697545 L27.0075323,18.6979434 C26.9773023,19.6590598 26.8848282,20.5797376 26.736771,21.4351746 C27.5129065,21.7880614 28.2366041,22.2525852 28.8868411,22.8155739 C29.8225024,21.6728484 30.4321805,20.2528291 30.5736044,18.697545 Z M25.6113196,18.6982922 L20.3886804,18.6982922 C20.4178623,19.5246236 20.4979202,20.3109461 20.6174349,21.037099 L20.6029801,20.9466588 C21.3730677,20.7344731 22.1778597,20.6236162 23,20.6236162 C23.822152,20.6236162 24.6269519,20.7344725 25.3970453,20.9466577 C25.5085084,20.2469118 25.5833247,19.4910121 25.6113196,18.6982922 Z M17.1132016,13.1844245 L17.0861541,13.2178611 C16.1657153,14.3547095 15.5664479,15.7622554 15.4263956,17.302455 L18.9924677,17.3020566 C19.0226977,16.3409402 19.1151718,15.4202624 19.263229,14.5648254 C18.487131,14.2119361 17.7634358,13.7474123 17.1132016,13.1844245 Z M23,15.3763838 C22.1778597,15.3763838 21.3730677,15.2655269 20.6029801,15.0533412 C20.4914916,15.7530882 20.4166753,16.5089879 20.3886804,17.3017078 L25.6113196,17.3017078 C25.5821377,16.4753764 25.5020798,15.6890539 25.3825651,14.962901 L25.3970453,15.0533423 C24.6269519,15.2655275 23.822152,15.3763838 23,15.3763838 Z M28.8867097,13.1845366 L28.6787263,13.3592184 C28.0834079,13.8441509 27.4311167,14.2492934 26.7372326,14.5662025 C26.8848282,15.4202624 26.9773023,16.3409402 27.0075323,17.3020566 L30.5736044,17.302455 C30.4321805,15.7471709 29.8225024,14.3271516 28.8867097,13.1845366 Z M23,10.3948339 L22.9046246,10.4010778 C22.1450201,10.5001263 21.3714601,11.7701973 20.883567,13.6823115 C21.5612242,13.879013 22.272384,13.9815498 23,13.9815498 C23.7276287,13.9815498 24.4387971,13.8790135 25.1169517,13.6830619 C24.6080996,11.6900893 23.7896619,10.3948339 23,10.3948339 Z M20.5127247,10.8108614 L20.4193857,10.8438491 C19.5628585,11.1527777 18.7777268,11.6111097 18.0954445,12.1873914 C18.5490214,12.5726076 19.0441571,12.9004162 19.5704014,13.1666291 C19.8166813,12.2577545 20.1343531,11.4593256 20.5127247,10.8108614 Z M25.4868639,10.8107318 L25.5298454,10.8849029 C25.8895178,11.5197341 26.1926067,12.29202 26.4294781,13.1658867 C26.9558824,12.9004178 27.4510202,12.5726089 27.9052396,12.1886091 C27.1974552,11.5901475 26.3798871,11.1195901 25.4868639,10.8107318 Z" id="形状结合" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/assets/zoomin-map.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="风格设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="工具-地图控制" transform="translate(-430.000000, -398.000000)">
+            <g id="地图控制展开" transform="translate(362.000000, 252.000000)">
+                <g id="地图放大" transform="translate(68.000000, 146.000000)">
+                    <rect id="矩形" x="0" y="0" width="24" height="24" rx="4"></rect>
+                    <polygon id="路径" fill="#FFFFFF" points="13.1428572 13.1428572 13.1428572 20 10.8571428 20 10.8571428 13.1428572 4 13.1428572 4 10.8571428 10.8571428 10.8571428 10.8571428 4 13.1428572 4 13.1428572 10.8571428 20 10.8571428 20 13.1428572"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/zoomout-map.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="风格设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="工具-地图控制" transform="translate(-430.000000, -430.000000)">
+            <g id="地图控制展开" transform="translate(362.000000, 252.000000)">
+                <g id="地图缩小" transform="translate(68.000000, 178.000000)">
+                    <rect id="矩形" x="0" y="0" width="24" height="24" rx="4"></rect>
+                    <polygon id="路径" fill="#FFFFFF" points="4 13 4 11 20 11 20 13"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/map3dt/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="map3d-class" :id="mapId"></div>
+</template>
+<script setup lang="ts" name="Map3dt">
+import { toRefs, onMounted } from "vue";
+import { initMap } from "./useMap";
+const props = defineProps({
+  mapOptions: {
+    type: Object,
+    required: true,
+  },
+  mapId: {
+    type: [String],
+    default: "map3d",
+  },
+});
+const { mapOptions, mapId } = toRefs(props);
+onMounted(() => {
+  window.map = initMap({
+    id: mapId.value,
+    mapOptions: mapOptions.value,
+  });
+});
+</script>
+<!-- <script lang="ts">
+  export default {
+
+  }
+</script> -->
+<style scoped>
+.map3d-class {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/map3dt/useMap.ts

@@ -0,0 +1,19 @@
+const {tudou3d}=window;
+interface InitMapItf {
+  id:string;
+  mapOptions: any;
+}
+
+/**
+ * 地图初始化
+ * @param options 
+ * @param {String} options.id 地图初始化id
+ * @param {Object} options.mapOptions 地图初始化json参数对象
+ * @returns {Map}  初始化后map对象
+ */
+
+export function initMap(options: InitMapItf) {
+  const { id, mapOptions } = options;
+  const map = new tudou3d.Map(id, mapOptions);
+  return map;
+}

package/src/components/zoomIn/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="group w-28px h-28px rd-4px bg-#000 f-c-c p-2px float-left m-2px cursor-pointer relative z-999 hover:bg-blue" @click="zoomIn">
+    <img src="../../assets/zoomin-map.svg" class="w-24px h-24px"/>
+    <span class="invisible group-hover:visible bg-#000 absolute top-50% left--50px translate-y--50% text-14px p-4px rd-4px c-#fff">
+      放大
+      <div class="absolute top-50% left--9px translate-y--50% w-0px h-0px b-5px b-t-transparent b-r-transparent b-b-transparent b-l-#000"></div>
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs } from "vue";
+const props = defineProps({
+  map: {
+    type: Object,
+    default: null,
+  },
+});
+const { map } = toRefs(props);
+function zoomIn() {
+  const mapControl = map.value || window.map;
+  if (mapControl) {
+    const height = mapControl.viewer.camera.positionCartographic.height / 10;
+    mapControl.viewer.camera.zoomIn(height);
+  } else {
+    console.log("没有map对象");
+  }
+}
+</script>
+
+<script lang="ts">
+export default {
+  name:'ZoomIn'
+}
+</script>
+
+

package/src/components/zoomOut/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="control" @click="zoomOut">
+    <img
+      src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBpZD0i6aOO5qC86K6+6K6hIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i5bel5YW3LeWcsOWbvuaOp+WItiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQzMC4wMDAwMDAsIC00MzAuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLlnLDlm77mjqfliLblsZXlvIAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM2Mi4wMDAwMDAsIDI1Mi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSLlnLDlm77nvKnlsI8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY4LjAwMDAwMCwgMTc4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIHg9IjAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgcng9IjQiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0i6Lev5b6EIiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjQgMTMgNCAxMSAyMCAxMSAyMCAxMyI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4="
+    />
+    <span>
+      缩小
+      <div class="triangle"></div>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts" name="ZoomOut">
+import { toRefs, ref } from "vue";
+const props = defineProps({
+  map: {
+    type: Object,
+    default: null,
+  },
+});
+const { map } = toRefs(props);
+function zoomOut() {
+  const mapControl = map.value || window.map;
+  if (mapControl) {
+    const height = mapControl.viewer.camera.positionCartographic.height / 10;
+    mapControl.viewer.camera.zoomOut(height);
+  } else {
+    console.log("没有map对象");
+  }
+}
+</script>
+
+<style scoped>
+* {
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+  user-select: none;
+}
+.control {
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  background-color: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  float: left;
+  margin: 2px;
+  cursor: pointer;
+  position: relative;
+  z-index: 999;
+}
+.control img {
+  width: 24px;
+  height: 24px;
+}
+.control span {
+  visibility: hidden;
+  background-color: #000;
+  position: absolute;
+  top: 50%;
+  left: -50px;
+  transform: translateY(-50%);
+  font-size: 14px;
+  padding: 4px;
+  border-radius: 4px;
+  color: #fff;
+}
+.control:hover {
+  background-color: skyblue;
+}
+.control:hover span {
+  visibility: visible;
+}
+.control span .triangle {
+  position: absolute;
+  top: 50%;
+  right: -9px;
+  transform: translateY(-50%);
+  width: 0px;
+  height: 0px;
+  border: 5px solid #000;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: #000000;
+}
+</style>

package/src/images.d.ts

@@ -0,0 +1,7 @@
+declare module '*.svg'
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.jpeg'
+declare module '*.gif'
+declare module '*.bmp'
+declare module '*.tiff'

package/src/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import 'virtual:uno.css'
+import CesiumUi from './packages/main'
+createApp(App).use(CesiumUi).mount('#app')

package/src/packages/main.ts

@@ -0,0 +1,12 @@
+import type { App } from 'vue'
+import Map3dt from '../components/map3dt/index.vue'
+import ZoomOut from '../components/zoomOut/index.vue'
+import ZoomIn from '../components/zoomIn/index.vue'
+const CesiumUi = {
+  install: (app: App) => {
+    app.component('map3dt', Map3dt);
+    app.component('zoomOut', ZoomOut);
+    app.component('zoomIn', ZoomIn);
+  }
+}
+export default CesiumUi

package/src/style.css

@@ -0,0 +1,85 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+* {
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+  user-select: none;
+}
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}