增加地图缩放、拖动操作及地图字体调整

src/server/api.js

@@ -3,7 +3,7 @@ let FILE_URL = ''
 switch (process.env.NODE_ENV) {
 case 'production':
   IMG_URL = 'http://10.221.1.181:8080/dist/static/'
-  FILE_URL = '/dist/static/'
+  FILE_URL = '/quanguo/static/'
   break
 default:
   IMG_URL = 'http://localhost:8080/static/'

src/views/china-fishing.vue

@@ -308,7 +308,7 @@ $radius = 2rem
           background $color-map(1)
       >div
         margin-bottom 0.5rem
-        line-height 1.4rem
+        line-height 1.2rem
 
   .percent-wrapper
     display flex

src/views/components/map.vue

@@ -90,12 +90,20 @@ export default {
           map: 'china',
           left: '5%',
           top: '5%',
+          zoom: 1, //当前视角的缩放比例
+          roam: true, //是否开启平游或缩放
+          scaleLimit: { //滚轮缩放的极限控制
+            min: 0.8,
+            max: 2,
+          },
           label: {
             normal: {
               show: false,
             },
             emphasis: {
               color: '#fff',
+              fontSize: Math.floor(screen.height * 2 / 100),
+              fontFamily: 'Pangmenzhengdao',
             }
           },
           itemStyle: {
@@ -114,7 +122,8 @@ export default {
           regions: [],
         },
         series: []
-      }
+      },
+      curProvince: null,
     }
   },
   mounted() {
@@ -133,10 +142,20 @@ export default {
       this.map.on('click', (ev) => {
         const {name} = ev.data
         this.setRegions(name)
+        this.curProvince = name
         this.$emit('select', name)
       })
+      // 点击空白处则取消选中状态
+      this.map.getZr().on('click', e => {
+        if (!e.target && this.curProvince) {
+          const name = this.curProvince
+          this.setRegions(null)
+          this.$emit('select', name)
+        }
+      })
     },
     setRegions(name) {
+      this.curProvince = name
       if (!name) {
         this.config.geo.regions = []
         this.map.setOption(this.config)