Merge branch 'master' of http://192.168.0.115:3000/4dkankan/laser_v1

02d94ca661791fcac14ba92f8dcecbee.vertical_distance.svg

@@ -1,21 +1,11 @@
 <?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">
-    <title>切片</title>
-    <g id="激光相机" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="04--1测量-默认" transform="translate(-1538.000000, -503.000000)">
-            <g id="编组-5" transform="translate(1440.000000, 0.000000)">
-                <g id="编组-23" transform="translate(20.000000, 454.000000)">
-                    <g id="编组-12" transform="translate(70.000000, 41.000000)">
-                        <g id="icon_v_d" transform="translate(8.000000, 8.000000)">
-                            <g id="编组-7" transform="translate(9.000000, 3.000000)">
-                                <circle id="椭圆形" fill="#FFFFFF" cx="3" cy="15" r="3"></circle>
-                                <circle id="椭圆形备份" fill="#FFFFFF" cx="3" cy="3" r="3"></circle>
-                                <line x1="3" y1="3" x2="3" y2="15" id="路径" stroke="#FFFFFF" stroke-width="2"></line>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
+    <title>5bba7dd7bc6240ea288672b61c3031d1.vertical_area_rectangle</title>
+    <g id="5bba7dd7bc6240ea288672b61c3031d1.vertical_area_rectangle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-7" transform="translate(9.000000, 3.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M3,12 C4.65685425,12 6,13.3431458 6,15 C6,16.6568542 4.65685425,18 3,18 C1.34314575,18 0,16.6568542 0,15 C0,13.3431458 1.34314575,12 3,12 Z M3,14 C2.44771525,14 2,14.4477153 2,15 C2,15.5522847 2.44771525,16 3,16 C3.55228475,16 4,15.5522847 4,15 C4,14.4477153 3.55228475,14 3,14 Z" id="椭圆形"></path>
+            <path d="M3,0 C4.65685425,0 6,1.34314575 6,3 C6,4.65685425 4.65685425,6 3,6 C1.34314575,6 0,4.65685425 0,3 C0,1.34314575 1.34314575,0 3,0 Z M3,2 C2.44771525,2 2,2.44771525 2,3 C2,3.55228475 2.44771525,4 3,4 C3.55228475,4 4,3.55228475 4,3 C4,2.44771525 3.55228475,2 3,2 Z" id="椭圆形备份"></path>
         </g>
+        <polygon id="路径-26" fill="#FFFFFF" fill-rule="nonzero" points="12.5 8 12.5 16 11.5 16 11.5 8"></polygon>
     </g>
 </svg>

1540b1aeaab2bc7a19ec443260a1fa0e.free_distance.svg

@@ -1,21 +1,11 @@
 <?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">
-    <title>切片</title>
-    <g id="激光相机" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="04--1测量-默认" transform="translate(-1538.000000, -159.000000)">
-            <g id="编组-5" transform="translate(1440.000000, 0.000000)">
-                <g id="编组-21" transform="translate(20.000000, 110.000000)">
-                    <g id="编组-20" transform="translate(70.000000, 41.000000)">
-                        <g id="icon_f_l" transform="translate(8.000000, 8.000000)">
-                            <g id="编组-11" transform="translate(3.000000, 5.000000)">
-                                <circle id="椭圆形" fill="#FFFFFF" cx="15" cy="3" r="3"></circle>
-                                <circle id="椭圆形备份" fill="#FFFFFF" cx="3" cy="11" r="3"></circle>
-                                <line x1="2" y1="12" x2="16" y2="1.5" id="路径" stroke="#FFFFFF" stroke-width="2"></line>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
+    <title>1540b1aeaab2bc7a19ec443260a1fa0e.free_distance</title>
+    <g id="1540b1aeaab2bc7a19ec443260a1fa0e.free_distance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-11" transform="translate(7.000000, 8.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <polygon id="路径-2" points="7.64644661 0.646446609 8.35355339 1.35355339 2.35355339 7.35355339 1.64644661 6.64644661"></polygon>
         </g>
+        <path d="M7,14 C8.65685425,14 10,15.3431458 10,17 C10,18.6568542 8.65685425,20 7,20 C5.34314575,20 4,18.6568542 4,17 C4,15.3431458 5.34314575,14 7,14 Z M7,16 C6.44771525,16 6,16.4477153 6,17 C6,17.5522847 6.44771525,18 7,18 C7.55228475,18 8,17.5522847 8,17 C8,16.4477153 7.55228475,16 7,16 Z" id="椭圆形备份-4" fill="#FFFFFF" fill-rule="nonzero"></path>
+        <path d="M17,4 C18.6568542,4 20,5.34314575 20,7 C20,8.65685425 18.6568542,10 17,10 C15.3431458,10 14,8.65685425 14,7 C14,5.34314575 15.3431458,4 17,4 Z M17,6 C16.4477153,6 16,6.44771525 16,7 C16,7.55228475 16.4477153,8 17,8 C17.5522847,8 18,7.55228475 18,7 C18,6.44771525 17.5522847,6 17,6 Z" id="椭圆形备份-5" fill="#FFFFFF" fill-rule="nonzero"></path>
     </g>
 </svg>

5bba7dd7bc6240ea288672b61c3031d1.vertical_area_rectangle.svg

@@ -1,26 +1,16 @@
 <?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">
-    <title>切片</title>
-    <g id="激光相机" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="04--1测量-默认" transform="translate(-1798.000000, -503.000000)" fill="#FFFFFF">
-            <g id="编组-5" transform="translate(1440.000000, 0.000000)">
-                <g id="编组-23" transform="translate(20.000000, 454.000000)">
-                    <g id="编组-14" transform="translate(330.000000, 41.000000)">
-                        <g id="icon_v_r" transform="translate(8.000000, 8.000000)">
-                            <g id="编组-6" transform="translate(4.000000, 2.000000)">
-                                <circle id="椭圆形" cx="2" cy="14" r="2"></circle>
-                                <circle id="椭圆形备份-3" cx="13" cy="3" r="3"></circle>
-                                <circle id="椭圆形备份-4" cx="13" cy="17" r="3"></circle>
-                                <circle id="椭圆形备份" cx="2" cy="5" r="2"></circle>
-                                <g id="路径备份-2" transform="translate(1.187000, 5.000000)">
-                                    <path d="M12.441,8 L12.626,9 L-0.001,9 L0.184,8 L12.441,8 Z M12.069,6 L12.255,7 L0.37,7 L0.556,6 L12.069,6 Z M11.698,4 L11.883,5 L0.742,5 L0.927,4 L11.698,4 Z M11.326,2 L11.512,3 L1.113,3 L1.299,2 L11.326,2 Z M10.9558571,0 L11.141,1 L1.484,1 L1.67014286,0 L10.9558571,0 Z" id="形状结合"></path>
-                                </g>
-                                <path d="M14,18.8675815 L14,1.24722598 L1,4.20177144 L1,14.7312179 L14,18.8675815 Z M12,3.753 L12,16.132 L3,13.269 L3,5.798 L12,3.753 Z" id="路径" fill-rule="nonzero"></path>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
+    <title>02d94ca661791fcac14ba92f8dcecbee.vertical_distance</title>
+    <g id="02d94ca661791fcac14ba92f8dcecbee.vertical_distance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-6" transform="translate(3.000000, 2.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M14,0 C15.6568542,0 17,1.34314575 17,3 C17,4.65685425 15.6568542,6 14,6 C12.3431458,6 11,4.65685425 11,3 C11,1.34314575 12.3431458,0 14,0 Z M14,2 C13.4477153,2 13,2.44771525 13,3 C13,3.55228475 13.4477153,4 14,4 C14.5522847,4 15,3.55228475 15,3 C15,2.44771525 14.5522847,2 14,2 Z" id="椭圆形备份-3"></path>
+            <path d="M2.5,2 C3.88071187,2 5,3.11928813 5,4.5 C5,5.88071187 3.88071187,7 2.5,7 C1.11928813,7 0,5.88071187 0,4.5 C0,3.11928813 1.11928813,2 2.5,2 Z M2.5,4 C2.22385763,4 2,4.22385763 2,4.5 C2,4.77614237 2.22385763,5 2.5,5 C2.77614237,5 3,4.77614237 3,4.5 C3,4.22385763 2.77614237,4 2.5,4 Z" id="椭圆形备份-5"></path>
+            <path d="M2.5,12 C3.88071187,12 5,13.1192881 5,14.5 C5,15.8807119 3.88071187,17 2.5,17 C1.11928813,17 0,15.8807119 0,14.5 C0,13.1192881 1.11928813,12 2.5,12 Z M2.5,14 C2.22385763,14 2,14.2238576 2,14.5 C2,14.7761424 2.22385763,15 2.5,15 C2.77614237,15 3,14.7761424 3,14.5 C3,14.2238576 2.77614237,14 2.5,14 Z" id="椭圆形备份-6"></path>
+            <path d="M14,14 C15.6568542,14 17,15.3431458 17,17 C17,18.6568542 15.6568542,20 14,20 C12.3431458,20 11,18.6568542 11,17 C11,15.3431458 12.3431458,14 14,14 Z M14,16 C13.4477153,16 13,16.4477153 13,17 C13,17.5522847 13.4477153,18 14,18 C14.5522847,18 15,17.5522847 15,17 C15,16.4477153 14.5522847,16 14,16 Z" id="椭圆形备份-4"></path>
         </g>
+        <polygon id="路径-22" fill="#FFFFFF" fill-rule="nonzero" points="17.5 7 17.5 17 16.5 17 16.5 7"></polygon>
+        <polygon id="路径-23" fill="#FFFFFF" fill-rule="nonzero" points="7.12126781 16.5149287 15.1212678 18.5149287 14.8787322 19.4850713 6.87873219 17.4850713"></polygon>
+        <polygon id="路径-24" fill="#FFFFFF" fill-rule="nonzero" points="14.9078557 4.50856391 15.0921443 5.49143609 7.09214427 6.99143609 6.90785573 6.00856391"></polygon>
+        <polygon id="路径-25" fill="#FFFFFF" fill-rule="nonzero" points="6 7.5 6 15.5 5 15.5 5 7.5"></polygon>
     </g>
 </svg>

6c9b0975d6ba095cfccbb03860ff45a9.vertical_area_polygon.svg

@@ -1,29 +1,20 @@
 <?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">
-    <title>切片</title>
-    <g id="激光相机" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="04--1测量-默认" transform="translate(-1668.000000, -503.000000)">
-            <g id="编组-5" transform="translate(1440.000000, 0.000000)">
-                <g id="编组-23" transform="translate(20.000000, 454.000000)">
-                    <g id="编组-15" transform="translate(199.000000, 41.000000)">
-                        <g id="编组备份-4" transform="translate(1.000000, 0.000000)">
-                            <g id="icon_v_m" transform="translate(8.000000, 8.000000)">
-                                <g id="编组-4" transform="translate(5.000000, 2.000000)">
-                                    <circle id="椭圆形" fill="#FFFFFF" cx="2" cy="13" r="2"></circle>
-                                    <circle id="椭圆形备份-2" fill="#FFFFFF" cx="7" cy="2" r="2"></circle>
-                                    <circle id="椭圆形备份-3" fill="#FFFFFF" cx="12" cy="6" r="3"></circle>
-                                    <circle id="椭圆形备份-4" fill="#FFFFFF" cx="12" cy="17" r="3"></circle>
-                                    <circle id="椭圆形备份" fill="#FFFFFF" cx="2" cy="4" r="2"></circle>
-                                    <g id="路径备份-2" transform="translate(2.000000, 5.000000)" fill="#FFFFFF">
-                                        <path d="M10,8 L10,9 L2.5,9 L0,8 L10,8 Z M10,6 L10,7 L0,7 L0,6 L10,6 Z M10,4 L10,5 L0,5 L0,4 L10,4 Z M10,2 L10,3 L0,3 L0,2 L10,2 Z M9.286,0 L10,0.5 L10,1 L0,1 L0,0 L9.286,0 Z" id="形状结合"></path>
-                                    </g>
-                                    <polygon id="路径" stroke="#FFFFFF" stroke-width="2" points="2 4 2 13 12 17 12 5.5 7 2"></polygon>
-                                </g>
-                            </g>
-                        </g>
-                    </g>
-                </g>
+    <title>6c9b0975d6ba095cfccbb03860ff45a9.vertical_area_polygon</title>
+    <g id="6c9b0975d6ba095cfccbb03860ff45a9.vertical_area_polygon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-2" transform="translate(3.000000, 1.500000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="编组-8">
+                <path d="M9,0 C10.6568542,0 12,1.34314575 12,3 C12,4.65685425 10.6568542,6 9,6 C7.34314575,6 6,4.65685425 6,3 C6,1.34314575 7.34314575,0 9,0 Z M9,2 C8.44771525,2 8,2.44771525 8,3 C8,3.55228475 8.44771525,4 9,4 C9.55228475,4 10,3.55228475 10,3 C10,2.44771525 9.55228475,2 9,2 Z" id="椭圆形备份-2"></path>
+                <path d="M3,11.5 C4.65685425,11.5 6,12.8431458 6,14.5 C6,16.1568542 4.65685425,17.5 3,17.5 C1.34314575,17.5 0,16.1568542 0,14.5 C0,12.8431458 1.34314575,11.5 3,11.5 Z M3,13.5 C2.44771525,13.5 2,13.9477153 2,14.5 C2,15.0522847 2.44771525,15.5 3,15.5 C3.55228475,15.5 4,15.0522847 4,14.5 C4,13.9477153 3.55228475,13.5 3,13.5 Z" id="椭圆形备份-3"></path>
+                <path d="M15,14.5 C16.6568542,14.5 18,15.8431458 18,17.5 C18,19.1568542 16.6568542,20.5 15,20.5 C13.3431458,20.5 12,19.1568542 12,17.5 C12,15.8431458 13.3431458,14.5 15,14.5 Z M15,16.5 C14.4477153,16.5 14,16.9477153 14,17.5 C14,18.0522847 14.4477153,18.5 15,18.5 C15.5522847,18.5 16,18.0522847 16,17.5 C16,16.9477153 15.5522847,16.5 15,16.5 Z" id="椭圆形备份-4"></path>
+                <path d="M15,5.5 C16.6568542,5.5 18,6.84314575 18,8.5 C18,10.1568542 16.6568542,11.5 15,11.5 C13.3431458,11.5 12,10.1568542 12,8.5 C12,6.84314575 13.3431458,5.5 15,5.5 Z M15,7.5 C14.4477153,7.5 14,7.94771525 14,8.5 C14,9.05228475 14.4477153,9.5 15,9.5 C15.5522847,9.5 16,9.05228475 16,8.5 C16,7.94771525 15.5522847,7.5 15,7.5 Z" id="椭圆形备份-5"></path>
+                <path d="M3,4 C4.65685425,4 6,5.34314575 6,7 C6,8.65685425 4.65685425,10 3,10 C1.34314575,10 0,8.65685425 0,7 C0,5.34314575 1.34314575,4 3,4 Z M3,6 C2.44771525,6 2,6.44771525 2,7 C2,7.55228475 2.44771525,8 3,8 C3.55228475,8 4,7.55228475 4,7 C4,6.44771525 3.55228475,6 3,6 Z" id="椭圆形备份-6"></path>
             </g>
         </g>
+        <polygon id="路径-19" fill="#FFFFFF" fill-rule="nonzero" points="7.61451967 16.5132914 16.1145197 18.5132914 15.8854803 19.4867086 7.38548033 17.4867086"></polygon>
+        <polygon id="路径-20" fill="#FFFFFF" fill-rule="nonzero" points="18.5 12 18.5 16.5 17.5 16.5 17.5 12"></polygon>
+        <polygon id="路径-20备份" fill="#FFFFFF" fill-rule="nonzero" points="6.5 10.5 6.5 15 5.5 15 5.5 10.5"></polygon>
+        <polygon id="路径-20备份-2" fill="#FFFFFF" fill-rule="nonzero" points="9.18765248 5.1095656 9.81234752 5.8904344 7.31234752 7.8904344 6.68765248 7.1095656"></polygon>
+        <polygon id="路径-20备份-3" fill="#FFFFFF" fill-rule="nonzero" transform="translate(14.500000, 7.000000) scale(-1, 1) translate(-14.500000, -7.000000) " points="15.7226499 5.58397485 16.2773501 6.41602515 13.2773501 8.41602515 12.7226499 7.58397485"></polygon>
     </g>
 </svg>

843bab5c0f25be1c96cc7437f5a78dfd.horizontal_distance.svg

@@ -1,21 +1,11 @@
 <?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">
-    <title>切片</title>
-    <g id="激光相机" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="04--1测量-默认" transform="translate(-1538.000000, -331.000000)">
-            <g id="编组-5" transform="translate(1440.000000, 0.000000)">
-                <g id="编组-22" transform="translate(20.000000, 282.000000)">
-                    <g id="编组-16" transform="translate(70.000000, 41.000000)">
-                        <g id="icon_h_d" transform="translate(8.000000, 8.000000)">
-                            <g id="编组-10" transform="translate(2.000000, 9.000000)">
-                                <circle id="椭圆形" fill="#FFFFFF" cx="17" cy="3" r="3"></circle>
-                                <circle id="椭圆形备份" fill="#FFFFFF" cx="3" cy="3" r="3"></circle>
-                                <line x1="3" y1="3" x2="17" y2="3" id="路径" stroke="#FFFFFF" stroke-width="2"></line>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
+    <title>843bab5c0f25be1c96cc7437f5a78dfd.horizontal_distance</title>
+    <g id="843bab5c0f25be1c96cc7437f5a78dfd.horizontal_distance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-10" transform="translate(2.000000, 9.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M17,0 C18.6568542,0 20,1.34314575 20,3 C20,4.65685425 18.6568542,6 17,6 C15.3431458,6 14,4.65685425 14,3 C14,1.34314575 15.3431458,0 17,0 Z M17,2 C16.4477153,2 16,2.44771525 16,3 C16,3.55228475 16.4477153,4 17,4 C17.5522847,4 18,3.55228475 18,3 C18,2.44771525 17.5522847,2 17,2 Z" id="椭圆形"></path>
+            <path d="M3,0 C4.65685425,0 6,1.34314575 6,3 C6,4.65685425 4.65685425,6 3,6 C1.34314575,6 0,4.65685425 0,3 C0,1.34314575 1.34314575,0 3,0 Z M3,2 C2.44771525,2 2,2.44771525 2,3 C2,3.55228475 2.44771525,4 3,4 C3.55228475,4 4,3.55228475 4,3 C4,2.44771525 3.55228475,2 3,2 Z" id="椭圆形备份"></path>
         </g>
+        <polygon id="路径-18" fill="#FFFFFF" fill-rule="nonzero" points="16.5 11 16.5 12 7.5 12 7.5 11"></polygon>
     </g>
 </svg>

87ccfb7e7cdbeb899c99456a4da61326.free_area.svg

@@ -1,29 +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">
-    <title>切片</title>
-    <g id="激光相机" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="04--1测量-默认" transform="translate(-1668.000000, -503.000000)">
-            <g id="编组-5" transform="translate(1440.000000, 0.000000)">
-                <g id="编组-23" transform="translate(20.000000, 454.000000)">
-                    <g id="编组-15" transform="translate(199.000000, 41.000000)">
-                        <g id="编组备份-4" transform="translate(1.000000, 0.000000)">
-                            <g id="icon_v_m" transform="translate(8.000000, 8.000000)">
-                                <g id="编组-4" transform="translate(5.000000, 2.000000)">
-                                    <circle id="椭圆形" fill="#FFFFFF" cx="2" cy="13" r="2"></circle>
-                                    <circle id="椭圆形备份-2" fill="#FFFFFF" cx="7" cy="2" r="2"></circle>
-                                    <circle id="椭圆形备份-3" fill="#FFFFFF" cx="12" cy="6" r="3"></circle>
-                                    <circle id="椭圆形备份-4" fill="#FFFFFF" cx="12" cy="17" r="3"></circle>
-                                    <circle id="椭圆形备份" fill="#FFFFFF" cx="2" cy="4" r="2"></circle>
-                                    <g id="路径备份-2" transform="translate(2.000000, 5.000000)" fill="#FFFFFF">
-                                        <path d="M10,8 L10,9 L2.5,9 L0,8 L10,8 Z M10,6 L10,7 L0,7 L0,6 L10,6 Z M10,4 L10,5 L0,5 L0,4 L10,4 Z M10,2 L10,3 L0,3 L0,2 L10,2 Z M9.286,0 L10,0.5 L10,1 L0,1 L0,0 L9.286,0 Z" id="形状结合"></path>
-                                    </g>
-                                    <polygon id="路径" stroke="#FFFFFF" stroke-width="2" points="2 4 2 13 12 17 12 5.5 7 2"></polygon>
-                                </g>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
+    <title>87ccfb7e7cdbeb899c99456a4da61326.free_area</title>
+    <g id="87ccfb7e7cdbeb899c99456a4da61326.free_area" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M19,8 C20.6568542,8 22,9.34314575 22,11 C22,12.6568542 20.6568542,14 19,14 C17.3431458,14 16,12.6568542 16,11 C16,9.34314575 17.3431458,8 19,8 Z M19,10 C18.4477153,10 18,10.4477153 18,11 C18,11.5522847 18.4477153,12 19,12 C19.5522847,12 20,11.5522847 20,11 C20,10.4477153 19.5522847,10 19,10 Z" id="椭圆形" fill="#FFFFFF" fill-rule="nonzero"></path>
+        <path d="M12,1 C13.6568542,1 15,2.34314575 15,4 C15,5.65685425 13.6568542,7 12,7 C10.3431458,7 9,5.65685425 9,4 C9,2.34314575 10.3431458,1 12,1 Z M12,3 C11.4477153,3 11,3.44771525 11,4 C11,4.55228475 11.4477153,5 12,5 C12.5522847,5 13,4.55228475 13,4 C13,3.44771525 12.5522847,3 12,3 Z" id="椭圆形备份-2" fill="#FFFFFF" fill-rule="nonzero"></path>
+        <path d="M9,16 C10.6568542,16 12,17.3431458 12,19 C12,20.6568542 10.6568542,22 9,22 C7.34314575,22 6,20.6568542 6,19 C6,17.3431458 7.34314575,16 9,16 Z M9,18 C8.44771525,18 8,18.4477153 8,19 C8,19.5522847 8.44771525,20 9,20 C9.55228475,20 10,19.5522847 10,19 C10,18.4477153 9.55228475,18 9,18 Z" id="椭圆形备份-3" fill="#FFFFFF" fill-rule="nonzero"></path>
+        <path d="M4,8 C5.65685425,8 7,9.34314575 7,11 C7,12.6568542 5.65685425,14 4,14 C2.34314575,14 1,12.6568542 1,11 C1,9.34314575 2.34314575,8 4,8 Z M4,10 C3.44771525,10 3,10.4477153 3,11 C3,11.5522847 3.44771525,12 4,12 C4.55228475,12 5,11.5522847 5,11 C5,10.4477153 4.55228475,10 4,10 Z" id="椭圆形备份" fill="#FFFFFF" fill-rule="nonzero"></path>
+        <polygon id="路径" fill="#FFFFFF" fill-rule="nonzero" points="10.1876525 5.1095656 10.8123475 5.8904344 5.81234752 9.8904344 5.18765248 9.1095656"></polygon>
+        <polygon id="路径-6" fill="#FFFFFF" fill-rule="nonzero" points="4.92874646 12.2427521 7.92874646 17.2427521 7.07125354 17.7572479 4.07125354 12.7572479"></polygon>
+        <polygon id="路径-16" fill="#FFFFFF" fill-rule="nonzero" points="17.2093809 12.0931333 17.7906191 12.9068667 10.7906191 17.9068667 10.2093809 17.0931333"></polygon>
+        <polygon id="路径-17" fill="#FFFFFF" fill-rule="nonzero" points="13.8535534 5.14644661 17.8535534 9.14644661 17.1464466 9.85355339 13.1464466 5.85355339"></polygon>
     </g>
 </svg>

ac0e0b5511699ec66145c4153f5c0023.horizontal_area_polygon.svg

@@ -1,29 +1,20 @@
 <?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">
-    <title>切片</title>
-    <g id="激光相机" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="04--1测量-默认" transform="translate(-1668.000000, -331.000000)" fill="#FFFFFF">
-            <g id="编组-5" transform="translate(1440.000000, 0.000000)">
-                <g id="编组-22" transform="translate(20.000000, 282.000000)">
-                    <g id="编组-17" transform="translate(199.000000, 41.000000)">
-                        <g id="编组备份-3" transform="translate(1.000000, 0.000000)">
-                            <g id="icon_h_m" transform="translate(8.000000, 8.000000)">
-                                <g id="编组-8" transform="translate(2.000000, 4.000000)">
-                                    <circle id="椭圆形" cx="16" cy="5" r="2"></circle>
-                                    <circle id="椭圆形备份-2" cx="10" cy="2" r="2"></circle>
-                                    <circle id="椭圆形备份-3" cx="3" cy="13" r="3"></circle>
-                                    <circle id="椭圆形备份-4" cx="17" cy="13" r="3"></circle>
-                                    <circle id="椭圆形备份" cx="4" cy="5" r="2"></circle>
-                                    <g id="路径备份-2" transform="translate(3.000000, 3.000000)" fill-rule="nonzero">
-                                        <path d="M13.941,10 L14,10.5 L0,10 L13.941,10 Z M13.706,8 L13.824,9 L0.125,9 L0.25,8 L13.706,8 Z M13.471,6 L13.588,7 L0.375,7 L0.5,6 L13.471,6 Z M13.235,4 L13.353,5 L0.625,5 L0.75,4 L13.235,4 Z M13,2 L13.118,3 L0.875,3 L1,2 L13,2 Z M9,0 L11,1 L3,1 L5,0 L9,0 Z" id="形状"></path>
-                                    </g>
-                                    <path d="M16.9300734,4.34700272 L10,0.881966011 L3.06992658,4.34700272 L1.87545631,14.5 L18.1245437,14.5 L16.9300734,4.34700272 Z M10,3.118 L15.069,5.653 L15.875,12.5 L4.124,12.5 L4.93,5.653 L10,3.118 Z" id="路径" fill-rule="nonzero"></path>
-                                </g>
-                            </g>
-                        </g>
-                    </g>
-                </g>
+    <title>ac0e0b5511699ec66145c4153f5c0023.horizontal_area_polygon</title>
+    <g id="ac0e0b5511699ec66145c4153f5c0023.horizontal_area_polygon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-2" transform="translate(2.000000, 1.500000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="编组-8">
+                <path d="M10,0 C11.6568542,0 13,1.34314575 13,3 C13,4.65685425 11.6568542,6 10,6 C8.34314575,6 7,4.65685425 7,3 C7,1.34314575 8.34314575,0 10,0 Z M10,2 C9.44771525,2 9,2.44771525 9,3 C9,3.55228475 9.44771525,4 10,4 C10.5522847,4 11,3.55228475 11,3 C11,2.44771525 10.5522847,2 10,2 Z" id="椭圆形备份-2"></path>
+                <path d="M3,13.5 C4.65685425,13.5 6,14.8431458 6,16.5 C6,18.1568542 4.65685425,19.5 3,19.5 C1.34314575,19.5 0,18.1568542 0,16.5 C0,14.8431458 1.34314575,13.5 3,13.5 Z M3,15.5 C2.44771525,15.5 2,15.9477153 2,16.5 C2,17.0522847 2.44771525,17.5 3,17.5 C3.55228475,17.5 4,17.0522847 4,16.5 C4,15.9477153 3.55228475,15.5 3,15.5 Z" id="椭圆形备份-3"></path>
+                <path d="M17,13.5 C18.6568542,13.5 20,14.8431458 20,16.5 C20,18.1568542 18.6568542,19.5 17,19.5 C15.3431458,19.5 14,18.1568542 14,16.5 C14,14.8431458 15.3431458,13.5 17,13.5 Z M17,15.5 C16.4477153,15.5 16,15.9477153 16,16.5 C16,17.0522847 16.4477153,17.5 17,17.5 C17.5522847,17.5 18,17.0522847 18,16.5 C18,15.9477153 17.5522847,15.5 17,15.5 Z" id="椭圆形备份-4"></path>
+                <path d="M15.5,5 C17.1568542,5 18.5,6.34314575 18.5,8 C18.5,9.65685425 17.1568542,11 15.5,11 C13.8431458,11 12.5,9.65685425 12.5,8 C12.5,6.34314575 13.8431458,5 15.5,5 Z M15.5,7 C14.9477153,7 14.5,7.44771525 14.5,8 C14.5,8.55228475 14.9477153,9 15.5,9 C16.0522847,9 16.5,8.55228475 16.5,8 C16.5,7.44771525 16.0522847,7 15.5,7 Z" id="椭圆形备份-5"></path>
+                <path d="M4.5,5 C6.15685425,5 7.5,6.34314575 7.5,8 C7.5,9.65685425 6.15685425,11 4.5,11 C2.84314575,11 1.5,9.65685425 1.5,8 C1.5,6.34314575 2.84314575,5 4.5,5 Z M4.5,7 C3.94771525,7 3.5,7.44771525 3.5,8 C3.5,8.55228475 3.94771525,9 4.5,9 C5.05228475,9 5.5,8.55228475 5.5,8 C5.5,7.44771525 5.05228475,7 4.5,7 Z" id="椭圆形备份-6"></path>
             </g>
         </g>
+        <polygon id="路径-19" fill="#FFFFFF" fill-rule="nonzero" points="17.5 18 17.5 19 6.5 19 6.5 18"></polygon>
+        <polygon id="路径-20" fill="#FFFFFF" fill-rule="nonzero" points="18.4880935 10.8915348 19.4880935 15.3915348 18.5119065 15.6084652 17.5119065 11.1084652"></polygon>
+        <polygon id="路径-20备份" fill="#FFFFFF" fill-rule="nonzero" points="5.51190647 10.8915348 6.48809353 11.1084652 5.48809353 15.6084652 4.51190647 15.3915348"></polygon>
+        <polygon id="路径-20备份-2" fill="#FFFFFF" fill-rule="nonzero" points="10.2093809 5.09313326 10.7906191 5.90686674 7.2906191 8.40686674 6.7093809 7.59313326"></polygon>
+        <polygon id="路径-20备份-3" fill="#FFFFFF" fill-rule="nonzero" transform="translate(15.250000, 6.750000) scale(-1, 1) translate(-15.250000, -6.750000) " points="16.7093809 5.09313326 17.2906191 5.90686674 13.7906191 8.40686674 13.2093809 7.59313326"></polygon>
     </g>
 </svg>

api/bundles

@@ -5,6 +5,6 @@
 		"can_write": false
 	},
 	"id": 3,
-	"serial": "e67bb877-9674-4549-b6c6-5edf049a8ef5",
-	"name": "sanweishuwu20200108"
+	"serial": "abc",
+	"name": "4dage"
 }]

api/configs

@@ -804,7 +804,7 @@
 	},
 	"id": 64,
 	"name": "core.map.attribution",
-	"value": "© PopSmart,  © 高德地图",
+	"value": "  © 高德地图",
 	"type": "string",
 	"length": null,
 	"category": "map.appearance",

api/tiled_maps

@@ -1,3 +1,14 @@
 [{
-
+	"bundle_id": 3,
+	"file_path": "data/building_1/mapTest2",
+	"file_name": "$DEPTH/$X/$Y.png",
+	"floor_id": 11,
+	"id": 5,
+	"map_size_m": 37.10058256252635,
+	"max_depth": 3,
+	"quadtree": "fccf7fffcff3bf7f",
+	"location": [113.5892056859005,22.367124170442096,0.5987030136375425],
+	"orientation": [1,0,0,0],
+	"tile_size_px": 256,
+	"type": "TILED_PYRAMID"
 }]

css/style.css

@@ -11,7 +11,7 @@ body a:hover {
 }
 
 .ng-isolate-scope .vertical-menu {
-    background-color: rgba(0, 0, 0, 0.8) !important;
+    background-color: #141414 !important;
 }
 
 
@@ -55,12 +55,11 @@ sidebar-menu-items-collection {
     background-color: transparent !important;
 }
 
-sidebar-preview-menu>.vertical-menu sidebar-menu-items-collection>.panel-autoscroll {
-    background-color: transparent !important;
-}
+
+/* 首页导航栏 */
 
 sidebar-preview-menu>.vertical-menu sidebar-menu-items-collection>.panel-autoscroll {
-    display: none !important;
+    /* display: none !important; */
 }
 
 sidebar-preview-menu>.vertical-menu sidebar-menu-items-collection sidebar-menu-item>li icon>i {
@@ -107,11 +106,19 @@ sidebar-menu .link {
     color: #fff;
 }
 
+left-panel .threeD-overlay {
+    margin: 10px 0 0 60px !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    max-width: 300px !important;
+}
+
 .threeD-overlay #left-panel-pois {
-    /* width: 360px; */
     background: rgba(0, 0, 0, 0.8) !important;
-    /* margin-left: 78px;
-    height: 42px; */
+    border: 1px solid rgba(255, 255, 255, .2);
+    border-radius: 32px !important;
 }
 
 .search-box #searchInput.padding-left-menu-icon {
@@ -119,6 +126,15 @@ sidebar-menu .link {
     /* padding-left: 20px !important; */
 }
 
+.search-box #searchInput {
+    color: #fff !important;
+    font-size: 1em !important;
+}
+
+.search-box #searchInput::-webkit-input-placeholde {
+    color: #fff !important;
+}
+
 navbar-menu .navbar-default .navbar-custom>li.navbar-menu-item-sidebar>a {
     /* padding: 0 !important; */
 }
@@ -174,6 +190,7 @@ site-model-details .vcenter.padding-horizontal .long-title {
 
 navbar-menu .navbar-default .navbar-custom>li.navbar-menu-item-sidebar>a icon {
     background: transparent !important;
+    display: none !important;
 }
 
 navbar-menu .navbar-default .navbar-custom>li.navbar-menu-item-sidebar.shadow {
@@ -210,63 +227,67 @@ sidebar-menu>.vertical-menu>.vertical-menu-heading>.root-heading>span {
     display: none !important;
 }
 
+sidebar-preview-menu>.vertical-menu sidebar-menu-items-collection sidebar-menu-item>li {
+    margin-bottom: 20px;
+}
+
 sidebar-menu-item>li icon>i.material-icons[icon-ligature="dashboard"] {
-    background: url(../img/icon/icon_data@2x.png)no-repeat;
+    background: url(../img/icon/icon_data@2x.png?4)no-repeat;
     background-size: 100% 100%;
-    width: 20px;
-    height: 20px;
+    width: 60px;
+    height: 60px;
     color: transparent;
 }
 
 .vertical-menu sidebar-menu-item.active>li icon>i.material-icons[icon-ligature="dashboard"] {
-    background: url(../img/icon/icon_data@2_1.png)no-repeat;
+    background: url(../img/icon/icon_data@2_1.png?4)no-repeat;
     background-size: 100% 100%;
 }
 
 sidebar-menu-item>li icon>i.material-icons[icon-ligature="remove_red_eye"] {
-    background: url(../img/icon/icon_eye@2x.png)no-repeat;
+    background: url(../img/icon/icon_eye@2x.png?4)no-repeat;
     background-size: 100% 100%;
-    width: 20px;
-    height: 20px;
+    width: 60px;
+    height: 60px;
     color: transparent;
 }
 
 .vertical-menu sidebar-menu-item.active>li icon>i.material-icons[icon-ligature="remove_red_eye"] {
-    background: url(../img/icon/icon_eye@2x_1.png)no-repeat;
+    background: url(../img/icon/icon_eye@2x_1.png?4)no-repeat;
     background-size: 100% 100%;
 }
 
 sidebar-menu-item>li icon>i.material-icons[icon-ligature="location_on"] {
-    background: url(../img/icon/icon_element@2x.png)no-repeat;
+    background: url(../img/icon/icon_element@2x.png?4)no-repeat;
     background-size: 100% 100%;
-    width: 20px;
-    height: 20px;
+    width: 60px;
+    height: 60px;
     color: transparent;
 }
 
-.vertical-menu sidebar-menu-item.active>li icon>i.material-icons[icon-ligature="mode_edit"] {
-    background: url(../img/icon/icon_EditMode_1.png)no-repeat;
+.vertical-menu sidebar-menu-item.active>li icon>i.material-icons[icon-ligature="location_on"] {
+    background: url(../img/icon/icon_element@2x_1.png?4)no-repeat;
     background-size: 100% 100%;
 }
 
 sidebar-menu-item>li icon>i.material-icons[icon-ligature="mode_edit"] {
-    background: url(../img/icon/icon_EditMode.png)no-repeat;
+    background: url(../img/icon/icon_EditMode_1.png?4)no-repeat;
     background-size: 100% 100%;
-    width: 20px;
-    height: 20px;
+    width: 60px;
+    height: 60px;
     color: transparent;
 }
 
-.vertical-menu sidebar-menu-item.active>li icon>i.material-icons[icon-ligature="location_on"] {
-    background: url(../img/icon/icon_element@2x_1.png)no-repeat;
+.vertical-menu sidebar-menu-item.active>li icon>i.material-icons[icon-ligature="mode_edit"] {
+    background: url(../img/icon/icon_EditMode.png?4)no-repeat;
     background-size: 100% 100%;
 }
 
 sidebar-menu-item>li icon>i.material-icons[icon-ligature="straighten"] {
-    background: url(../img/icon/icon_measure@2x.png)no-repeat;
+    background: url(../img/icon/icon_measure@2x.png?4)no-repeat;
     background-size: 100% 100%;
-    width: 20px;
-    height: 20px;
+    width: 60px;
+    height: 60px;
     color: transparent;
 }
 
@@ -275,22 +296,39 @@ sidebar-menu-item>li icon>i.material-icons[icon-ligature="straighten"] {
     background-size: 100% 100%;
 }
 
-sidebar-menu-item>li icon>i.fa-thumb-tack[iv-tooltip="坐标查询"] {
-    background: url(../img/icon/icon_location@2x.png)no-repeat;
+sidebar-menu-item>li icon>i.fa-thumb-tack[iv-tooltip="坐标"] {
+    background: url(../img/icon/icon_location@2x.png?4)no-repeat;
     background-size: 100% 100%;
-    width: 20px;
-    height: 20px;
+    width: 60px;
+    height: 60px;
+    color: transparent;
+}
+
+.vertical-menu sidebar-menu-item.active>li icon>i.fa-thumb-tack[iv-tooltip="坐标"] {
+    background: url(../img/icon/icon_location@2x_1.png?4)no-repeat;
+    background-size: 100% 100%;
+}
+
+sidebar-menu-item>li icon>i.fa-thumb-tack[iv-tooltip="平面图"] {
+    background: url(../img/icon/icon_load_n.png?4)no-repeat;
+    background-size: 100% 100%;
+    width: 60px;
+    height: 60px;
     color: transparent;
 }
 
-.vertical-menu sidebar-menu-item.active>li icon>i.fa-thumb-tack[iv-tooltip="坐标查询"] {
-    background: url(../img/icon/icon_location@2x_1.png)no-repeat;
+.vertical-menu sidebar-menu-item.active>li icon>i.fa-thumb-tack[iv-tooltip="平面图"] {
+    background: url(../img/icon/icon_load_s.png?4)no-repeat;
     background-size: 100% 100%;
 }
 
 
 /* 数据集 */
 
+.ng-isolate-scope sidebar-menu-item>li.sidebar-menu-item-mode-alignment {
+    display: none !important;
+}
+
 .multiple-dataset-selector>h4 {
     height: 64px;
     margin: 0 auto 30px;
@@ -470,7 +508,7 @@ poi-type-group-list .panel-default>.panel-heading {
 }
 
 sidebar-menu-item>li icon {
-    padding: 10px !important;
+    /* padding: 10px !important; */
 }
 
 
@@ -693,6 +731,7 @@ left-panel .poi-extensions-box>*>* {
 
 .search-box #searchInput.padding-left-menu-icon {
     border-color: transparent !important;
+    padding-left: 10px !important;
 }
 
 .list-group-item {
@@ -775,6 +814,23 @@ point-cloud-viewport .view-switcher__holder .btn-default svg {
     color: #fff;
 }
 
+measurement-tool {
+    /* width: auto !important; */
+    /* flex: none !important; */
+    /* margin-right: 20px; */
+}
+
+measurement-tool>span {
+    display: flex!important;
+    align-items: center!important;
+    justify-content: center!important;
+}
+
+measurement-tool>span>img {
+    margin-right: 10px!important;
+    border-radius: 50% !important;
+}
+
 
 /* 路线弹窗 */
 
@@ -833,6 +889,14 @@ sidebar-menu-items-collection>.panel-autoscroll>.sidebar-menu-templateselect opt
     color: #fff !important;
 } */
 
+.sidebar-menu-item-mode-normal {
+    display: none!important;
+}
+
+h4[title="编辑模式"]+sidebar-menu-items-collection .panel-autoscroll sidebar-menu-item:nth-of-type(1) {
+    display: none !important;
+}
+
 .ng-isolate-scope sidebar-menu-item>li.sidebar-menu-item-mode-vector-map {
     display: none;
 }
@@ -867,6 +931,10 @@ site-model-editor .btn-primary:hover {
 
 /* 空间模型 */
 
+.ng-isolate-scope sidebar-menu-item>li.sidebar-menu-item-mode-site-model {
+    display: none;
+}
+
 form[class="ng-pristine ng-valid"] .panel.panel-default {
     border-color: rgba(255, 255, 255, .2);
 }
@@ -895,6 +963,72 @@ form[class="ng-pristine ng-valid"] .panel .panel-body label.btn-block {
     display: none;
 }
 
+
+/* 点击锁 */
+
+form[class="ng-pristine ng-valid ng-submitted"] .panel.panel-default {
+    border-color: rgba(255, 255, 255, .2);
+}
+
+form[class="ng-pristine ng-valid ng-submitted"] .panel .panel-heading {
+    color: #fff;
+    border-color: rgba(255, 255, 255, .2);
+}
+
+form[class="ng-pristine ng-valid ng-submitted"] .panel .panel-body .add-building {
+    background: #15BEC8;
+    color: #fff;
+    border-color: #15BEC8;
+}
+
+form[class="ng-pristine ng-valid ng-submitted"] .panel .panel-body .add-building:hover {
+    background: #15BEC8;
+    color: #fff;
+}
+
+form[class="ng-pristine ng-valid ng-submitted"] .panel .panel-body .btn-block:nth-of-type(n+2) {
+    display: none;
+}
+
+form[class="ng-pristine ng-valid ng-submitted"] .panel .panel-body label.btn-block {
+    display: none;
+}
+
+
+/* 点击透视全景图勾选 */
+
+form[role="form"] .panel.panel-default {
+    border-color: rgba(255, 255, 255, .2);
+}
+
+form[role="form"] .panel .panel-heading {
+    color: #fff;
+    border-color: rgba(255, 255, 255, .2);
+}
+
+form[role="form"] .panel .panel-body .add-building {
+    background: #15BEC8;
+    color: #fff;
+    border-color: #15BEC8;
+}
+
+form[role="form"] .panel .panel-body .add-building:hover {
+    background: #15BEC8;
+    color: #fff;
+}
+
+form[role="form"] .panel .panel-body .btn-block:nth-of-type(n+2) {
+    display: none;
+}
+
+form[role="form"] .panel .panel-body label.btn-block {
+    display: none;
+}
+
+form[role="form"] .form-group button[ng-click="vm.save()"] {
+    background-color: #15BEC8;
+}
+
 form[class="ng-valid ng-dirty ng-valid-parse"] .panel.panel-default {
     border-color: rgba(255, 255, 255, .2);
 }
@@ -945,6 +1079,7 @@ vector-map-toolbar[class="ng-isolate-scope"] .btn-toolbar .btn-default:hover {
 
 download-button .collapse-style {
     background-color: transparent !important;
+    bottom: 80% !important;
 }
 
 .input-group-addon {
@@ -984,6 +1119,24 @@ download-button .input-group .btn-primary {
     border-color: #15BEC8;
 }
 
+#vertical-toolbox-menu .vertical-menu-content download-point-cloud .collapse-style .input-group input[placeholder="pointcloud"] {
+    display: none !important;
+}
+
+#vertical-toolbox-menu .vertical-menu-content download-point-cloud .collapse-style .input-group .input-group-addon {
+    display: none !important;
+}
+
+#vertical-toolbox-menu .vertical-menu-content download-point-cloud .collapse-style .input-group .input-group-btn button {
+    width: 100%!important;
+    float: right;
+    border-radius: 4px;
+}
+
+#vertical-toolbox-menu .vertical-menu-content download-point-cloud reference-dataset-selection {
+    display: none;
+}
+
 .route-box .btn-close:active,
 .route-box .btn-close:hover {
     background: transparent !important;
@@ -1065,6 +1218,30 @@ input[readonly="readonly"] {
     display: none !important;
 }
 
+#viewConfiguration hr {
+    /* display: none !important; */
+}
+
+#viewConfiguration .checkbox:nth-of-type(-n+4) {
+    /* display: none !important; */
+}
+
+automatic-alignment {
+    /* display: none !important; */
+}
+
+dataset-tree {
+    display: none !important;
+}
+
+generate-and-save-bundle-xml {
+    /* display: none !important; */
+}
+
+dataset-alignment-panel form[role="form"] .form-group.text-right.mt-10 {
+    display: none !important;
+}
+
 
 /* 变换 */
 
@@ -1078,6 +1255,14 @@ input[readonly="readonly"] {
     color: #fff !important;
 }
 
+#transform-panel .panel-body button:hover {
+    background: #143537;
+}
+
+#transform-panel .panel-body button:focus {
+    background: #143537;
+}
+
 
 /* 测量 */
 
@@ -1090,7 +1275,7 @@ measurement-list .fa-square-o:before {
 }
 
 measurement-list .hovered {
-    background-color: #15BEC8 !important;
+    background-color: #143537 !important;
 }
 
 measurement-list hr {
@@ -1109,6 +1294,14 @@ button[title="放大镜"].active:hover svg {
     color: #fff !important;
 }
 
+measurement-list-toolbar .fa-check-square-o {
+    color: #fff;
+}
+
+.measurement-details-row .fa-check-square-o {
+    color: #fff;
+}
+
 .glyphicon-resize-full::before {
     color: #fff !important;
 }
@@ -1162,4 +1355,395 @@ button[title="放大镜"].active:hover svg {
 
 .btn-file:hover {
     background-color: #15BEC8 !important;
+}
+
+
+/* 选择参考数据集 */
+
+#referenceDatasetSelectionSetting {
+    border: 1px solid rgba(255, 255, 255, .2);
+}
+
+
+/* 搜索 */
+
+#results-list.show {
+    left: 60px!important;
+}
+
+#results-list .results-heading {
+    background-color: transparent !important;
+}
+
+.dropdown-menu-search-results>li {}
+
+.dropdown-menu-search-results>li {
+    color: #fff !important;
+    background: transparent !important;
+}
+
+.dropdown-menu-search-results.dropdown-menu>li.active {
+    background: transparent !important;
+}
+
+.dropdown-menu-search-results.dropdown-menu>li:hover {
+    background: #15BEC8!important;
+}
+
+#results-list .list-group .list-group-item:hover {
+    background: #15BEC8!important;
+}
+
+results-element .checkbox,
+.radio {
+    color: #999999 !important;
+}
+
+.dropdown-menu-search-results.dropdown-menu.dropdown-menu-item-separators>li:not(.divider):not(:last-child) {
+    border-bottom: 1px solid rgba(255, 255, 255, .2);
+}
+
+
+/* PDF */
+
+.cdk-overlay-container mat-dialog-container .mat-dialog-title {
+    color: #fff;
+}
+
+.cdk-overlay-container mat-dialog-container .body-container .link-ellipses span.ng-star-inserted {
+    color: #fff;
+}
+
+.cdk-overlay-container mat-dialog-container .body-container i[class="material-icons icn-small clickable"] {
+    color: #fff;
+}
+
+.cdk-overlay-container mat-dialog-container {
+    background: rgba(0, 0, 0, .8);
+}
+
+.cdk-overlay-container mat-dialog-container .measurement-container {
+    background: #141414 !important;
+}
+
+.cdk-overlay-container mat-dialog-container .measurement-container .flex-row {
+    color: #fff;
+}
+
+.cdk-overlay-container mat-dialog-container .measurement-container .flex-row .subtitle {
+    color: #fff;
+    margin-bottom: 22px;
+}
+
+.cdk-overlay-container mat-dialog-container .measurement-container .location {
+    color: #fff;
+}
+
+.cdk-overlay-container mat-dialog-container .measurement-container .location img {
+    width: 16px;
+    height: 16px;
+    margin-right: 10px;
+}
+
+.cdk-overlay-container .mat-flat-button {
+    border-radius: 4px;
+    border: 1px solid #15BEC8;
+    background: transparent;
+    color: #15BEC8;
+}
+
+.cdk-overlay-container mat-dialog-actions .mat-flat-button.mat-primary {
+    background: #15BEC8;
+}
+
+.cdk-overlay-container mat-dialog-container .mat-dialog-content::-webkit-scrollbar {
+    width: 8px;
+}
+
+.cdk-overlay-container mat-dialog-container .mat-dialog-content::-webkit-scrollbar-track {
+    background-color: #000;
+    -webkit-border-radius: 1em;
+    -moz-border-radius: 1em;
+    border-radius: 1em;
+}
+
+.cdk-overlay-container mat-dialog-container .mat-dialog-content::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, .2);
+    -webkit-border-radius: 1em;
+    -moz-border-radius: 1em;
+    border-radius: 1em;
+}
+
+
+/*  导出XML */
+
+#xmlExport button.form-control {
+    border: none;
+    background: #15BEC8 !important;
+}
+
+
+/* 右键兴趣点 */
+
+.context-menu-list {
+    background: rgba(0, 0, 0, 0.5) !important;
+    border: none !important;
+}
+
+.context-menu-item {
+    background: transparent !important;
+    color: #fff !important;
+}
+
+.context-menu-item:hover {
+    background: #15BEC8 !important;
+}
+
+.context-menu-item.context-menu-icon:before {
+    color: #fff !important;
+}
+
+
+/* 多语言 */
+
+translation-editor[selected-language="selectedLanguage"] .form-group:first-of-type {
+    display: none;
+}
+
+
+/* 平面图 */
+
+sidebar-menu-item li h4[title="平面图"]+sidebar-menu-items-collection.active {
+    position: fixed;
+    width: calc(100% - 60px);
+    height: calc(100% - 60px);
+    right: 0;
+    left: 60px !important;
+    top: 62px !important;
+}
+
+
+/* 导航栏 */
+
+body {
+    background-color: #141414 !important;
+}
+
+sidebar-preview-menu>.vertical-menu>.vertical-menu-content>sidebar-menu-items-collection>.panel-autoscroll>ul>sidebar-menu-item:nth-of-type(2) {
+    display: none;
+    /* 隐藏数据集 */
+}
+
+.vertical-menu .vertical-menu-heading {
+    background: #141414 !important;
+}
+
+.vertical-menu .vertical-menu-heading h3 {
+    /* background-color: rgba(0, 0, 0, 0.5) !important; */
+    margin: 0 0 0 0 !important;
+}
+
+sidebar-menu-items-collection.active {
+    left: 0 !important;
+    z-index: 100;
+}
+
+sidebar-menu>.vertical-menu>.vertical-menu-heading .back-button {
+    display: none !important;
+}
+
+.vertical-menu-content>sidebar-menu-items-collection>.panel-autoscroll>ul>sidebar-menu-item>li>h4 {
+    opacity: 0 !important;
+}
+
+.custom-tooltip {
+    /* margin: 0 auto; */
+}
+
+sidebar-menu-item>li {
+    padding-left: 0 !important;
+}
+
+sidebar-menu .vertical-menu-content>sidebar-menu-items-collection>.panel-autoscroll>ul>sidebar-menu-item>li>.custom-tooltip {
+    opacity: 0;
+}
+
+sidebar-preview-menu>.vertical-menu sidebar-menu-items-collection>.panel-autoscroll {
+    background-color: transparent!important;
+}
+
+sidebar-preview-menu>.vertical-menu sidebar-menu-items-collection sidebar-menu-item>li {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 0px !important;
+}
+
+sidebar-menu>.vertical-menu {
+    left: 60px!important;
+    max-height: 60%;
+    top: 62px !important;
+}
+
+sidebar-preview-menu>.vertical-menu {
+    height: 100% !important;
+}
+
+sidebar-menu>.vertical-menu.hide {
+    left: -461px!important;
+}
+
+sidebar-menu .copyright-area>.logo img {
+    opacity: 0 !important;
+}
+
+
+/* .desktop>sidebar-preview-menu>.vertical-menu>.vertical-menu-content>sidebar-menu-items-collection>.panel-autoscroll {
+    height: calc(100%) !important;
+} */
+
+navbar-menu .navbar-default {
+    height: 62px!important;
+    background-color: #141414 !important;
+    margin: 0 !important;
+    padding: 0!important;
+    border-radius: 0;
+}
+
+#insetPanel .swap-views-button {
+    position: fixed;
+    top: 7px;
+    right: 110px;
+    z-index: 999;
+    width: 0;
+}
+
+#insetPanel {
+    width: 0 !important;
+    height: 0 !important;
+    min-width: 0 !important;
+    min-height: 0 !important;
+    z-index: 1000 !important;
+}
+
+#insetPanel canvas {
+    display: none !important;
+}
+
+
+/* 登录头像 */
+
+navbar-menu .navbar-default .navbar-custom>li.navbar-menu-item-user {
+    margin: 10px !important;
+    /* display: none; */
+}
+
+.glyphicon-resize-full:before {
+    content: "" !important;
+    width: 16px;
+    height: 16px;
+    display: block;
+    background: url(../img/icon/icon_location_n.png)no-repeat;
+    background-size: 100% 100%;
+}
+
+.glyphicon-resize-full.active:before {
+    content: "" !important;
+    width: 16px;
+    height: 16px;
+    display: block;
+    background: url(../img/icon/icon_location_s.png)no-repeat;
+    background-size: 100% 100%;
+}
+
+toolbox-menu>.vertical-menu {
+    /* height: calc(100% - 62px) !important;
+    top: 62px !important; */
+}
+
+point-cloud-viewport .view-switcher__holder {
+    top: 70px !important;
+}
+
+.uncollapse-btn {
+    justify-content: flex-end;
+}
+
+.uncollapse-btn .uncollapse-button-text {
+    display: none !important;
+}
+
+.vertical-viewport-separator .btn-resizer {
+    display: none !important;
+}
+
+.vertical-viewport-separator.resizeable {
+    background: #141414 !important;
+}
+
+measurement-details .measurement-details .measurement-details-row img[alt="distance_icon"] {
+    display: none;
+}
+
+.measurement-note-placeholder {
+    font-style: normal !important;
+}
+
+measurements {
+    padding: 0 !important;
+}
+
+measurement-tool-selection[ng-reflect-is-collapsed-view="false"] {
+    background: #000;
+    padding: 25px 20px 0;
+    margin-bottom: 0 !important;
+}
+
+measurement-tool-selection[ng-reflect-is-collapsed-view="true"] {
+    background: #000;
+    margin-bottom: 0 !important;
+}
+
+measurement-list {
+    margin: 0 !important;
+}
+
+floor-changer .btn-group-vertical {
+    display: none !important;
+}
+
+.measurement-list-items {
+    background: #000;
+}
+
+button[title="隐藏所选"] .material-icons {
+    background: url(../img/icon/icon_hide.png?4)no-repeat;
+    background-size: 100% 100%;
+    width: 20px;
+    height: 20px;
+    color: transparent !important;
+}
+
+button[title="分享所选"] .material-icons {
+    background: url(../img/icon/share.png?4)no-repeat;
+    background-size: 100% 100%;
+    width: 20px;
+    height: 20px;
+    color: transparent !important;
+}
+
+button[title="删除所选"] .material-icons {
+    background: url(../img/icon/icon_del.png?4)no-repeat;
+    background-size: 100% 100%;
+    width: 20px;
+    height: 20px;
+    color: transparent !important;
+}
+
+button[title="保存所选"] .material-icons {
+    background: url(../img/icon/icon_save.png?4)no-repeat;
+    background-size: 100% 100%;
+    width: 20px;
+    height: 20px;
+    color: transparent !important;
 }

de3fd9d7dd7f30358753a7bf817833ae.horizontal_area_rectangle.svg

@@ -1,25 +1,17 @@
 <?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">
-    <title>切片</title>
-    <g id="激光相机" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="04--1测量-默认" transform="translate(-1798.000000, -331.000000)" fill="#FFFFFF">
-            <g id="编组-5" transform="translate(1440.000000, 0.000000)">
-                <g id="编组-22" transform="translate(20.000000, 282.000000)">
-                    <g id="编组-18" transform="translate(330.000000, 41.000000)">
-                        <g id="icon_h_r" transform="translate(8.000000, 8.000000)">
-                            <g id="编组-9" transform="translate(2.000000, 5.000000)">
-                                <circle id="椭圆形" cx="15" cy="2" r="2"></circle>
-                                <circle id="椭圆形备份-3" cx="3" cy="12" r="3"></circle>
-                                <circle id="椭圆形备份-4" cx="17" cy="12" r="3"></circle>
-                                <circle id="椭圆形备份" cx="5" cy="2" r="2"></circle>
-                                <g id="路径备份-2" transform="translate(3.000000, 3.000000)">
-                                    <path d="M13.684,8 L14,9.5 L0,9.5 L0.316,8 L13.684,8 Z M13.263,6 L13.474,7 L0.526,7 L0.737,6 L13.263,6 Z M12.842,4 L13.053,5 L0.947,5 L1.158,4 L12.842,4 Z M12.421,2 L12.632,3 L1.368,3 L1.579,2 L12.421,2 Z M12,0 L12.211,1 L1.789,1 L2,0 L12,0 Z" id="形状"></path>
-                                </g>
-                                <path d="M15.8275028,1 L4.17249722,1 L1.79154484,13.5 L18.2084552,13.5 L15.8275028,1 Z M14.172,3 L15.791,11.5 L4.208,11.5 L5.827,3 L14.172,3 Z" id="路径" fill-rule="nonzero"></path>
-                            </g>
-                        </g>
-                    </g>
-                </g>
+    <title>de3fd9d7dd7f30358753a7bf817833ae.horizontal_area_rectangle</title>
+    <g id="de3fd9d7dd7f30358753a7bf817833ae.horizontal_area_rectangle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-3" transform="translate(2.000000, 4.500000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="编组-9">
+                <path d="M3,10.5 C4.65685425,10.5 6,11.8431458 6,13.5 C6,15.1568542 4.65685425,16.5 3,16.5 C1.34314575,16.5 0,15.1568542 0,13.5 C0,11.8431458 1.34314575,10.5 3,10.5 Z M3,12.5 C2.44771525,12.5 2,12.9477153 2,13.5 C2,14.0522847 2.44771525,14.5 3,14.5 C3.55228475,14.5 4,14.0522847 4,13.5 C4,12.9477153 3.55228475,12.5 3,12.5 Z" id="椭圆形备份-3"></path>
+                <polygon id="路径-20" points="16.493197 4.91780051 17.493197 10.9178005 16.506803 11.0821995 15.506803 5.08219949"></polygon>
+                <polygon id="路径-20备份" points="4.01492875 4.87873219 4.98507125 5.12126781 3.48507125 11.1212678 2.51492875 10.8787322"></polygon>
+                <polygon id="路径-19" points="15.5 13.5 15.5 14.5 4.5 14.5 4.5 13.5"></polygon>
+                <path d="M17,10.5 C18.6568542,10.5 20,11.8431458 20,13.5 C20,15.1568542 18.6568542,16.5 17,16.5 C15.3431458,16.5 14,15.1568542 14,13.5 C14,11.8431458 15.3431458,10.5 17,10.5 Z M17,12.5 C16.4477153,12.5 16,12.9477153 16,13.5 C16,14.0522847 16.4477153,14.5 17,14.5 C17.5522847,14.5 18,14.0522847 18,13.5 C18,12.9477153 17.5522847,12.5 17,12.5 Z" id="椭圆形备份-4"></path>
+                <path d="M15.5,0 C17.1568542,0 18.5,1.34314575 18.5,3 C18.5,4.65685425 17.1568542,6 15.5,6 C13.8431458,6 12.5,4.65685425 12.5,3 C12.5,1.34314575 13.8431458,0 15.5,0 Z M15.5,2 C14.9477153,2 14.5,2.44771525 14.5,3 C14.5,3.55228475 14.9477153,4 15.5,4 C16.0522847,4 16.5,3.55228475 16.5,3 C16.5,2.44771525 16.0522847,2 15.5,2 Z" id="椭圆形备份-5"></path>
+                <path d="M4.5,0 C6.15685425,0 7.5,1.34314575 7.5,3 C7.5,4.65685425 6.15685425,6 4.5,6 C2.84314575,6 1.5,4.65685425 1.5,3 C1.5,1.34314575 2.84314575,0 4.5,0 Z M4.5,2 C3.94771525,2 3.5,2.44771525 3.5,3 C3.5,3.55228475 3.94771525,4 4.5,4 C5.05228475,4 5.5,3.55228475 5.5,3 C5.5,2.44771525 5.05228475,2 4.5,2 Z" id="椭圆形备份-6"></path>
+                <polygon id="路径" points="13.5 2.5 13.5 3.5 6.5 3.5 6.5 2.5"></polygon>
             </g>
         </g>
     </g>

index.html

@@ -22,7 +22,8 @@
 <script type="text/javascript">
     const ossPrefix = 'https://laser.4dkankan.com/data/';
     const ossPrefixDep = 'https://laser.4dkankan.com/public/';
-    const sceneNum = '@replace';
+    // const sceneNum = '@replace';
+    const sceneNum = 't-iksBApb';
 </script>
 <script src="IndoorViewerAPI.js"></script>
 <script type="text/javascript" src="js/OBJExporter.js"></script>
@@ -58,52 +59,52 @@
         }
     };
     var DoorOpenCLose = function(e) {
-        var main_view = IV.getMainView();
-        // var model;
-        // var animations;
-        // var kfAnimations = [];
-        // var kfAnimationsLength = 0;
-
-        // var progress = 0;
-        // var lastTimestamp = 0;
-        // var pre_select_map_id = -1;
-        
-        // let path = './models/mesh/';
-        // var mtlLoader = new IV.THREE.MTLLoader()
-		// .setPath( path )
-		// .load('mesh.mtl', function ( materials ) {
-		// 	console.log(materials)
-		// 	materials.preload();
-			
-		// 	// 加载obj
-		// 	new IV.THREE.OBJLoader()
-		// 		.setMaterials( materials )
-		// 		.setPath( path )
-		// 		.load('mesh.obj', function ( object ) {
-		// 			// console.log(object)
-     						
-     	// 			// 设置旋转中心点
-	    //             //object.children[0].geometry.computeBoundingBox();
-
-		// 			//object.children[0].geometry.center()
-
-        //             object.position.x = 0;
-		// 			object.position.y = 0;
-        //             object.position.z = 0;
-		// 			// 将模型加入到场景
-		// 			scene.add( object );
-
-		// 		}, onProgress, onError );
-		// });
-        // OBJLoader_plugin();
-        // var loader = new IV.THREE.OBJLoader();
-        // loader.load('./models/mesh/mesh.obj', function (object) {
-        //     //controller = object.children[0];
-        //     var texture_loader = new IV.THREE.TextureLoader();
-        //     var material = new IV.THREE.MeshBasicMaterial();
-        //     main_view.scene.add(object);
-        // });
-    }
+            var main_view = IV.getMainView();
+            // var model;
+            // var animations;
+            // var kfAnimations = [];
+            // var kfAnimationsLength = 0;
+
+            // var progress = 0;
+            // var lastTimestamp = 0;
+            // var pre_select_map_id = -1;
+
+            // let path = './models/mesh/';
+            // var mtlLoader = new IV.THREE.MTLLoader()
+            // .setPath( path )
+            // .load('mesh.mtl', function ( materials ) {
+            // 	console.log(materials)
+            // 	materials.preload();
+
+            // 	// 加载obj
+            // 	new IV.THREE.OBJLoader()
+            // 		.setMaterials( materials )
+            // 		.setPath( path )
+            // 		.load('mesh.obj', function ( object ) {
+            // 			// console.log(object)
+
+            // 			// 设置旋转中心点
+            //             //object.children[0].geometry.computeBoundingBox();
+
+            // 			//object.children[0].geometry.center()
+
+            //             object.position.x = 0;
+            // 			object.position.y = 0;
+            //             object.position.z = 0;
+            // 			// 将模型加入到场景
+            // 			scene.add( object );
+
+            // 		}, onProgress, onError );
+            // });
+            // OBJLoader_plugin();
+            // var loader = new IV.THREE.OBJLoader();
+            // loader.load('./models/mesh/mesh.obj', function (object) {
+            //     //controller = object.children[0];
+            //     var texture_loader = new IV.THREE.TextureLoader();
+            //     var material = new IV.THREE.MeshBasicMaterial();
+            //     main_view.scene.add(object);
+            // });
+        }
         /*
         if (!IV.custom) { //自定义功能集合
             IV.custom = {};
@@ -137,84 +138,83 @@
         //     animations = collada.animations;
         //     kfAnimationsLength = animations.length;
 
-        //     model.scale.x = model.scale.y = model.scale.z = 1;
-        //     main_view.scene.add(model);
-        //     //main_view.overlayScene.add(model);
-        //     //map_scene.add(model)
-        //     for (var i = 0; i < kfAnimationsLength; ++i) {
-        //         var animation = animations[i];
-        //         var kfAnimation = new IV.THREE.KeyFrameAnimation(animation);
-        //         kfAnimation.timeScale = 1;
-        //         kfAnimations.push(kfAnimation);
-        //     }
-        //     door_animation_start(0);
-        //     animate(lastTimestamp);
-        // });
-
-        function door_animation_start(time) {
-            for (var i = 0; i < kfAnimationsLength; ++i) {
-                var animation = kfAnimations[i];
-
-                // if (animation.root.name === "animation_door1") {
-                //     console.log(animation.root.name)
-                for (var h = 0, hl = animation.hierarchy.length; h < hl; h++) {
-
-                    var keys = animation.data.hierarchy[h].keys;
-                    var sids = animation.data.hierarchy[h].sids;
-                    var obj = animation.hierarchy[h];
-                    if (keys.length && sids) {
-                        for (var s = 0; s < sids.length; s++) {
-                            var sid = sids[s];
-                            var next = animation.getNextKeyWith(sid, h, 0);
-                            if (next) next.apply(sid);
-                        }
-                        obj.matrixAutoUpdate = false;
-                        animation.data.hierarchy[h].node.updateMatrix();
-                        obj.matrixWorldNeedsUpdate = true;
+    //     model.scale.x = model.scale.y = model.scale.z = 1;
+    //     main_view.scene.add(model);
+    //     //main_view.overlayScene.add(model);
+    //     //map_scene.add(model)
+    //     for (var i = 0; i < kfAnimationsLength; ++i) {
+    //         var animation = animations[i];
+    //         var kfAnimation = new IV.THREE.KeyFrameAnimation(animation);
+    //         kfAnimation.timeScale = 1;
+    //         kfAnimations.push(kfAnimation);
+    //     }
+    //     door_animation_start(0);
+    //     animate(lastTimestamp);
+    // });
+
+    function door_animation_start(time) {
+        for (var i = 0; i < kfAnimationsLength; ++i) {
+            var animation = kfAnimations[i];
+
+            // if (animation.root.name === "animation_door1") {
+            //     console.log(animation.root.name)
+            for (var h = 0, hl = animation.hierarchy.length; h < hl; h++) {
+
+                var keys = animation.data.hierarchy[h].keys;
+                var sids = animation.data.hierarchy[h].sids;
+                var obj = animation.hierarchy[h];
+                if (keys.length && sids) {
+                    for (var s = 0; s < sids.length; s++) {
+                        var sid = sids[s];
+                        var next = animation.getNextKeyWith(sid, h, 0);
+                        if (next) next.apply(sid);
                     }
+                    obj.matrixAutoUpdate = false;
+                    animation.data.hierarchy[h].node.updateMatrix();
+                    obj.matrixWorldNeedsUpdate = true;
                 }
-                // }
-                animation.loop = false;
-                animation.play(time);
             }
+            // }
+            animation.loop = false;
+            animation.play(time);
         }
+    }
 
-        function animate(timestamp) {
-            var frameTime = (timestamp - lastTimestamp) * 0.001;
-            if (IV.custom.select_map_id && (pre_select_map_id !== IV.custom.select_map_id)) {
-                pre_select_map_id = IV.custom.select_map_id;
-                for (var i = 0; i < kfAnimationsLength; ++i) {
-                    kfAnimations[i].stop();
-                }
-                if (IV.custom.select_map_id === 2) {
-                    progress = 0;
-                    door_animation_start(6);
-                } else if (IV.custom.select_map_id === 3) {
-                    progress = 0;
-                    door_animation_start(0);
-                }
+    function animate(timestamp) {
+        var frameTime = (timestamp - lastTimestamp) * 0.001;
+        if (IV.custom.select_map_id && (pre_select_map_id !== IV.custom.select_map_id)) {
+            pre_select_map_id = IV.custom.select_map_id;
+            for (var i = 0; i < kfAnimationsLength; ++i) {
+                kfAnimations[i].stop();
+            }
+            if (IV.custom.select_map_id === 2) {
+                progress = 0;
+                door_animation_start(6);
+            } else if (IV.custom.select_map_id === 3) {
+                progress = 0;
+                door_animation_start(0);
+            }
 
+        }
+        //console.log(progress,max_progress,start,end)
+        if (progress >= 0 && progress < 6) {
+            for (var i = 0; i < kfAnimationsLength; ++i) {
+                //if (kfAnimations[i].root.name === "door1") {
+                kfAnimations[i].update(frameTime);
+                //}
             }
-            //console.log(progress,max_progress,start,end)
-            if (progress >= 0 && progress < 6) {
-                for (var i = 0; i < kfAnimationsLength; ++i) {
-                    //if (kfAnimations[i].root.name === "door1") {
-                    kfAnimations[i].update(frameTime);
-                    //}
-                }
-            } else if (progress >= 6) {
-                for (var i = 0; i < kfAnimationsLength; ++i) {
-                    kfAnimations[i].stop();
-                }
-                // progress = 0;
-                // door_animation_start();
+        } else if (progress >= 6) {
+            for (var i = 0; i < kfAnimationsLength; ++i) {
+                kfAnimations[i].stop();
             }
-            main_view.invalidateScene();
-            progress += frameTime;
-            lastTimestamp = timestamp;
-            requestAnimationFrame(animate);
+            // progress = 0;
+            // door_animation_start();
         }
-    
+        main_view.invalidateScene();
+        progress += frameTime;
+        lastTimestamp = timestamp;
+        requestAnimationFrame(animate);
+    }
 </script>
 <script src="./js/index.js"></script>
 

js/index.js

@@ -1 +1,8 @@
-// 
+window.onload = function() {
+    $('.glyphicon-resize-full').bind('click', function(params) {
+        $(this).toggleClass('active')
+    })
+
+
+
+}

js/popindoorAPI2.7.1.js

@@ -520,7 +520,7 @@ var LookupGeoLocation= function (main_view,main_scene,map_view)
     var menuItems = IV.getMenuItems();
     var selected_proj4=null;
     var newItem = {
-        title: "坐标查询",
+        title: "坐标",
         icon: {
             className: "fa fa-thumb-tack"
         },
@@ -872,6 +872,37 @@ var Load3DModel= function (main_view,main_scene,map_view)
     };
 };
 
+var addMinMap= function (main_view,main_scene,map_view)
+{
+    if(!IV.custom) //自定义功能集合
+        IV.custom={};
+
+    var geo_service = IV.injector.get('GeoTransformationService');
+    var uploadService=IV.injector.get("UploadService");
+    var configService =window.IV.injector.get("ConfigService");
+    var userService=IV.injector.get("UserService");
+    var sitmodelRepo = IV.api.SiteModelApiService.repository;
+    var menuItems = IV.getMenuItems();
+
+    var newItem = {
+        title: "平面图",
+        icon: {
+            className: "fa fa-thumb-tack"
+        },
+        isVisible: function()
+        {
+            return true;
+        },
+        isPreviewIconVisible: function()
+        {
+            return true;
+        },
+        order: 40,
+        template:findUrl()+"locat/addDataSet.html"
+    };
+    menuItems.push(newItem);
+};
+
 /*查找本站域名，一个通用的方法*/
 function findUrl(){
     var pathArray = window.location.pathname.split( '/' );
@@ -956,7 +987,8 @@ var Setting=function(){
                 subArea: false,
                 cursorPosition: false,
                 switchMap: false,
-                loadl3DModels:false
+                loadl3DModels:false,
+                map:true
         };
     }
     function load_menu(){
@@ -967,18 +999,19 @@ var Setting=function(){
         if(general_setting.loadl3DModels){
             var load3DModel = new Load3DModel(main_view,main_scene,map_view, map_scene);
             main_view.addToScene(load3DModel);
-
         }
         // if(general_setting.switchMap){
         //     var cadMapChnager = new CADMapChanger(map_view, map_scene);
         //     map_view.addToScene(cadMapChnager);
         // }
-        //
         if(general_setting.subArea){
              var highlightSiteModelLayer = new HighlightSiteModelLayer(main_view,main_scene,map_view, map_scene);
               map_view.addToScene(highlightSiteModelLayer);
         }
-
+        //if(general_setting.map){
+            var myMap = new addMinMap(main_view,main_scene,map_view, map_scene);
+            main_view.addToScene(myMap);
+        //}
     }
     IV.custom.settingSave=function(e){
         general_setting.subArea=document.getElementById("setting_sitemodel").checked;

locat/addDataSet.html

@@ -136,10 +136,10 @@
                             </div>
                         </div>
 
-                        <p class="itemTitle">EPSG 坐标系 4326</p>
+                        <p class="itemTitle">EPSG 坐标系 </p>
                         <div class="formItem">
                             <div class="allIpt">
-                                <input type="text" v-model="EPSG" name="EPSG" id="EPSG" value="EPSG:4326" />
+                                <input type="text" v-model="EPSG" name="EPSG" id="EPSG" />
                             </div>
 
                         </div>
@@ -153,6 +153,7 @@
                     <div class="style"></div>
                     <!-- <input type="submit" class="submitBtn" value="提交" />
                     <button id="clear">取消</button> -->
+                    <div id="clear" @click="getImageTransform">提交地图信息</div>
                     <div id="clear" @click="clearMap">取消</div>
                     <div class="submitBtn" @click="commit()">
                         提交
@@ -161,31 +162,10 @@
                 </div>
             </div>
             <div class="rightBox">
-                <div id="map" class="map">
-                    <div class="plane1">
-                        <!-- 文件路径:<input type="text" id="filePath" value="./img/gangwan256.png" /><button
-                            id="upload">上传</button><br> -->
-
-                        上传地图：<input type="file" id="file" name="file" multiple="multiple" @change="handleFileChange">
-                        <br> 位置(左上角)：
-                        <br> 经度：
-                        <input type="text" id="lon" v-model="uploadData.lon" /><br> 纬度：
-                        <input type="text" id="lat" v-model="uploadData.lat" /><br> 朝向(顺时针为正)：
-                        <input type="text" id="direction" v-model="uploadData.direction" /><br> 大小：
-                        <input type="text" id="size" v-model="uploadData.size" /><br>
-                        <!-- <button id="ok" @click="getImage">确定</button> -->
-                        <button id="drug" @click="onDrawImage">
-                            <span v-if="!isDraw">开启拖拽</span>
-                            <span v-if="isDraw">关闭拖拽</span>
-                        </button>
-                        <button id="rotate" @click="onRotate">
-                            <span v-if="!isRotate">开启旋转</span>
-                            <span v-if="isRotate">关闭旋转</span>
-                        </button>
-                        <button id="save" @click="onSave">保存</button>
-                    </div>
+                <div class="map-layer">
+                    <div id="map" class="map"></div>
+                    <image-tranform :map-ol="map" v-if="map" ref="imageTranform" />
                 </div>
-
             </div>
 
         </div>
@@ -193,18 +173,40 @@
 
     <script src="./js/vue.js"></script>
     <script src="./js/axios.min.js"></script>
+    <script src="./js/proj4.js"></script>
+    <script src="./components/image-transform/index.js"></script>
     <script type="text/javascript">
         //输入经纬度就可以定位
     </script>
 
     <script>
+        //坐标转换定义  部分 定义一个 cgc_2000的38度带投影坐标系
+        proj4.defs( "EPSG:99999", "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80  +units=m +no_defs");
+        var projection = new ol.proj.Projection({
+            code: "EPSG:99999",
+            extent: [334238.8538694997, 425861.702215328, 599418.034383447, 5936877.5664797],
+            units: 'm',
+            axisOrientation: 'neu',
+            global: false
+        });
+        //结合proj4在ol中自定义坐标系
+        ol.proj.addProjection(projection);
+        ol.proj.addCoordinateTransforms("EPSG:4326", "EPSG:99999",
+            function (coordinate) {
+                return proj4("EPSG:4326", "EPSG:99999", coordinate);
+            },
+            function (coordinate) {
+                return proj4("EPSG:99999", "EPSG:4326", coordinate);
+            }
+        );  
+
         new Vue({
             el: '#app',
             data() {
                 return {
 
                     pointLayerArray: [],
-                    map: {},
+                    map: null,
                     gaodeMapLayer: {},
                     ax: '',
                     ay: '',
@@ -218,7 +220,7 @@
                     blon: '123',
                     blat: '22',
                     balt: '0',
-                    EPSG: 'EPSG:4326',
+                    EPSG: 'EPSG:99999',
                     ageControlLocation1: [],
                     ageControlLocation2: [],
                     gpsControlCoordinate1: [],
@@ -257,7 +259,7 @@
 
                 this.map = this.initMap('map');
 
-
+                console.log(this.map)
 
 
 
@@ -265,11 +267,22 @@
 
             },
             methods: {
+                getImageTransform() {
+                    // 地图数据上传  如果用户没有选择数据直接返回true  如果有数据要上传返回promise
+                    this.$refs.imageTranform.uploadData()
+                        .then(res => {
+                            alert('成功')
+                        })
+                        .catch(() => {
+                            alert('失败')
+                        })
+                        
+                },
                 initMap(divid) {
                     this.pointLayerArray = [];
                     this.gaodeMapLayer = new ol.layer.Tile({
                         source: new ol.source.XYZ({
-                            url: 'http://wprd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}' //高德地图切片访问路径
+                            url: 'http://wprd03.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}' //高德地图切片访问路径
                         })
                     });
 
@@ -302,7 +315,7 @@
                     vLayer.type = "con_point";
                     this.map.addLayer(vLayer)
                     this.pointLayerArray.push(vLayer);
-                    let labelCoords = ol.proj.transform([lon, lat], "EPSG:4326", "EPSG:3857");
+                    let labelCoords = ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:99999');
                     let feature = new ol.Feature({
                         geometry: new ol.geom.Point(labelCoords)
                     });
@@ -369,9 +382,9 @@
                 },
 
                 commit() {
-
                     this.handleData()
-                    axios.post('/indoor/' + this.sceneNum + '/api/controlPoint/save', {
+                    Promise.all([
+                        axios.post('/indoor/' + this.sceneNum + '/api/controlPoint/save', {
                             ageControlLocation1: this.ageControlLocation1,
                             ageControlLocation2: this.ageControlLocation2,
                             gpsControlCoordinate1: this.gpsControlCoordinate1,
@@ -379,288 +392,20 @@
                             sceneNum: this.sceneNum,
                             // id: 1
                         })
-                        .then(function(response) {
-                            alert('成功')
-                        })
                         .catch(function(error) {
-                            alert('失败')
-                        });
-                },
-                handleFileChange(e) {
-                    const input = e.target;
-                    const files = e.target.files;
-                    if (files && files[0]) {
-                        const file = files[0];
-                        // onload 里面不能用this
-                        this.imgSrc = window.URL.createObjectURL(file);
-                        let img = new Image();
-                        img.src = this.imgSrc;
-                        let self = this;
-                        img.onload = function() {
-                            console.log(img.width, img.height)
-                            if (img.width < self.limitSize || img.height < self.limitSize) {
-                                alert('图片宽高需要大于512')
-                                input.value = '';
-                                return false;
-                            } else if (img.width != img.height) {
-                                alert('图片比例必须为1:1')
-                                input.value = '';
-                                return false;
-                            } else {
-
-                                self.file = file
-                                self.uploadData.size = img.width
-                                self.getImage()
-                            }
-                        };
-                    }
-
-                },
-                getImage() {
-                    let lon = document.getElementById("lon").value;
-                    let lat = document.getElementById("lat").value;
-                    let direction = document.getElementById("direction").value;
-                    // let url = document.getElementById("filePath").value;
-                    let url = this.imgSrc;
-                    this.showSmallMap(+lon, +lat, +direction, url)
-                },
-
-                onDrawImage() {
-                    let self = this
-                    this.isRotate = false
-                    this.rotateObj && this.rotateObj.close();
-                    this.isDraw = !this.isDraw
-                    if (this.isDraw) {
-                        this.drugObj = new Drug(canvas, ctx, img);
-                        this.drugObj.open();
-                    } else {
-                        this.drugObj.close();
-                    }
-
-                    /**
-                     * canvas 原生拖拽
-                     **/
-                    function Drug(canvas, ctx, img) {
-                        //这里禁用底图拖拽
-                        self.setMapDragPan(false)
-                        let oldX, oldY, allMoveX = 0,
-                            allMoveY = 0;
-                        canvas.draggable = false; //禁用原生拖拽
-                        let onmousedown = function(evt) {
-                            oldX = evt.x;
-                            oldY = evt.y;
-                            document.addEventListener("mousemove", onmousemove);
-                        }
-                        let onmousemove = function(evt) {
-                            if (!isNaN(oldX - evt.x)) {
-                                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                                allMoveX = allMoveX + evt.x - oldX;
-                                allMoveY = allMoveY + evt.y - oldY;
-                                ctx.translate(evt.x - oldX, evt.y - oldY);
-                                self.drawImage(canvas, ctx, img);
-                                oldX = evt.x;
-                                oldY = evt.y;
-                                imageCanvas.refresh();
-                            }
-                        }
-                        let onmouseup = function(evt) {
-                            document.removeEventListener("mousemove", onmousemove);
-                        }
-                        this.open = function() {
-                            document.addEventListener("mousedown", onmousedown);
-                            document.addEventListener("mousemove", onmousemove);
-                            document.addEventListener("mouseup", onmouseup);
-                        }
-                        this.close = function() {
-                            document.removeEventListener("mousedown", onmousedown);
-                            document.removeEventListener("mousemove", onmousemove);
-                            document.removeEventListener("mouseup", onmouseup);
-                            self.setMapDragPan(true) //打开底图拖拽
-                        }
-                        this.getMoveXY = function() {
-                            this.moveX = allMoveX;
-                            this.moveY = allMoveY;
-                            return [this.moveX, this.moveY]
-                        }
-
-                        return this;
-                    }
-                },
-
-
-                onRotate() {
-                    let self = this
-                    this.isDraw = false
-                    this.drugObj && this.drugObj.close();
-                    this.isRotate = !this.isRotate
-
-                    if (this.isRotate) {
-                        this.rotateObj = new Rotate(canvas, ctx, img);
-                        this.rotateObj.open();
-                    } else {
-                        this.rotateObj.close();
-                    }
-
-
-
-                    /**
-                     * canvas 原生旋转
-                     **/
-                    function Rotate(canvas, ctx, img) {
-                        //这里禁用底图拖拽
-                        self.setMapDragPan(false)
-                        let oldX, oldY, angle = 0,
-                            angleAll = 0;
-                        canvas.draggable = false; //禁用原生拖拽
-                        let onmousedown = function(evt) {
-                            oldX = evt.x;
-                            oldY = evt.y;
-                            document.addEventListener("mousemove", onmousemove);
-                        }
-                        let onmousemove = function(evt) {
-                            if (!isNaN(oldX - evt.x)) {
-                                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                                let tana = (oldY - evt.y) / (evt.x - oldX);
-                                angle = 0.02 * Math.atan(tana);
-                                angleAll = angleAll + angle;
-                                ctx.translate(128, 128);
-                                ctx.rotate(angle);
-                                ctx.translate(-128, -128);
-                                self.drawImage(canvas, ctx, img)
-                                imageCanvas.refresh();
-                            }
-                        }
-                        let onmouseup = function(evt) {
-                            document.removeEventListener("mousemove", onmousemove);
-                        }
-                        this.open = function() {
-                            document.addEventListener("mousedown", onmousedown);
-                            document.addEventListener("mousemove", onmousemove);
-                            document.addEventListener("mouseup", onmouseup);
-                        }
-                        this.close = function() {
-                            document.removeEventListener("mousedown", onmousedown);
-                            document.removeEventListener("mousemove", onmousemove);
-                            document.removeEventListener("mouseup", onmouseup);
-                            self.setMapDragPan(true) //打开底图拖拽
-                        }
-                        this.getAngle = function() {
-                            this.angle = angleAll
-                            return this.angle;
-                        }
-                        return this;
-                    }
-                },
-
-                onSave() {
-                    let lon = document.getElementById("lon").value;
-                    let lat = document.getElementById("lat").value;
-                    let direction = document.getElementById("direction").value;
-                    let size = document.getElementById("size").value;
-                    this.save(+lon, +lat, +direction, +size, this.drugObj, this.rotateObj)
-                },
-
-                showSmallMap(lon, lat, direction, imageUrl) {
-                    let canvasOption = {};
-                    let isFirst = true;
-                    canvasOption.canvasFunction = (extent, resolution, pixelRatio, size, projection) => {
-                        if (isFirst) {
-                            isFirst = false;
-                            canvas = document.createElement('canvas');
-                            canvas.width = size[0];
-                            canvas.height = size[1];
-                            //Canvas四至范围不同于当前地图四至范围，计算出南北方向与东西方向的偏移
-                            let mapExtent = this.map.getView().calculateExtent(this.map
-                                .getSize()); //当前底图视图范围的投影坐标
-                            let canvasOrigin = this.map.getPixelFromCoordinate([extent[0], extent[
-                                3]]); //添加到地图上的canvas图像的左上角
-                            let mapOrigin = this.map.getPixelFromCoordinate([mapExtent[0], mapExtent[3]]);
-                            let delta = [mapOrigin[0] - canvasOrigin[0], mapOrigin[1] - canvasOrigin[1]];
-                            let leftTop = this.map.getPixelFromCoordinate(ol.proj.fromLonLat([lon, lat]));
-                            //canvas原生加载图片
-                            ctx = canvas.getContext('2d');
-                            img = new Image();
-                            img.src = imageUrl;
-                            img.onload = () => {
-                                ctx.translate(leftTop[0] + delta[0], leftTop[1] + delta[1])
-                                ctx.translate(128, 128)
-                                ctx.rotate(direction * (Math.PI / 180))
-                                ctx.translate(-128, -128)
-                                this.drawImage(canvas, ctx, img)
-                            }
-                            return canvas;
-                        }
-                    }
-                    imageCanvas = new ol.source.ImageCanvas(canvasOption);
-                    imageCanvasLayer = new ol.layer.Image({
-                        source: imageCanvas
-                    });
-                    this.map.addLayer(imageCanvasLayer);
-                    this.map.getView().setCenter(ol.proj.fromLonLat([lon, lat]));
-                    this.map.getView().setZoom(19)
-                },
-
-                save(lon, lat, direction, size, drugObj, rotateObj) {
-                    let saveLonLat, saveAngle;
-                    if (drugObj) {
-                        let moveXY = drugObj.getMoveXY();
-                        let leftTop = this.map.getPixelFromCoordinate(ol.proj.fromLonLat([lon, lat]));
-                        let pixelX = moveXY[0] + leftTop[0];
-                        let pixelY = moveXY[1] + leftTop[1];
-                        saveLonLat = this.map.getCoordinateFromPixel([pixelX, pixelY]);
-                        saveLonLat = ol.proj.toLonLat(saveLonLat);
-
-                    } else {
-                        saveLonLat = [lon, lat]
-                    }
-                    if (rotateObj) {
-                        saveAngle = rotateObj.getAngle() * 180 / Math.PI + Number(direction);
-
-                    } else {
-                        saveAngle = direction
-                    }
-                    let save = {
-                        lonlat: saveLonLat,
-                        angle: saveAngle,
-                        size: size
-                    }
-                    console.log(save) //保存到数据库去
-
+                            alert('数据集位置上传失败')
+                        }),
 
-                    let location = saveLonLat;
-                    if (location.length == 2) {
-                        location.push(0)
-                    }
-                    let formData = new FormData()
-                    formData.append('file', this.file)
-                    formData.append('location', location)
-                    formData.append('orientation', saveAngle)
-                        // formData.append('sceneCode', this.sceneNum)
-                        // formData.append('sceneCode', 't810')
-                    axios.post('indoor/' + this.sceneNum + '/api/map/upload', formData)
-                        // axios.post('http://192.168.0.135:9294/indoor/t810/api/map/upload', formData)
-                        .then(function(response) {
-                            alert('成功')
+                        this.getImageTransform()
+                        .catch(_ => {
+                            alert('地图数据上传失败')
                         })
-                        .catch(function(error) {
-                            alert('失败')
-                        });
-
-                },
-
-
+                    ]).then(() => {
+                        alert('成功')
+                    })
 
-                drawImage(canvas, ctx, img) {
-                    ctx.clearRect(0, 0, canvas.width, canvas.height);
-                    ctx.drawImage(img, 0, 0); //canvas 从左上角开始绘制
                 },
 
-                setMapDragPan(bool) {
-                    this.map.getInteractions().forEach(function(element, index, array) {
-                        if (element instanceof ol.interaction.DragPan)
-                            element.setActive(bool);
-                    });
-                }
 
             }
         })

locat/components/image-transform/index.js

@@ -0,0 +1,907 @@
+(() => {
+    // 初始地图
+    const initMap = (map) => {
+        return {
+            map,
+            async loadImage(args) {
+                const { file, minWidth, minHeight } = args
+                args.img = args.img ?
+                    args.img :
+                    await blobImageLoad(file, minWidth, minHeight)
+
+                return loadImageLayer(map, args)
+            },
+            screenToLatlan({ x, y }) {
+                const real = map.getCoordinateFromPixel([x, y])
+                const latlan = ol.proj.transform(real, 'EPSG:4326', 'EPSG:99999')
+                return latlan
+            }
+        }
+    }
+
+    const loadImageLayer = (map, args) => {
+        const {
+            lon,
+            lat
+        } = args
+        const itude = ol.proj.fromLonLat([lon, lat])
+        const { image: imageLayer, canvas } = loadImage(map, args, itude)
+
+        map.addLayer(imageLayer);
+        map.getView().setCenter(
+            ol.proj.fromLonLat([lon, lat])
+        );
+        map.getView().setZoom(19)
+
+        return canvas
+    }
+
+    // 经纬度转canvas坐标
+    const itudeToCanvasPos = (map, extent, itude) => {
+        //Canvas四至范围不同于当前地图四至范围，计算出南北方向与东西方向的偏移
+        const mapExtent = map.getView()
+            .calculateExtent(map.getSize())
+
+        //当前底图视图范围的投影坐标
+        const canvasOrigin = map.getPixelFromCoordinate(
+            [extent[0], extent[3]]
+        );
+
+        //添加到地图上的canvas图像的左上角
+        const mapOrigin = map.getPixelFromCoordinate(
+            [mapExtent[0], mapExtent[3]]
+        );
+
+        const delta = [
+            mapOrigin[0] - canvasOrigin[0],
+            mapOrigin[1] - canvasOrigin[1]
+        ];
+
+        const leftTop = map.getPixelFromCoordinate(itude)
+
+        return {
+            x: leftTop[0] + delta[0],
+            y: leftTop[1] + delta[1]
+        }
+    }
+
+    // 平移，旋转，放大当前canvas
+    const transformCanvasCall = (
+        canvas,
+        transform,
+        oper,
+        center = {
+            x: 0,
+            y: 0
+        }
+    ) => {
+        const ctx = canvas.getContext('2d')
+        const {
+            translate,
+            scale,
+            rotate
+        } = transform
+
+
+
+        ctx.translate(center.x, center.y)
+        translate && ctx.translate(translate.x, translate.y)
+        rotate && ctx.rotate(rotate * (Math.PI / 180))
+        scale && ctx.scale(scale[0], scale[1])
+        oper && oper()
+        // scale && ctx.scale(1 / scale, 1 / scale)
+        // rotate && ctx.rotate(-rotate * (Math.PI / 180))
+        // translate && ctx.translate(-translate.x, -translate.y)
+        ctx.translate(-center.x, -center.y)
+    }
+
+    const genImgCanvasItudeToReal = (map, canvas, extent) =>
+        (itude) => {
+            return genImgCanvasPosToReal(map, canvas)(
+                itudeToCanvasPos(map, extent, itude)
+            )
+        }
+
+    const genImgCanvasPosToReal = (map, canvas) =>
+        (pos) => {
+            const $real = map.getViewport()
+            const offsetWidth = (canvas.width - $real.offsetWidth) / 2
+            const offsetHeight = (canvas.height - $real.offsetHeight) / 2
+
+            return {
+                x: pos.x - offsetWidth,
+                y: pos.y - offsetHeight
+            }
+        }
+
+    const genImgCanvasTransfrom = (canvas, arrayImgs, scale, initPos) =>
+        (transform) => {
+            console.log(scale)
+            const ctx = canvas.getContext('2d');
+            const dscale = transform.scale || [1, 1]
+            const resize = 1 / (scale * 10)
+            const doScale = [
+                resize * dscale[0],
+                resize * dscale[1]
+            ]
+            const imgData = { width: 0, height: 0 }
+
+            arrayImgs.forEach(imgs => {
+                let height = 0
+                imgs.forEach(([img]) => height += img.height)
+                imgData.width += imgs[0][0].width
+                if (imgData.height < height) {
+                    imgData.height = height
+                }
+            })
+
+            initPos.x -= imgData.width / 2
+            initPos.y -= imgData.height / 2
+
+            // , translate: { x: -(imgData.width / 2) * doScale[0], y: -(imgData.height / 2) * doScale[1] } 
+            ctx.fillStyle = 'rgba(0,0,0,0.1)'
+            ctx.fillRect(0, 0, canvas.width, canvas.height)
+            transformCanvasCall(
+                canvas, { ...transform, scale: doScale },
+                () => {
+                    transform.draw && transform.draw(ctx)
+                    let width = 0
+                    arrayImgs.forEach(imgs => {
+                        let height = 0
+                        imgs.forEach(([img]) => {
+                            ctx.drawImage(img, width, height)
+                            height += img.height
+                        })
+                        width += imgs[0][0].width
+                    })
+                },
+                transform.center
+            )
+
+            const move = {
+                x: transform.translate.x - initPos.x,
+                y: transform.translate.y - initPos.y,
+            }
+            const start = {
+                x: initPos.x + move.x,
+                y: initPos.y + move.y,
+            }
+            const end = {
+                x: start.x + imgData.width * doScale[0],
+                y: start.y + imgData.height * doScale[1],
+            }
+
+            canvas.position = [
+                start,
+                end,
+                Math.abs(start.x - end.x) / resize,
+                Math.abs(start.y - end.y) / resize
+            ]
+
+            canvas.resize = resize
+            canvas.imgData = imgData
+            canvas.imgBox = [
+                canvas.posToReal(start),
+                canvas.posToReal(end),
+                Math.abs(start.x - end.x),
+                Math.abs(start.y - end.y)
+            ]
+        }
+
+
+    // 加载url
+    const canvas = document.createElement('canvas')
+    const loadImage = (map, args, itude) => {
+        const imageCanvas = new ol.source.ImageCanvas({
+            canvasFunction(extent, scale, _2, size) {
+                const pos = itudeToCanvasPos(map, extent, itude)
+                const imgData = { width: 0, height: 0 }
+                args.img.forEach(imgs => {
+                    let height = 0
+                    imgs.forEach(([img]) => height += img.height)
+                    imgData.width += imgs[0][0].width
+                    if (imgData.height < height) {
+                        imgData.height = height
+                    }
+                })
+                console.log(scale, size)
+                // pos.x -= imgData.width / 2 * scale
+                // pos.y -= imgData.height / 2 * scale
+                canvas.width = size[0];
+                canvas.height = size[1]
+                canvas.posToReal = genImgCanvasPosToReal(map, canvas);
+                canvas.transform = genImgCanvasTransfrom(canvas, args.img, scale, pos, imageCanvas);
+                canvas.itudeToReal = genImgCanvasItudeToReal(map, canvas, extent)
+                canvas.transform({
+                    ...args,
+                    translate: {
+                        x: (args.translate ? args.translate.x : 0) + pos.x,
+                        y: (args.translate ? args.translate.y : 0) + pos.y
+                    }
+                })
+
+                return canvas;
+            }
+        })
+        const image = new ol.layer.Image({ source: imageCanvas })
+        canvas.imageLayer = imageCanvas
+        return {
+            image,
+            canvas
+        }
+    }
+
+
+    // 返回本地url
+    const blobImageLoad = (arrayImages, minWidth, minHeight) => {
+        const analysis = (blob) => new Promise((resolve, reject) => {
+            const url = typeof blob !== 'string' ?
+                window.URL.createObjectURL(blob) :
+                blob
+            const img = new Image()
+
+            img.onload = () => {
+                if (img.width < minWidth || img.height < minHeight) {
+                    reject('图片宽高需要大于512')
+                } else {
+                    resolve([img, url, blob])
+                }
+            }
+            img.src = url
+        })
+
+        let arrasPromises = []
+        for (let images of arrayImages) {
+            let analys = []
+            for (let bolb of images) {
+                analys.push(analysis(bolb))
+            }
+            arrasPromises.push(
+                Promise.all(analys)
+            )
+        }
+
+        return Promise.all(arrasPromises)
+    }
+
+
+    // 获取逆转矩阵
+    const getCanvasInverImatrix = $canvas => {
+        const ctx = $canvas.getContext('2d')
+        const transform = ctx.getTransform()
+        return transform.invertSelf();
+    }
+
+    // canvas坐标转屏幕坐标
+    const getCanvasToScreenPos = ($canvas, { x, y }) => {
+        const {
+            a,
+            b,
+            c,
+            d,
+            e,
+            f
+        } = getCanvasInverImatrix($canvas)
+
+        const screenX = (c * y - d * x + d * e - c * f) / (b * c - a * d)
+        const screenY = (y - screenX * b - f) / d
+
+        return {
+            x: Math.round(screenX),
+            y: Math.round(screenY),
+        }
+    }
+
+    // 屏幕坐标转canvas坐标
+    const getScreenToCanvasPos = ($canvas, { x, y }) => {
+        const {
+            a,
+            b,
+            c,
+            d,
+            e,
+            f
+        } = getCanvasInverImatrix($canvas)
+
+        return {
+            x: Math.round(x * a + y * c + e),
+            y: Math.round(x * b + y * d + f)
+        };
+    }
+
+
+    const sceneName = window.location.pathname.split('/')[2]
+    const isDev = !sceneName || sceneName === 'addDataSet.html'
+
+    const sceneCode = isDev ? 't-kJ2PEjZ' : window.location.pathname.split('/')[2]
+    const root = isDev ? `https://testlaser.4dkankan.com` : ''
+    // const root = 'http://192.168.0.135:9294'
+    const request = {
+        uploadFiles(files) {
+            const fromData = new FormData()
+            files.forEach(({ dir, file }) => {
+                fromData.append(dir, file)
+            })
+            return axios({
+                headers: { 'Content-Type': 'multipart/form-data' },
+                method: 'POST',
+                data: fromData,
+                url: `${root}/indoor/${sceneCode}/api/mapSmall/upload`
+            })
+        },
+        getDetail() {
+            return axios.post(`${root}/indoor/${sceneCode}/api/mapSmall/detail`)
+        },
+        updateCoord(data) {
+            return axios.post(
+                `${root}/indoor/${sceneCode}/api/update/coord`, { param: data }
+            )
+        },
+        getSceneInfo() {
+            return axios.get(`${root}/indoor/${sceneCode}/api/datasets`)
+        }
+    }
+
+    const analysisFiles = (files) => {
+        const imagesArray = []
+        const formatError = () => {
+            alert('目录不规范 请上传 z/x/y.png 格式目录，且在最底级目录放置图片文件')
+        }
+
+        let imagesXYZ = {}
+        for (let dir in files) {
+            let file = files[dir]
+            let locals = dir.split(/[\\|//]/)
+            if (locals.length < 3) return formatError()
+            let current = imagesXYZ
+            for (let i = 0; i < locals.length; i++) {
+                let dir = locals[i]
+
+                if (i !== locals.length - 1) {
+                    if (!current[dir]) {
+                        current[dir] = i === locals.length - 2 ? [] : {}
+                    }
+                    current = current[dir]
+
+                    if (i === locals.length - 3) {
+                        current.key = 'z'
+                    }
+                }
+
+                if (i === locals.length - 1 && Array.isArray(current)) {
+                    current.push(file)
+                }
+            }
+        }
+
+        (function analysis(updateXYZ) {
+            if (updateXYZ.key === 'z') {
+                imagesXYZ = updateXYZ
+                return;
+            }
+            const names = Object.keys(updateXYZ).sort((a, b) => b - a)
+            names.forEach(key => {
+                if (key !== names[0]) {
+                    delete updateXYZ[key]
+                }
+            })
+            analysis(updateXYZ[names[0]])
+        })(imagesXYZ);
+
+        if (!(imagesXYZ && imagesXYZ.key === 'z' && !Array.isArray(imagesXYZ))) {
+            return formatError()
+        }
+
+        for (let key in imagesXYZ) {
+            if (!Array.isArray(imagesXYZ[key]) && key !== 'key') {
+                return formatError()
+            }
+        }
+
+        delete imagesXYZ.key
+
+        const getNameNum = (str) => {
+            let rg = str.match(/[\/\\]([^\/\\]*)?\.[^\/\\]*$/)
+            return weight = rg ? parseInt(rg[1]) : 999
+        }
+
+        Object.keys(imagesXYZ).sort((a, b) => a - b).forEach(key => {
+            imagesArray.push(
+                imagesXYZ[key].sort((a, b) => {
+                    let wa = typeof a === 'string' 
+                        ? getNameNum(a) 
+                        : parseInt(a.name)
+                        
+                    let wb = typeof b === 'string' 
+                        ? getNameNum(b) 
+                        : parseInt(b.name)
+                    return wa - wb
+                })
+            )
+        })
+
+
+        return imagesArray
+    }
+    //  目录：<input type="file" @change="imageChange" directory webkitdirectory multiple>
+    Vue.component('imageTranform', {
+        props: ['mapOl'],
+        name: 'imageTranform',
+        template: `
+      <div class="transform-layer"  @mousemove.stop.prevent="moveHandle"  @mouseup="upMove">
+        <div class="upload-layer">
+         
+          单文件：<input type="file" @change="imageChange">
+        </div>
+        <div class="ctrls" :style="boxStyle" @mousedown.stop.prevent="startMove($event, 'move')"></div>
+        <div class="cctrls" v-if="box.tl">
+          <span class="tl" :style="{left: box.tl.x + 'px', top: box.tl.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'tl')"></span>
+          <span class="tc" :style="{left: box.tc.x + 'px', top: box.tc.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'tc')"></span>
+          <span class="tr" :style="{left: box.tr.x + 'px', top: box.tr.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'tr')"></span>
+          <span class="rc" :style="{left: box.rc.x + 'px', top: box.rc.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'rc')"></span>
+          <span class="lc" :style="{left: box.lc.x + 'px', top: box.lc.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'lc')"></span>
+          <span class="br" :style="{left: box.br.x + 'px', top: box.br.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'br')"></span>
+          <span class="bl" :style="{left: box.bl.x + 'px', top: box.bl.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'bl')"></span>
+          <span class="bc" :style="{left: box.bc.x + 'px', top: box.bc.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'scale', 'bc')"></span>
+          <span class="cc" :style="{left: box.cc.x + 'px', top: box.cc.y + 'px'}" @mousedown.prevent.stop="startMove($event, 'rotate')"></span>
+        </div>
+        <div class="box-info" v-if="boxPos.tl">
+          <div v-for="(item, key) in boxPos" :key="key">
+            <span>{{key}}</span>
+            <span>{{item}}</span>
+          </div>
+        </div>
+      </div>
+    `,
+        data() {
+            return {
+                isHover: false,
+                box: {},
+                left: 0,
+                top: 0
+            }
+        },
+        methods: {
+            imageChange(e) {
+                const files = e.target.files;
+                if (files && files[0]) {
+                    const file = files[0];
+                    // onload 里面不能用this
+                    let img = new Image();
+                    img.src = window.URL.createObjectURL(file);
+                    img.onload = async () => {
+                        if (img.width % 256 == 0 && img.height % 256 == 0) {
+                            let imagesArray = []
+
+                            if (e.target.files.length > 1) {
+                                const files = {}
+                                for (let file of e.target.files) {
+                                    files[file.webkitRelativePath] = file
+                                }
+                                imagesArray = analysisFiles(files)
+                            } else {
+                                imagesArray = [
+                                    [e.target.files[0]]
+                                ]
+                            }
+                            if (this.imgCanvas) {
+                                ctx = this.imgCanvas.getContext('2d')
+                                ctx.clearRect(-10000, -10000, 10000, 10000)
+                                this.imgCanvas.imageLayer.refresh()
+                            }
+                            await this.drawCanvas(imagesArray, [], {
+                                lat: this.lat,
+                                lon: this.lon
+                            })
+                        } else {
+                            alert('图片宽高需为256的倍数')
+                        }
+                    };
+                }
+
+
+
+            },
+            async drawCanvas(imagesArray, transfroms, { lat, lon } = {}) {
+                try {
+                    this.transfroms = transfroms || []
+                    this.args = {
+                        draw: (ctx) => {
+                            this.drawIng = false
+                            this.transfroms.forEach(transform => {
+                                transform.forEach(({ translate, scale, rotate, center }) => {
+                                    // 设置绘制颜色
+                                    center && ctx.translate(center.x, center.y)
+                                    translate && ctx.translate(translate.x, translate.y)
+                                    rotate && ctx.rotate(rotate * (Math.PI / 180))
+                                    scale && ctx.scale(scale[0], scale[1])
+                                    center && ctx.translate(-center.x, -center.y)
+                                    // if (center) {
+                                    //   ctx.fillStyle = "geend";
+                                    //     // 绘制成矩形
+                                    //   ctx.fillRect(center.x, center.y, 100, 100);
+                                    // }
+                                })
+                            })
+
+                            setTimeout(() => {
+                                this.updateBox(this.imgCanvas.imgBox)
+                            })
+                        },
+                        file: imagesArray,
+                        lon: lon || 113.59963069739054,
+                        lat: lat || 22.364821730960752,
+                        translate: { x: 0, y: 0 },
+                        scale: [1, 1],
+                        direction: 0
+                    }
+                    this.imgCanvas = await this.map.loadImage(this.args)
+                } catch (e) {
+                    console.error(e)
+                    alert(e)
+                }
+            },
+            updateBox() {
+                const calcPos = pos => getCanvasToScreenPos(this.imgCanvas, pos)
+                this.box = {
+                    tl: this.imgCanvas.posToReal(calcPos({ x: 0, y: 0 })),
+                    tc: this.imgCanvas.posToReal(calcPos({ x: this.imgCanvas.imgData.width / 2, y: 0 })),
+                    tr: this.imgCanvas.posToReal(calcPos({ x: this.imgCanvas.imgData.width, y: 0 })),
+                    rc: this.imgCanvas.posToReal(calcPos({ x: this.imgCanvas.imgData.width, y: this.imgCanvas.imgData.height / 2 })),
+                    lc: this.imgCanvas.posToReal(calcPos({ x: 0, y: this.imgCanvas.imgData.height / 2 })),
+                    br: this.imgCanvas.posToReal(calcPos({ x: this.imgCanvas.imgData.width, y: this.imgCanvas.imgData.height })),
+                    bl: this.imgCanvas.posToReal(calcPos({ x: 0, y: this.imgCanvas.imgData.height })),
+                    bc: this.imgCanvas.posToReal(calcPos({ x: this.imgCanvas.imgData.width / 2, y: this.imgCanvas.imgData.height })),
+                    cc: this.imgCanvas.posToReal(calcPos({ x: this.imgCanvas.imgData.width / 2, y: this.imgCanvas.imgData.height / 2 })),
+                }
+
+                let maxX = this.box.tl.x
+                let minX = this.box.tl.x
+                let maxY = this.box.tl.y
+                let minY = this.box.tl.y
+                Object.values(this.box).forEach(({ x, y }) => {
+                    x > maxX && (maxX = x)
+                    y > maxY && (maxY = y)
+                    x < minX && (minX = x)
+                    y < minY && (minY = y)
+                })
+                this.box.width = Math.abs(maxX - minX)
+                this.box.height = Math.abs(maxY - minY)
+            },
+            mapStartHandle() {
+                this.mapDown = true
+            },
+            moveHandle(e) {
+                if (!this.imgCanvas || !this.imgCanvas.imgBox) {
+                    return;
+                }
+                if (this.moveing && this.oper) {
+                    if (!this.time && !this.drawIng) {
+                        this.move(e)
+                        this.time = null
+                    }
+                } else {
+                    this.mapDown && this.imgCanvas.imageLayer.refresh()
+                    // const [start, end] = this.box
+
+                    // this.isHover = e.clientX > start.x && e.clientX < end.x &&
+                    //   e.clientY > start.y && e.clientY < end.y
+                }
+            },
+            startMove(ev, oper, dir) {
+                this.startTransform = {
+                    ...this.args
+                }
+                this.transfroms.push([])
+                this.moveing = true
+                this.oper = oper
+                this.dir = dir
+                this.startMovePos = {
+                    x: ev.clientX,
+                    y: ev.clientY
+                }
+            },
+            move(ev) {
+                if (!this.moveing || this.drawIng) return;
+                const transfrom = this.transfroms[this.transfroms.length - 1]
+                const start = getScreenToCanvasPos(
+                    this.imgCanvas,
+                    this.startMovePos
+                )
+                const end = getScreenToCanvasPos(
+                    this.imgCanvas, { x: ev.clientX, y: ev.clientY }
+                )
+                const move = {
+                    x: end.x - start.x,
+                    y: end.y - start.y
+                }
+
+
+                if (this.oper === 'move') {
+                    transfrom.length = 0
+                    transfrom.push({ translate: move })
+                } else if (this.oper === 'scale') {
+
+                    const doScale = (transfrom && transfrom[0] && transfrom[0].scale) || [1, 1]
+                    move.x = move.x * doScale[0]
+                    move.y = move.y * doScale[1]
+                    const width = this.imgCanvas.position[2]
+                    const height = this.imgCanvas.position[3]
+                    let xScale, yScale
+
+                    switch (this.dir) {
+                        case 'tl':
+                            xScale = (width - move.x) / width
+                            yScale = (height - move.y) / height
+                            if (xScale < yScale) {
+                                yScale = xScale
+                            } else {
+                                xScale = yScale
+                            }
+                            if (xScale > 0 && yScale > 0) {
+                                transfrom.length = 0
+                                transfrom.push({
+                                    scale: [xScale, yScale],
+                                    center: { x: this.imgCanvas.position[2], y: this.imgCanvas.position[3] }
+                                })
+                            }
+                            break;
+                        case 'tc':
+                            yScale = (height - move.y) / height
+                            if (yScale > 0) {
+                                transfrom.length = 0
+                                transfrom.push({
+                                    scale: [1, yScale],
+                                    center: { x: 0, y: this.imgCanvas.position[3] }
+                                })
+                            }
+                            break;
+                        case 'tr':
+                            xScale = (width + move.x) / width
+                            yScale = (height - move.y) / height
+                            if (xScale > yScale) {
+                                yScale = xScale
+                            } else {
+                                xScale = yScale
+                            }
+                            if (xScale > 0 && yScale > 0) {
+                                transfrom.length = 0
+                                transfrom.push({
+                                    scale: [xScale, yScale],
+                                    center: { x: 0, y: this.imgCanvas.position[3] }
+                                })
+                            }
+                            break;
+                        case 'rc':
+                            xScale = (width + move.x) / width
+                            if (xScale > 0) {
+                                transfrom.length = 0
+                                transfrom.push({
+                                    scale: [xScale, 1],
+                                    center: { x: 0, y: this.imgCanvas.position[3] }
+                                })
+                            }
+                            break;
+                        case 'lc':
+                            xScale = (width - move.x) / width
+                            if (xScale > 0) {
+                                transfrom.length = 0
+                                transfrom.push({
+                                    scale: [xScale, 1],
+                                    center: { x: this.imgCanvas.position[2], y: this.imgCanvas.position[3] }
+                                })
+                            }
+                            break;
+                        case 'br':
+                            xScale = (width + move.x) / width
+                            yScale = (height + move.y) / height
+                            if (xScale < yScale) {
+                                yScale = xScale
+                            } else {
+                                xScale = yScale
+                            }
+                            if (xScale > 0 && yScale > 0) {
+                                transfrom.length = 0
+                                transfrom.push({
+                                    scale: [xScale, yScale],
+                                    center: { x: 0, y: 0 }
+                                })
+                            }
+                            break;
+                        case 'bl':
+                            xScale = (width - move.x) / width
+                            yScale = (height + move.y) / height
+                            if (xScale < yScale) {
+                                yScale = xScale
+                            } else {
+                                xScale = yScale
+                            }
+                            if (xScale > 0 && yScale > 0) {
+                                transfrom.length = 0
+                                transfrom.push({
+                                    scale: [xScale, yScale],
+                                    center: { x: this.imgCanvas.position[2], y: 0 }
+                                })
+                            }
+                            break;
+                        case 'bc':
+                            yScale = (height + move.y) / height
+                            if (yScale > 0) {
+                                transfrom.length = 0
+                                transfrom.push({
+                                    scale: [1, yScale],
+                                    center: { x: 0, y: 0 }
+                                })
+                            }
+                            break;
+                    }
+                } else if (this.oper === 'rotate') {
+                    let move = ev.clientX - this.startMovePos.x
+                    let height = this.imgCanvas.position[3]
+                    let width = this.imgCanvas.position[2]
+                    let center = { x: width / 2, y: height / 2 }
+
+                    // let zrotate = transfrom.
+                    transfrom.length = 0
+                    transfrom.push({
+                        rotate: move / 3,
+                        center: center
+                    })
+                }
+                // this.startMovePos = {
+                //     x: ev.clientX,
+                //     y: ev.clientY
+                // }
+                this.drawIng = true
+                this.imgCanvas.imageLayer.refresh()
+            },
+            upMove() {
+                this.moveing = false
+                this.mapDown = false
+                this.oper = null
+                this.dir = null
+                this.startMovePos = null
+
+
+            },
+            uploadData() {
+                if (!this.args) {
+                    return Promise.resolve(true)
+                }
+
+                const promises = []
+                const files = []
+                for (let i = 0; i < this.args.img.length; i++) {
+                    const images = this.args.img[i]
+                    for (let j = 0; j < images.length; j++) {
+                        const file = images[j][2]
+                        if (typeof file !== 'string') {
+                            const suffix = file.type.substr(file.type.indexOf('/') + 1)
+                            files.push({ dir: `${i}/${j}.${suffix}`, file })
+                        }
+                    }
+                }
+
+                if (files.length) {
+                    if (files.length === 1) {
+                        const file = files[0]
+                        files.length = 0
+                        files.push({
+                            ...file,
+                            dir: file.file.name
+                        })
+                    }
+                    promises.push(
+                        request.uploadFiles(files)
+                    )
+                }
+
+                promises.push(
+                    request.updateCoord({
+                        ...this.boxPos,
+                        transfroms: this.transfroms
+                    })
+                )
+                return Promise.all(promises)
+            },
+            getInfo() {
+                return {
+                    pos: this.boxPos,
+                    img: this.args.img
+                }
+            }
+        },
+        computed: {
+            boxStyle() {
+                if (this.box && Object.keys(this.box).length) {
+                    const box = this.box
+                    return {
+                        width: box.width + 20 + 'px',
+                        height: box.height + 20 + 'px',
+                        left: box.cc.x + 'px',
+                        top: box.cc.y + 'px'
+                    }
+                } else {
+                    return {}
+                }
+            },
+            boxPos() {
+                if (this.box && Object.keys(this.box).length) {
+                    const ret = {}
+                    for (let key in this.box) {
+                        if (key !== 'width' && key !== 'height') {
+                            ret[key] = this.map.screenToLatlan(this.box[key])
+                        }
+                    }
+                    let rotate = 0
+                    let scale = {x: 1, y: 1}
+                    this.transfroms.forEach(items => {
+                        items.forEach(item => {
+                            if (item.rotate) {
+                                rotate = Number((rotate + Number(item.rotate)).toFixed(2))
+                            }
+                            if (item.scale) {
+                                scale.x *= item.scale[0]
+                                scale.y *= item.scale[1]
+                            }
+                        })
+                    })
+                    ret.rotate = rotate
+                    ret.scale = scale
+                    let ctx = this.imgCanvas.getContext('2d')
+                    let key = ['a', 'b', 'c', 'd', 'e', 'f']
+                    let imatrix = ctx.getTransform()
+                    ret.imatrix = {}
+                    key.forEach(k => ret.imatrix[k] = imatrix[k])
+                    return ret
+                } else {
+                    return {}
+                }
+            }
+        },
+        mounted() {
+            Promise.all([
+                request.getDetail(),
+                request.getSceneInfo()
+            ]).then(async ([res1, res2]) => {
+                const {
+                    path,
+                    position
+                } = res1.data.data
+                const { location } = res2.data[0]
+
+                if (path && path.length > 0) {
+                    const files = {}
+                    path.forEach(path => (files[path] = root + path))
+                    await this.drawCanvas(
+                        analysisFiles(files),
+                        position ? position.transfroms : [], {
+                        lat: location[1],
+                        lon: location[0],
+                    }
+                    )
+                }
+
+                this.lat = location[1]
+                this.lon = location[0]
+            })
+
+            document.documentElement.addEventListener('mousemove', ev => {
+                ev.stopPropagation()
+                ev.preventDefault()
+                this.moveHandle.bind(this)(ev)
+                // this.move.bind(this)(ev)
+            })
+            document.documentElement.addEventListener('mousedown', ev => {
+                this.mapStartHandle.bind(this)(ev)
+            })
+            document.documentElement.addEventListener('mouseup', ev => {
+                ev.stopPropagation()
+                ev.preventDefault()
+                this.upMove.bind(this)()
+            })
+            this.map = initMap(this.mapOl)
+
+        }
+    })
+})();

locat/style.css

@@ -29,7 +29,7 @@ body {
     justify-content: center;
 }
 
-.map {
+.map-layer {
     height: 800px;
     width: 94%;
     padding: 0px;
@@ -38,6 +38,11 @@ body {
 
 }
 
+.map-layer .map {
+    width: 100%;
+    height: 100%;
+}
+
 #plane {
     width: 30%;
     height: 100%;
@@ -279,4 +284,44 @@ input::-webkit-input-placeholder {
     background-color: rgb(0, 0, 0, 0.3);
     z-index: 1;
     color: #fff;
-}
+}
+
+.transform-layer {
+    top: 0;
+    left: 0;
+}
+
+.upload-layer {
+    z-index: 99;
+    left: 0;
+    top: 0;
+    position: absolute;
+}
+
+.ctrls {
+    position: absolute;
+    z-index: 9;
+    --margin: 10px;
+    transform: translate(-50%, -50%);
+  }
+  
+  .cctrls span {
+    z-index: 10;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: red;
+    cursor: pointer;
+    transform: translate(-50%, -50%);
+  }
+  
+  .box-info {
+    padding: 10px;
+    color: #fff;
+    position: absolute;
+    bottom: 0;
+    pointer-events: none;
+    left: 0;
+    background: rgba(0, 0, 0, 0.5);
+  }

translations/json/zh.json

@@ -1,145 +1,145 @@
 {
-  "POIs": "POI",
-  "Active": "活动",
-  "Inactive": "非活动",
-  "The POI audit log is a record of all changes made.": "POI审核日志是所有更改的记录。",
-  "Keep audit logs for:": "保留其审核日志：",
-  "Download": "下载",
-  "Delimiter:": "分隔符：",
-  "Time": "时间",
-  "Cancel": "取消",
-  "Name": "名称",
-  "Scanned At": "扫描于",
-  "X": "X",
-  "Y": "Y",
-  "Z": "Z",
-  "Loading ...": "正在加载...",
-  "No control points found.": "找不到控制点。",
-  "min": "最小值",
-  "Choose which control points should be used for processing": "选择要用于处理的控制点",
-  "Save Changes": "保存更改",
-  "Upload Data": "上传数据",
-  "Upload recorded data": "上传所记录的数据",
-  "or drop files here": "或将文件拖到这里",
-  "Connect the SSD from a 4dkankan device and drag-and-drop your datasets_rec folder or the dataset folder here to start": "从4dkankan设备连接SSD，将您的datasets_rec文件夹或数据集文件夹拖放到这里，以便开始",
-  "Download Processed Data": "下载所处理的数据",
-  "Please select the file of {datasetName} you want to download": "请选择您想下载的{datasetName}文件",
-  "Colored point cloud {fileExtension}": "彩色点云{fileExtension}",
-  "Raw point cloud {fileExtension}": "原始点云{fileExtension}",
-  "Ground Control Points verification file {fileExtension}": "地面控制点验证文件{fileExtension}",
-  "Dataset Archive {fileExtension}": "数据集档案文件{fileExtension}",
-  "Okay": "确定",
-  "Processed Data": "已处理的数据",
-  "Copy to Dataset Management": "复制到数据集管理",
-  "No datasets processed yet": "尚未处理任何数据集",
-  "Go here to process your first dataset:": "转到此处，以处理您的第一个数据集：",
-  "Processing Tasks": "处理任务",
-  "Process your recorded data": "处理您所记录的数据",
-  "Compute a point cloud with 360° panoramas in the quality you need. We will automatically remove any moving objects. You can anonymize your data by choosing to blur faces from your datasets.": "采用所需品质的360°全景图像计算点云。我们将自动移除任何移动对象。您可选择从数据集中模糊人脸，从而消除您的数据信息。",
-  "Create a new processing task": "创建新处理任务",
-  "View control point configuration": "查看控制点配置",
-  "New Processing Task": "新处理任务",
-  "Select the datasets you want to process": "选择您认为要处理的数据集",
-  "Not yet processed": "尚未处理",
-  "Wait a moment while we retrieve your data": "请稍等，我们正在检索您的数据",
-  "unsaved": "已恢复",
-  "expand": "扩展",
-  "Double click to add a description": "双击以添加说明",
-  "Export Measurements": "导出测量",
-  "Import all measurements": "导入所有测量",
-  "The measurement share link to import all measurements at once could not be generated for the selected measurements because the link is too long. Please deselect some measurements and try again or use the share link of each measurement to import them separately.": "无法为所选测量生成一次导入所有测量的测量共享链接，因为链接太长。请取消选择某些测量然后重试，或使用每个测量的分享链接逐一导入。",
-  "Copy to clipboard": "复制到剪贴板",
-  "Export as PDF": "导出为PDF",
-  "No measurements taken yet": "尚未进行测量",
-  "Select All": "选择所有",
-  "Share Selected": "分享所选",
-  "Delete Selected": "删除所选",
-  "Save Selected": "保存所选",
-  "Free": "自由",
-  "Distance": "距离",
-  "Free Distance": "自由距离",
-  "Polygon": "多边形",
-  "Free Area": "自由面积",
-  "Horizontal": "水平",
-  "Horizontal Distance": "水平距离",
-  "Horizontal Area": "水平面积",
-  "Rectangle": "矩形",
-  "Horizontal Rectangle": "水平矩形",
-  "Vertical": "垂直",
-  "Vertical Distance": "垂直距离",
-  "Vertical Area": "垂直面积",
-  "Vertical Rectangle": "垂直矩形",
-  "The depth maps are used in panorama mode by the cursor to visualize the distance of an object to the current position. The improved depth maps allow you to capture and measure details in the panoramas more accurately.": "深度图通过光标用于全景模式，以使对象与当前位置的距离可视化。经过改进的深度图可使您更精确地捕捉和测量全景图像中的细节。",
-  "The update may take a while, but during this time you will be still able use the measurement mode.": "更新可能需要一段时间，但在此期间，您仍能使用测量模式。",
-  "Do you want to start the update?": "您要开始更新吗？",
-  "Please contact your 4dkankan administrator to update your data. The update will allow you to capture and measure details in the panoramas more accurately.": "请联系您的4dkankan管理员以更新您的数据。更新将使您能够更准确地捕捉和测量全景图像的细节。",
-  "Magnifier": "放大镜",
-  "Open ID group mapping": "打开ID组映射",
-  "Create these groups in your OIDC system of record ensuring you create a mapper to a claim array matching your selector in BOTH your identity and access tokens.": "在您的OIDC记录系统中创建这些组，确保您创建一个声明数组的映射器，而该声明数组是与标识和访问令牌中的选择器匹配的。",
-  "Your administrator may then assign membership within the OIDC system of record. Users will have the rights and privileges assigned to members of that group when they log in.": "然后，您的管理员可以在OIDC记录系统中分配成员资格。用户在登录时将拥有分配给该组成员的权利和特权。",
-  "4dkankan Groups": "4dkankan组",
-  "Export CSV": "导出CSV",
-  "Export JSON": "导出JSON",
-  "Today": "今天",
-  "Yesterday": "昨天",
-  "Last 7 days": "过去7天",
-  "This Month": "本月",
-  "Last Month": "上个月",
-  "This Year": "今年",
-  "Last Year": "去年",
-  "Comma ( , )": "逗号（，）",
-  "Semicolon ( ; )": "分号（；）",
-  "Tab": "选项卡",
-  "forever": "永远",
-  "one day": "一天",
-  "one week": "一周",
-  "one month": "一个月",
-  "one year": "一年",
-  "Download POI Audit Logs": "下载POI审核日志",
-  "Dataset": "数据集",
-  "Status": "状态",
-  "Recorded At": "记录于",
-  "Panorama Count": "全景图像计数",
-  "Scanned Area": "扫描面积",
-  "Size": "尺寸",
-  "GCPs": "GCP",
-  "Processing Task": "正在处理任务",
-  "Started": "已开始",
-  "All Datasets": "所有数据集",
-  "Success": "成功",
-  "Failed": "失败",
-  "Progress": "进度",
-  "Stop processing": "停止处理",
-  "This cannot be undone": "这是无法撤消的",
-  "Go to processed datasets": "转到已处理的数据集",
-  "Download logs": "下载日志",
-  "{percentageNumber}% finished": "已完成{{percentageNumber}%",
-  "Decline": "拒绝",
-  "Confirm": "确认",
-  "Do you want to navigate away from the current page?": "您要离开当前页面吗？",
-  "Copied link to clipboard": "已将链接复制到剪贴板",
-  "Show Selected": "显示所选",
-  "Hide Selected": "隐藏所选",
-  "Area": "面积",
-  "Save Changes Before Leaving": "离开前保存更改",
-  "You have unsaved changes to the {subject}.": "您已将更改恢复到{subject}。",
-  "Measurement Tool": "测量工具",
-  "Discard": "放弃",
-  "Save": "保存",
-  "Preparing selected measurements...": "正在准备所选测量…",
-  "measurements": "测量",
-  "Cancel current measurement": "取消当前测量",
-  "Delete last point": "删除最后的点",
-  "Cycle Distance": "循环距离",
-  "Cycle Polygon": "循环多边形",
-  "Cycle Rectangle": "循环矩形",
-  "Horizontal Polygon": "水平多边形",
-  "Vertical Polygon": "垂直多边形",
-  "Complete Measurement": "完整测量",
-  "Depth Images Update Available": "有深度图像更新可用",
-  "Later": "以后",
-  "Update": "更新",
-  "New Data Update Available": "有新数据更新可用",
-  "Close": "关闭",
-  "This action cannot be undone.": "此操作无法撤消。"
+    "POIs": "POI",
+    "Active": "活动",
+    "Inactive": "非活动",
+    "The POI audit log is a record of all changes made.": "POI审核日志是所有更改的记录。",
+    "Keep audit logs for:": "保留其审核日志：",
+    "Download": "下载",
+    "Delimiter:": "分隔符：",
+    "Time": "时间",
+    "Cancel": "取消",
+    "Name": "名称",
+    "Scanned At": "扫描于",
+    "X": "X",
+    "Y": "Y",
+    "Z": "Z",
+    "Loading ...": "正在加载...",
+    "No control points found.": "找不到控制点。",
+    "min": "最小值",
+    "Choose which control points should be used for processing": "选择要用于处理的控制点",
+    "Save Changes": "保存更改",
+    "Upload Data": "上传数据",
+    "Upload recorded data": "上传所记录的数据",
+    "or drop files here": "或将文件拖到这里",
+    "Connect the SSD from a 4Dkankan device and drag-and-drop your datasets_rec folder or the dataset folder here to start": "从4Dkankan设备连接SSD，将您的datasets_rec文件夹或数据集文件夹拖放到这里，以便开始",
+    "Download Processed Data": "下载所处理的数据",
+    "Please select the file of {datasetName} you want to download": "请选择您想下载的{datasetName}文件",
+    "Colored point cloud {fileExtension}": "彩色点云{fileExtension}",
+    "Raw point cloud {fileExtension}": "原始点云{fileExtension}",
+    "Ground Control Points verification file {fileExtension}": "地面控制点验证文件{fileExtension}",
+    "Dataset Archive {fileExtension}": "数据集档案文件{fileExtension}",
+    "Okay": "确定",
+    "Processed Data": "已处理的数据",
+    "Copy to Dataset Management": "复制到数据集管理",
+    "No datasets processed yet": "尚未处理任何数据集",
+    "Go here to process your first dataset:": "转到此处，以处理您的第一个数据集：",
+    "Processing Tasks": "处理任务",
+    "Process your recorded data": "处理您所记录的数据",
+    "Compute a point cloud with 360° panoramas in the quality you need. We will automatically remove any moving objects. You can anonymize your data by choosing to blur faces from your datasets.": "采用所需品质的360°全景图像计算点云。我们将自动移除任何移动对象。您可选择从数据集中模糊人脸，从而消除您的数据信息。",
+    "Create a new processing task": "创建新处理任务",
+    "View control point configuration": "查看控制点配置",
+    "New Processing Task": "新处理任务",
+    "Select the datasets you want to process": "选择您认为要处理的数据集",
+    "Not yet processed": "尚未处理",
+    "Wait a moment while we retrieve your data": "请稍等，我们正在检索您的数据",
+    "unsaved": "已恢复",
+    "expand": "扩展",
+    "Double click to add a description": "双击以添加说明",
+    "Export Measurements": "导出测量",
+    "Import all measurements": "导入所有测量",
+    "The measurement share link to import all measurements at once could not be generated for the selected measurements because the link is too long. Please deselect some measurements and try again or use the share link of each measurement to import them separately.": "无法为所选测量生成一次导入所有测量的测量共享链接，因为链接太长。请取消选择某些测量然后重试，或使用每个测量的分享链接逐一导入。",
+    "Copy to clipboard": "复制到剪贴板",
+    "Export as PDF": "导出为PDF",
+    "No measurements taken yet": "尚未进行测量",
+    "Select All": "选择所有",
+    "Share Selected": "分享所选",
+    "Delete Selected": "删除所选",
+    "Save Selected": "保存所选",
+    "Free": "自由方向",
+    "Distance": "直线距离",
+    "Free Distance": "自由距离",
+    "Polygon": "多边形",
+    "Free Area": "自由面积",
+    "Horizontal": "水平方向",
+    "Horizontal Distance": "水平距离",
+    "Horizontal Area": "水平面积",
+    "Rectangle": "矩形",
+    "Horizontal Rectangle": "水平矩形",
+    "Vertical": "垂直方向",
+    "Vertical Distance": "垂直距离",
+    "Vertical Area": "垂直面积",
+    "Vertical Rectangle": "垂直矩形",
+    "The depth maps are used in panorama mode by the cursor to visualize the distance of an object to the current position. The improved depth maps allow you to capture and measure details in the panoramas more accurately.": "深度图通过光标用于全景模式，以使对象与当前位置的距离可视化。经过改进的深度图可使您更精确地捕捉和测量全景图像中的细节。",
+    "The update may take a while, but during this time you will be still able use the measurement mode.": "更新可能需要一段时间，但在此期间，您仍能使用测量模式。",
+    "Do you want to start the update?": "您要开始更新吗？",
+    "Please contact your 4Dkankan administrator to update your data. The update will allow you to capture and measure details in the panoramas more accurately.": "请联系您的4Dkankan管理员以更新您的数据。更新将使您能够更准确地捕捉和测量全景图像的细节。",
+    "Magnifier": "放大镜",
+    "Open ID group mapping": "打开ID组映射",
+    "Create these groups in your OIDC system of record ensuring you create a mapper to a claim array matching your selector in BOTH your identity and access tokens.": "在您的OIDC记录系统中创建这些组，确保您创建一个声明数组的映射器，而该声明数组是与标识和访问令牌中的选择器匹配的。",
+    "Your administrator may then assign membership within the OIDC system of record. Users will have the rights and privileges assigned to members of that group when they log in.": "然后，您的管理员可以在OIDC记录系统中分配成员资格。用户在登录时将拥有分配给该组成员的权利和特权。",
+    "4Dkankan Groups": "4Dkankan组",
+    "Export CSV": "导出CSV",
+    "Export JSON": "导出JSON",
+    "Today": "今天",
+    "Yesterday": "昨天",
+    "Last 7 days": "过去7天",
+    "This Month": "本月",
+    "Last Month": "上个月",
+    "This Year": "今年",
+    "Last Year": "去年",
+    "Comma ( , )": "逗号（，）",
+    "Semicolon ( ; )": "分号（；）",
+    "Tab": "选项卡",
+    "forever": "永远",
+    "one day": "一天",
+    "one week": "一周",
+    "one month": "一个月",
+    "one year": "一年",
+    "Download POI Audit Logs": "下载POI审核日志",
+    "Dataset": "数据集",
+    "Status": "状态",
+    "Recorded At": "记录于",
+    "Panorama Count": "全景图像计数",
+    "Scanned Area": "扫描面积",
+    "Size": "尺寸",
+    "GCPs": "GCP",
+    "Processing Task": "正在处理任务",
+    "Started": "已开始",
+    "All Datasets": "所有数据集",
+    "Success": "成功",
+    "Failed": "失败",
+    "Progress": "进度",
+    "Stop processing": "停止处理",
+    "This cannot be undone": "这是无法撤消的",
+    "Go to processed datasets": "转到已处理的数据集",
+    "Download logs": "下载日志",
+    "{percentageNumber}% finished": "已完成{{percentageNumber}%",
+    "Decline": "拒绝",
+    "Confirm": "确认",
+    "Do you want to navigate away from the current page?": "您要离开当前页面吗？",
+    "Copied link to clipboard": "已将链接复制到剪贴板",
+    "Show Selected": "显示所选",
+    "Hide Selected": "隐藏所选",
+    "Area": "面积",
+    "Save Changes Before Leaving": "离开前保存更改",
+    "You have unsaved changes to the {subject}.": "您已将更改恢复到{subject}。",
+    "Measurement Tool": "测量工具",
+    "Discard": "放弃",
+    "Save": "保存",
+    "Preparing selected measurements...": "正在准备所选测量…",
+    "measurements": "测量",
+    "Cancel current measurement": "取消当前测量",
+    "Delete last point": "删除最后的点",
+    "Cycle Distance": "循环距离",
+    "Cycle Polygon": "循环多边形",
+    "Cycle Rectangle": "循环矩形",
+    "Horizontal Polygon": "水平多边形",
+    "Vertical Polygon": "垂直多边形",
+    "Complete Measurement": "完整测量",
+    "Depth Images Update Available": "有深度图像更新可用",
+    "Later": "以后",
+    "Update": "更新",
+    "New Data Update Available": "有新数据更新可用",
+    "Close": "关闭",
+    "This action cannot be undone.": "此操作无法撤消。"
 }