feats

src/components/Btn.vue

@@ -3,21 +3,29 @@
 </template>
 
 <script setup>
+  const props = defineProps({
+    frontColor: {
+      type: String,
+      default: '#EEDDC1'
+    },
+    backColor: {
+      type: String,
+      default: '#9C8B7C'
+    },
+  });
 </script>
 
 <style lang="less" scoped>
 
 .btn {
-  @color: #9C8B7C;
-
   position: relative;
   min-width: 30vw;
   height: 10vw;
   line-height: 10vw;
   display: inline-block;
   margin: auto;
-  color: #EEDDC1;
-  background: @color;
+  color: v-bind(frontColor);
+  background: v-bind(backColor);
   text-align: center;
   box-sizing: border-box;
   padding: 0 1em;
@@ -26,8 +34,8 @@
     content: '';
     width: 100%;
     height: 100%;
-    border-bottom: 2px solid @color;
-    border-right: 2px solid @color;
+    border-bottom: 2px solid v-bind(backColor);
+    border-right: 2px solid v-bind(backColor);
     position: absolute;
     bottom: -4px;
     right: -4px;

src/components/Modal.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="modal-wrapper animate__animated animate__fadeIn" @touchmove.prevent @click.passive="onClickMask">
+    <div class="modal-body" :class="bodyClass" :style="bodyStyle" @click.stop>
+      <div v-if="close" class="modal-close" @click.stop="onClickClose"></div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+  const props = defineProps({
+    bodyClass: undefined,
+    bodyStyle: undefined,
+    maskClick: {
+      type: Boolean,
+      default: true
+    },
+    close: {
+      type: Boolean,
+      default: true
+    }
+  });
+
+  const emit = defineEmits(['cancel'])
+
+  const onClickMask = () => {
+    if (props.maskClick) {
+      emit('cancel');
+    }
+  }
+
+  const onClickClose = () => {
+    emit('cancel');
+  }
+</script>
+
+<style lang="less" scoped>
+.modal-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1000;
+  animation-duration: 200ms;
+  background: transparent;
+    background: rgba(0, 0, 0, 0.5);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  
+  .modal-mask {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .modal-body {
+    flex: none;
+    position: relative;
+    box-sizing: border-box;
+
+    .modal-close {
+      position: absolute;
+      width: 40px;
+      height: 40px;
+      background-image: url(/images/close.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      right: -16px;
+      top: -16px;
+    }
+  }
+}
+</style>

src/components/PageLoading.vue

@@ -0,0 +1,54 @@
+<template>
+  <Modal :close="false" v-if="loading">
+    <div class="pg-loading">
+      <div class="loading-icon">
+        <img src="/images/logo.png" alt="">
+      </div>
+      <div class="loading-content txt">
+        {{text}}
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+  import Modal from './Modal.vue';
+
+  const props = defineProps({
+    text: {
+      type: String,
+      default: '请稍候...'
+    },
+    loading: Boolean
+  })
+</script>
+
+<style lang="less" scoped>
+.pg-loading {
+  width: 100%;
+
+  .loading-icon {
+    width: 24px;
+    height: 24px;
+    margin: auto;
+    animation: loading-circle 2s linear infinite;
+  }
+
+  @keyframes loading-circle {
+    from {
+      transform: rotate(0);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .loading-content {
+    text-align: center;
+    color: #fff;
+    margin-top: 24px;
+    letter-spacing: 2px;
+  }
+}
+</style>

src/pages/pg4/Badge.vue

@@ -0,0 +1,57 @@
+<template>
+  <Modal v-if="show" @cancel="emit('cancel')">
+    <div class="badge-wrapper pg-bg txt">
+      <div class="title">领取徽章</div>
+      <div class="qrcode">
+        <img src="/images/电视台二维码.png" alt="">
+        <div>长按识别二维码</div>
+      </div>
+      <div class="desc">
+        关注“南京广播电视台”回复<br>
+        “<span class="keyword">紫金草</span>”<br>
+        领取纪紫金草徽章<br>
+        （数量有限，领完即止）
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import Modal from '@/components/Modal.vue';
+
+  const props = defineProps({
+    country: String,
+    show: Boolean
+  })
+
+  const emit = defineEmits(['cancel']);
+</script>
+
+<style lang="less" scoped>
+.badge-wrapper {
+  width: 70vw;
+  border-radius: 16px;
+  overflow: hidden;
+  text-align: center;
+  padding: 1em;
+  box-sizing: border-box;
+
+  .title {
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+
+  .qrcode {
+    width: 160px;
+    margin: auto;
+    font-size: 14px;
+  }
+
+  .keyword {
+    font-size: 18px;
+    font-weight: 700;
+    color: #A75BAD;
+  }
+}
+</style>

src/pages/pg4/Flower.vue

@@ -0,0 +1,44 @@
+<template>
+  <Modal v-if="show" @cancel="emit('cancel')">
+    <div class="txt modal-flower">
+      <p class="title">{{country}}种植数量: 12896690</p>
+      <p class="planting" @click="onPlanting">
+        <img src="/images/pg4/planting.png" alt="">
+      </p>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+  import Modal from '@/components/Modal.vue';
+
+  const props = defineProps({
+    country: String,
+    show: Boolean
+  })
+
+  const emit = defineEmits(['cancel', 'planted']);
+
+  const onPlanting = () => {
+    //
+    emit('planted');
+  }
+
+</script>
+
+<style lang="less" scoped>
+.modal-flower {
+  width: 70vw;
+  text-align: center;
+
+  .title {
+    color: #fff;
+    font-size: 16px;
+  }
+
+  .planting {
+    width: 30vw;
+    margin: auto;
+  }
+}
+</style>

src/pages/pg4/Map.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="map-pg" ref="el"></div>
+  <PageLoading :loading="loading" />
+</template>
+
+<script setup>
+  import { onMounted, ref, watch } from 'vue';
+  import PageLoading from '@/components/PageLoading.vue';
+  import countryGPS from '@/utils/country_gps';
+  import { getCountry } from '@/utils/maputil';
+  // import AMapLoader from '@amap/amap-jsapi-loader';
+  // import { getGPSOfBDCountries } from './gps';
+
+  const emit = defineEmits(['click']);
+
+  const el = ref();
+  const mapRef = ref();
+  const loading = ref(false);
+
+  // 展示部分国家
+  const mockCountries = [
+    '中国',
+    '俄罗斯',
+    '哈萨克斯坦',
+    '伊朗',
+    '印度',
+    '泰国',
+  ];
+
+  // getGPSOfBDCountries();
+
+  onMounted(() => {
+    const map = new BMap.Map(el.value);
+    const point = new BMap.Point(116.404, 39.915); // 天安门
+    map.centerAndZoom(point, 3);
+    mapRef.value = map;
+
+    // 绑定事件
+    map.addEventListener('click', (e) => {
+      console.log('-----start-----')
+      loading.value = true;
+      const { point } = e;
+      getCountry(point.lng, point.lat).then(x => {
+        emit('click', x);
+        loading.value = false;
+      console.log('-----end-----')
+      }).catch((err) => {
+        console.error(err);
+        loading.value = false;
+      });
+    });
+
+    // 显示 marker
+    const icon = new BMap.Icon('./images/logo.png', new BMap.Size(16, 16));    
+    mockCountries.forEach(country => {
+        const target = countryGPS[country];
+        if (!target) {
+          console.error(`${country} 在世界GPS列表中不存在`)
+          return;
+        }
+        
+        const point = new BMap.Point(target[0], target[1]);
+        const marker = new BMap.Marker(point, { icon });
+        map.addOverlay(marker);
+      });
+
+    // window._AMapSecurityConfig = {
+    //   securityJsCode:'f33684b9573195f9f91a4c8bc779d7e2',
+    // }
+    // AMapLoader.load({
+    //   key: "378f2af0c01b00ec919ace1699f2466f",              // 申请好的Web端开发者Key，首次调用 load 时必填
+    //   version: "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    //   plugins: [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    // }).then((AMap)=>{
+    //   const map = new AMap.Map(el.value, {
+    //     mapStyle: 'amap://styles/bff59c60c62af794ee93f1befde78625',
+    //     zoom: 3,
+    //   });
+
+    //   const countries = Object.keys(countryGPS);
+    //   countries.forEach((country) => {
+    //     const position = countryGPS[country];
+    //     const found = mockCountries.filter(x => x===country)[0];
+
+    //     console.log('----position---->', position);
+        
+    //     const marker = new AMap.Marker({
+    //       map,
+    //       offset:[-100, -16],
+    //       content: `
+    //         <div class="map-marker-box">
+    //           <div class="map-marker-title">${country}</div>
+    //           ${found ? '<div class="map-marker-icon"/>' : ''}
+    //         </div>
+    //       `,
+    //       position,
+    //     });
+      // });
+
+      // mockCountries.forEach(country => {
+      //   const target = countryGPS[country];
+      //   if (!target) {
+      //     console.error(`${country} 在世界GPS列表中不存在`)
+      //     return;
+      //   }
+        
+      //   const marker = new AMap.Marker({
+      //     map,
+      //     offset:[-100, -16],
+      //     content: `
+      //       <div class="map-marker-box">
+      //         <div class="map-marker-title">${country}</div>
+      //         <div class="map-marker-icon"/>
+      //       </div>
+      //     `,
+      //     position: target,
+      //   });
+      // });
+
+    // }).catch(e => {
+    //   console.error(e);
+    // })
+  });
+
+</script>
+
+<style lang="less" scoped>
+.map-pg {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/pages/pg4/Rule.vue

@@ -0,0 +1,43 @@
+<template>
+  <Modal v-if="show" @cancel="onCancel">
+    <div class="pg-bg txt modal-rule">
+      <h3>参与规则</h3>
+      <ul>
+        <li>选择要播撒的种子，并进行播种。</li>
+        <li>种植完成后可领取实体资金草徽章一枚。</li>
+      </ul>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import Modal from '@/components/Modal.vue';
+
+  const show = ref(true);
+
+  const onCancel = () => {
+    show.value = false;
+  }
+</script>
+
+<style lang="less" scoped>
+.modal-rule {
+  box-sizing: border-box;
+  padding: 0 1em;
+  width: 80vw;
+  text-align: center;
+  border-radius: 16px;
+  overflow: hidden;
+
+  h3 {
+    font-size: 18px;
+    font-size: 700;
+  }
+
+  ul {
+    text-align: left;
+    margin-top: 0;
+  }
+}
+</style>

src/pages/pg4/Share.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="share-wrapper">
+    <div class="share-action">
+      <img src="/images/pg4/btn_share.png" alt="" @click="emit('share')">
+      <img src="/images/pg4/btn_badge.png" alt="" @click="emit('badge')">
+    </div>
+    <div class="share-txt txt">
+      目前总种植数量: 35896690
+    </div>
+  </div>
+</template>
+
+<script setup>
+  const emit = defineEmits(['share', 'badge'])
+</script>
+
+<style lang="less" scoped>
+.share-wrapper {
+  background-image: linear-gradient(transparent, #EDEEF0 40%, #EDEEF0);
+  box-sizing: border-box;
+  padding: 10px 1em;
+  width: 100%;
+
+  .share-action {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    img {
+      flex: none;
+      width: 35vw;
+    }
+  }
+
+  .share-txt {
+    margin-top: 6px;
+    text-align: center;
+    letter-spacing: 2px;
+  }
+}
+</style>

src/pages/pg4/gps.js

@@ -0,0 +1,67 @@
+import countryGPS from '@/utils/country_gps';
+import { transform } from '@/utils/coordinate';
+
+export function getGPSOfBDCountries() {
+  return new Promise((resolve) => {    
+    const allGPS = {};
+    const countries = Object.keys(countryGPS);
+    let transNum = 0;
+    const convertor = new BMap.Convertor();
+
+    let times = 0;
+    const inst = setInterval(() => {
+      const country = countries[times];
+
+      const gps = countryGPS[country];
+
+      console.log('gps', gps);
+
+      const gpsPoint = new BMap.Point(gps[0], gps[1]);
+      // 这个地方的参数估计有问题
+      convertor.translate([gpsPoint], 1, 5, ({status, points}) => {
+        transNum += 1;
+        if (status === 0) {
+          const [bdPoint] = points;
+
+          allGPS[country] = {
+            gps: gpsPoint,
+            bd: bdPoint,
+          }
+        }
+
+        console.log(country, points, transNum);
+
+        if (transNum >= countries.length) {
+          console.log(JSON.stringify(allGPS))
+          resolve(allGPS);
+        }
+      });
+
+      
+      times ++;
+      if (times >= countries.length) {
+        clearInterval(inst);
+      }
+    }, 1000);
+
+  });
+}
+
+export function getGPSOfGD() {
+  const countries = Object.keys(countryGPS);
+
+  const allGPS = countries.reduce((acc, country) => {
+    const gps = countryGPS[country];
+    const gd = transform(gps.join(','));
+
+    return {
+      ...acc,
+      [country]: {
+        gps,
+        gd
+      }
+    }
+  }, {});
+
+  console.log(JSON.stringify(allGPS));
+}

src/pages/pg4/index.vue

@@ -1,31 +1,57 @@
 <template>
-  <div class="page" ref="el"></div>
+  <div class="page pg-bg pg4">
+    <Map @click="onMapClick" />
+    <Rule />
+    <Flower
+      :show="flowerShow"
+      :country="countryRef"
+      @planted="onPlanted"
+      @cancel="flowerShow = false"
+    />
+    <Share
+      v-if="planted"
+      class="share abs"
+      @share="onShare"
+      @badge="badgeShow = true"
+    />
+    <Badge :show="badgeShow" @cancel="badgeShow = false" />
+  </div>
 </template>
 
 <script setup>
-  import { onMounted, ref } from 'vue';
-  // import AMapLoader from '@amap/amap-jsapi-loader';
+  import { onMounted, ref, watch } from 'vue';
+  import { useRouter } from 'vue-router';
+  import Rule from './Rule.vue';
+  import Map from './Map.vue';
+  import Flower from './Flower.vue';
+  import Share from './Share.vue';
+  import Badge from './Badge.vue';
 
-  const el = ref();
+  const router = useRouter();
+  const countryRef = ref();
+  const flowerShow = ref();
+  const planted = ref(false);
+  const badgeShow = ref(false);
 
-  onMounted(() => {
-    const map = new BMap.Map(el.value);
-    const point = new BMap.Point(116.404, 39.915); // 天安门
-    map.centerAndZoom(point, 3);
-    // window._AMapSecurityConfig = {
-    //   securityJsCode:'f33684b9573195f9f91a4c8bc779d7e2',
-    // }
-    // AMapLoader.load({
-    //   key: "378f2af0c01b00ec919ace1699f2466f",              // 申请好的Web端开发者Key，首次调用 load 时必填
-    //   version: "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-    //   plugins: [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-    // }).then((AMap)=>{
-    //   const map = new AMap.Map(el.value, {
-    //     mapStyle: 'amap://styles/bff59c60c62af794ee93f1befde78625',
-    //     zoom: 3,
-    //   });
-    // }).catch(e => {
-    //   console.error(e);
-    // })
-  });
-</script>
+  const onMapClick = (country) => {
+    countryRef.value = country;
+    flowerShow.value = true;
+  }
+
+  const onPlanted = () => {
+    planted.value = true;
+    flowerShow.value = false;
+  }
+
+  const onShare = () => {
+    router.push('/share')
+  }
+
+</script>
+
+<style lang="less">
+.share {
+  bottom: 0;
+  left: 0;
+}
+</style>

src/pages/pg4/video.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="page pg-bg video-pg">
+    <video
+      src="/video/和平宣言-视频-压缩.mp4"
+      preload="preload"
+      controls="controls"
+      ref="mediaRef"
+      @ended="show = true"
+    ></video>
+    <div class="play-action animate__animated animate__fadeIn" v-if="show">
+      <div class="btns">
+        <Btn front-color="#000" back-color="rgba(255,255,255, 1)" @click="onReplay">重播</Btn>
+        <Btn front-color="#000" back-color="rgba(255,255,255, 1)" style="margin-left: 24px" @click="onNext">下一步</Btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import Btn from '@/components/Btn.vue';
+  
+  const router = useRouter();
+  const mediaRef = ref();
+  const show = ref(false);
+
+  const onReplay = () => {
+    mediaRef.value.play();
+    show.value = false;
+  }
+
+  const onNext = () => {
+    router.push('/pg4/next')
+  }
+</script>
+
+<style lang="less" scoped>
+.video-pg {
+  position: relative;
+
+  video {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+
+  .play-action {
+    position: absolute;
+    z-index: 2;
+    top: 0;
+
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .btns {
+
+    }
+  }
+}
+</style>

src/pages/share/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="share-pg">
+    <img src="/images/share.jpg" alt="">
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+.share-pg {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+}
+</style>

src/router.js

@@ -6,7 +6,9 @@ const routes = [
   { path: '/', component: () => import('@/pages/index.vue') },
   { path: '/bk1', component: () => import('@/pages/bk1/index.vue') },
   { path: '/pg2-2', component: () => import('@/pages/pg2-2/index.vue') },
-  { path: '/pg4', component: () => import('@/pages/pg4/index.vue') },
+  { path: '/pg4', component: () => import('@/pages/pg4/video.vue') },
+  { path: '/pg4/next', component: () => import('@/pages/pg4/index.vue') },
+  { path: '/share', component: () => import('@/pages/share/index.vue') },
 ]
 
 const router = createRouter({

src/utils/coordinate.js

@@ -0,0 +1,54 @@
+
+/**  
+ * 单点坐标纠偏
+ */
+const pi = 3.14159265358979324;
+const a = 6378245.0;
+const ee = 0.00669342162296594323;
+const x_pi = 3.14159265358979324 * 3000.0 / 180.0;
+
+function outOfChina(lat, lon) {
+  if(lon < 72.004 || lon > 137.8347)
+      return true;
+  if(lat < 0.8293 || lat > 55.8271)
+      return true;
+  return false;
+};
+
+function transformLat(x, y) {
+  let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
+  ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
+  ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
+  ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
+  return ret;
+};
+
+function transformLon(x, y) {
+  let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
+  ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
+  ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
+  ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
+  return ret;
+};
+
+// wgs84 转 gcj02
+export function transform (location) {
+  const [wgLon, wgLat] = location.split(',').map(x => x - 0);
+  const latlng = [];
+  if(outOfChina(wgLat, wgLon)) {
+    latlng[0] = wgLon;
+    latlng[1] = wgLat;
+    return latlng;
+  }
+  let dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
+  let dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
+  const radLat = wgLat / 180.0 * pi;
+  let magic = Math.sin(radLat);
+  magic = 1 - ee * magic * magic;
+  const sqrtMagic = Math.sqrt(magic);
+  dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
+  dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
+  latlng[0] = wgLon + dLon;
+  latlng[1] = wgLat + dLat;
+  return latlng;
+};

src/utils/country_gps.js

@@ -0,0 +1,202 @@
+
+export default {
+  "阿富汗": [63.845419, 32.932881],
+  "阿尔巴尼亚": [20.04553, 40.236795],
+  "阿尔及利亚": [2.329836, 26.237482],
+  "美属萨摩亚": [-170.829361, -14.572052],
+  "安道尔": [1.35795, 42.112186],
+  "安哥拉": [16.546512, -13.780866],
+  "安提瓜和巴布达": [-61.807301, 17.056604],
+  "阿根廷": [-68.170846, -40.593588],
+  "亚美尼亚": [44.738974, 40.023823],
+  "阿鲁巴": [-69.898198, 12.449642],
+  "澳大利亚": [133.719944, -26.475613],
+  "奥地利": [14.310332, 47.145488],
+  "阿塞拜疆": [47.53841, 40.371428],
+  "巴哈马": [-77.394555, 25.009396],
+
+  "孟加拉国": [89.93617, 23.754802],
+  "巴巴多斯": [-59.5317, 13.093871],
+  "白俄罗斯": [27.434815, 53.225932],
+  "比利时": [4.335889, 50.586323],
+  "伯利兹": [-89.049292, 16.249301],
+  "贝宁": [2.094167, 8.837661],
+  "不丹": [90.296541, 27.208804],
+  "玻利维亚": [-64.561985, -17.4458],
+  "波斯尼亚和黑塞哥维那": [18.26, 43.52],
+  "博茨瓦纳": [21.458304, -24.725057],
+  "巴西": [-54.154034, -9.152088],
+  "英属维尔京群岛": [-64.714132, 18.322705],
+  "文莱": [114.742438,4.113674],
+  "保加利亚": [25.219069, 42.460541],
+  "布基纳法索": [-2.145688, 11.85263],
+  "布隆迪": [29.717485, -3.635897],
+  "柬埔寨": [104.448382, 12.523686],
+  "喀麦隆": [11.494468, 3.424938],
+  "加拿大": [-107.27526, 55.182101],
+  "佛得角": [-22.922218, 16.690972],
+  "开曼群岛": [-81.271273, 19.292829],
+  "中非共和国": [18.810124, 6.041238],
+  "乍得": [18.447049, 14.768537],
+  "智利": [-69.977876, -25.138942],
+  "中国": [116.416833, 39.948327],
+  "哥伦比亚": [-73.478806, 2.776096],
+  "科摩罗": [43.375844, -11.78857],
+  "刚果": [21.743027,-2.573788],
+  "哥斯达黎加": [-84.292638, 9.887252],
+  "科特迪瓦": [-6.155916, 6.89432],
+  "克罗地亚": [16.72358, 45.521662],
+  "古巴": [-77.986987, 21.103407],
+  "塞浦路斯": [32.946057, 34.936603],
+  "捷克共和国": [15.278066, 49.498191],
+  "朝鲜": [126.92294, 39.664207],
+  "刚果(扎伊尔)": [15.15, -4.20],
+  "丹麦": [8.952741, 55.948581],
+  "吉布提": [42.256249, 11.485377],
+  "多米尼加": [-70.483469, 18.649493],
+  "多米尼加共和国": [-70.395507, 18.603449],
+  "东帝汶": [125.431956, -9.124093],
+  "厄瓜多尔": [-78.964932, -2.21516],
+  "埃及": [29.594646, 25.936378],
+  "萨尔瓦多": [-88.584136, 13.373462],
+  "赤道几内亚": [10.088521, 1.30738],
+  "厄立特里亚": [37.648078, 15.784249],
+  "爱沙尼亚": [25.476342, 58.478596],
+  "埃塞俄比亚": [38.786169, 7.794486],
+
+  "法罗群岛": [-6.797398, 61.97106],
+  "斐济": [177.672622, -17.921157],
+  "芬兰": [25.674431, 67.904553],
+  "法国": [0.906587, 47.271511],
+  "法属圭亚那": [-53.494303, 3.511379],
+  "法属波利尼西亚": [-149.49538, -17.675057],
+  "加蓬": [11.63449, -0.962011],
+  "冈比亚": [-14.934767, 13.633996],
+  "格鲁吉亚": [43.068284, 42.032932],
+  "德国": [9.921454, 50.615325],
+  "加纳": [-1.35073, 7.57263],
+  "希腊": [21.740949, 38.760921],
+  "格陵兰": [-42.715567, 76.109625],
+  "瓜德罗普岛": [-61.44, 16.00],
+  "危地马拉": [-91.102574, 14.574812],
+
+  "几内亚": [-9.920862, 9.507233],
+  "几内亚比绍": [-15.258858, 11.72377],
+  "圭亚那": [-58.825875, 2.121864],
+  "海地": [-72.463939, 19.188571],
+
+  "洪都拉斯": [-85.755474, 15.090622],
+  "匈牙利": [19.131732, 46.477001],
+  "冰岛": [-18.347671, 64.920607],
+  "印度": [78.886416, 20.130359],
+  "印度尼西亚": [119.773825, -4.735047],
+  "伊朗": [53.25111, 31.557465],
+  "伊拉克": [42.709565, 32.494493],
+  "爱尔兰": [-8.873846, 52.611764],
+
+  "意大利": [12.380236, 42.789341],
+  "牙买加": [-77.705921, 17.998272],
+  "约旦": [35.688762, 30.054147],
+  "哈萨克斯坦": [65.606553, 47.208443],
+  "肯尼亚": [37.595164, -0.596304],
+  "基里巴斯": [173.394862, 0.204265],
+  "科威特": [47.662234, 29.06732],
+  "吉尔吉斯斯坦": [72.550072, 41.271747],
+  "老挝": [102.267255, 19.552701],
+  "拉脱维亚": [25.693823, 56.772585],
+  "黎巴嫩": [35.550681, 33.577732],
+  "莱索托": [27.907056, -29.883175],
+  "利比里亚": [-9.620946, 6.034217],
+  "阿拉伯利比亚民众国": [13.07, 32.49],
+  "列支敦士登": [9.341504, 47.06258],
+  "立陶宛": [23.663957, 55.006037],
+  "卢森堡": [6.089966, 49.584528],
+  "马达加斯加": [45.375062, -21.97068],
+  "马拉维": [34.09973, -13.53828],
+  "马来西亚": [101.539688, 4.765938],
+  "马尔代夫": [73.026071, 3.212025],
+  "马里": [-1.913589, 17.136474],
+  "马耳他": [14.439807, 35.867096],
+  "马提尼克岛": [-60.962083, 14.601499],
+  "毛里塔尼亚": [-11.585315, 20.304108],
+
+  "墨西哥": [-104.700828, 25.155423],
+  "密克罗尼西亚(联邦) ": [158.202146, 6.84037],
+  "摩尔多瓦共和国": [28.222509, 47.201738],
+  "莫桑比克": [34.508512, -19.208157],
+  "缅甸": [95.465812, 21.23136],
+  "纳米比亚": [15.208731, -23.22107],
+  "尼泊尔": [82.226627, 28.212588],
+  "荷兰": [5.09062, 51.889432],
+  "荷属安的列斯": [-69.00, 12.05],
+  "新喀里多尼亚": [165.306074, -21.436762],
+  "新西兰": [169.430911, -44.653872],
+  "尼加拉瓜": [-84.931331, 12.895367],
+  "尼日尔": [6.997375, 16.696015],
+  "尼日利亚": [7.508122, 9.073755],
+  "诺福克岛": [167.944363, -29.046645],
+  "北马里亚纳群岛": [145.727885, 15.188258],
+  "挪威": [7.427469, 60.818838],
+  "阿曼": [56.823005, 20.604652],
+  "巴基斯坦": [69.005526, 29.584602],
+  "帕劳": [134.543426, 7.406806],
+  "巴拿马": [-81.461264, 7.929068],
+  "巴布亚新几内亚": [143.64797, -6.699991],
+  "巴拉圭": [-58.790773, -23.92163],
+  "秘鲁": [-75.650266, -11.125338],
+  "菲律宾": [122.009227, 12.314208],
+  "波兰": [18.410598, 52.41229],
+  "葡萄牙": [-8.872349, 39.248058],
+  "波多黎各": [-66.640167, 18.24638],
+  "卡塔尔": [51.129232,24.730622],
+  "韩国": [127.536659,35.284768],
+  "罗马尼亚": [24.554627,44.822581],
+  "俄罗斯": [105.125642,60.284459],
+  "卢旺达": [29.708849,-2.571033],
+ 
+
+  "圣皮埃尔和密克隆": [-56.193589,46.421843],
+  
+  "萨摩亚": [-172.015124,-14.183153],
+  "圣马力诺": [12.318397,43.536617],
+  "圣多美和普林西比": [6.546377,-0.094488],
+  "沙特阿拉伯": [43.513227,21.221083],
+  "塞内加尔": [-14.16246,13.927042],
+  "塞拉利昂": [-11.777698,7.988154],
+  "斯洛伐克": [19.524171,48.446361],
+  "斯洛文尼亚": [14.859569,45.943896],
+  "所罗门群岛": [160.131549,-9.843937],
+  "索马里": [46.13307,4.728546],
+  "比勒陀利亚": [28.15162,-26.236597],
+  "西班牙": [-3.385681,38.844723],
+  "苏丹": [29.655658,15.472078],
+  "苏里南": [-56.001468,3.20082],
+  "斯威士兰": [31.522017,-27.033699],
+  "瑞典": [16.583656,63.159047],
+  "瑞士": [7.88977,46.727455],
+ 
+  "塔吉克斯坦": [71.165934,38.539916],
+  "泰国": [100.988803,16.062762],
+  "马其顿": [21.609549,41.361815],
+
+  "汤加": [-175.145232,-21.255308],
+  "突尼斯": [10.192788,36.551971],
+  "土耳其": [34.821265,39.413194],
+  "土库曼斯坦": [54.593227,39.369869],
+
+  "乌干达": [32.238125,0.172108],
+  "乌克兰": [31.243127,48.468653],
+  "阿联酋": [54.004622,23.088022],
+  "英国": [-2.090231,53.908945],
+  "坦桑尼亚": [34.736674,-7.838903],
+  "美国": [-101.517222,38.68111],
+  "美属维尔京群岛": [-64.56,18.21],
+  "乌拉圭": [-55.865661,-33.673849],
+  "乌兹别克斯坦": [64.387777,41.05238],
+  "瓦努阿图": [168.18,-17.45],
+  "委内瑞拉": [-66.252481,6.826627],
+  "越南": [108.281064,13.361456],
+  "塞尔维亚": [20.972008,43.815646],
+  "赞比亚": [25.431235,-14.804475],
+  "津巴布韦": [29.870313,-19.532838]
+}

src/utils/maputil.js

@@ -0,0 +1,11 @@
+
+export const getCountry = (lng, lat) => {
+  // 天地图 https://console.tianditu.gov.cn/api/key
+  const tk = 'f7364a3486618e64801c69ccc54a4202';
+  const url = `http://api.tianditu.gov.cn/geocoder?postStr={'lon':${lng},'lat':${lat},'ver':1}&type=geocode&tk=${tk}`;
+  return fetch(url).then(res => res.json()).then(res => {
+    if (res.status == 0) {
+      return res.result.addressComponent.nation
+    }
+  });
+}