perf: 从oss获取scales数据

Author: x3zvawq

README.md

@@ -51,14 +51,35 @@ export default {
 | content | 悬浮框显示的内容 | 否   |         |
 | focus   | 是否展示这个点   | 否   | true    | Boolean，多个数据focus都为true时只会展示第一个 |
 
-### overview
+### overview 总览模式
 
 默认情况下，overview为true。  
-组件会尝试展示所有的点位，并且把整个地图缩放以适应容器大小。  
-如果希望不缩放地图，仅展示一部分点位可以设置overview为false。  
-组件将会只展示特定的点位，可以在datas内的对应对象设置focus为true或者给组件传入focus属性，该属性应该是要展示的点位在datas内的索引。  
+
+**当overview为true时：**  
+组件会把整个地图缩放以适应容器大小，尝试展示完整的地图与点位。  
+
+**当overview为false时：**  
+组件会以地图的原尺寸展示地图，仅展示以特定点位为`中心`的周围一部分点位。  
+可以在datas内的对应对象设置focus为true指定中心点位。  
+或者给组件传入focus属性，值是要展示的点位在datas内的索引。  
 如果不通过任何方式指定要展示的点位会直接取第一个。  
 
+### map-draggable
+
+是否允许用户拖动地图，仅在overview为false时生效。  
+此时用户可以通过拖动地图来改变可见区域  
+即默认会以focus点为中心，但是用户可以拖动来改变展示的区域  
+
+### point-draggable
+
+是否允许用户拖动点位。需要`:datas.sync="points"`  
+此时用户可以通过拖动点位来改变点位的坐标。  
+
+### trim-border
+
+是否移除地图边框。  
+西山居的中地图图片是有边框的，默认不展示边框，如果需要展示可以设为`true`
+
 ## slots
 
 允许一些部分的自定义slot。

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-map",
-    "version": "0.1.4",
+    "version": "0.1.5",
     "description": "JX3BOX Game Map",
     "scripts": {
         "serve": "vue-cli-service serve",

src/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="app">
-        <jx3box-map :map-id="8" :datas="datas" :overview="false"></jx3box-map>
+        <jx3box-map :map-id="8" :datas="datas" :overview="true"></jx3box-map>
     </div>
 </template>
 
@@ -42,7 +42,7 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 240px;
-    height: 240px;
+    width: 1000px;
+    height: 1000px;
 }
 </style>

src/components/Map.vue

@@ -31,15 +31,17 @@
 
 <script>
 import jx3boxData from "@jx3box/jx3box-common/data/jx3box.json";
-import mapScales from "../data/map_scales.json";
+import { getMapScales } from "../service/data";
 
 export default {
     name: "Jx3boxMap",
     props: {
+        // 地图ID
         mapId: {
             type: Number,
             default: 1,
         },
+        // 点位数据
         datas: {
             type: Array,
             default: () => [],
@@ -52,13 +54,20 @@ export default {
             type: Number,
             default: undefined,
         },
+        hiddenBoarder: {
+            type: Boolean,
+            default: false,
+        },
+        draggable: {
+            type: Boolean,
+            default: true,
+        },
     },
-    data() {
-        return {
-            outerWidth: 0,
-            outerHeight: 0,
-        };
-    },
+    data: () => ({
+        outerWidth: 0,
+        outerHeight: 0,
+        mapScales: {},
+    }),
     computed: {
         // 内层容器宽高
         innerWidth() {
@@ -120,7 +129,7 @@ export default {
         },
         // 地图ID、名称、尺寸、图片等
         subId() {
-            let scales = mapScales[this.mapId];
+            let scales = this.mapScales[this.mapId];
             if (!scales || Object.keys(scales) <= 1) return 0;
             let _sub = 0;
             let _subScale = 0;
@@ -139,16 +148,19 @@ export default {
             return _sub;
         },
         mapName() {
-            return mapScales[this.mapId][this.subId].Name;
+            return this.mapScales[this.mapId]?.[this.subId]?.Name;
         },
         mapScale() {
-            return mapScales[this.mapId][this.subId];
+            return this.mapScales[this.mapId]?.[this.subId];
         },
         mapImg() {
             return `${jx3boxData.__imgPath}map/maps/map_${this.mapId}_${this.subId}.png`;
         },
     },
     mounted() {
+        getMapScales().then((data) => {
+            this.mapScales = data;
+        });
         this.$nextTick(function () {
             this.updateSize();
             window.addEventListener("resize", this.updateSize);
@@ -160,6 +172,7 @@ export default {
     methods: {
         pointPosition(item) {
             const scale = this.mapScale;
+            if (!scale) return { left: 0, bottom: 0 };
             const Width = scale.Width / scale.Scale;
             const Height = scale.Height / scale.Scale;
             const left = ((item.x - scale.StartX) / Width) * this.innerWidth;

src/data/map_scales.json

@@ -0,0 +1,7 @@
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+
+const { __imgPath } = JX3BOX;
+
+export const getMapScales = () => {
+    return fetch(`${__imgPath}/map/data/map_scales.json`).then((res) => res.json());
+};