调试自动生成网格融合图片功能（待完成）

riku

2025-09-03 b2392458ebf42594b9fc5390fda40d7a0a12f923

调试自动生成网格融合图片功能（待完成）

 package-lock.json

@@ -20,6 +20,8 @@
        "docxtemplater": "^3.65.3",
        "docxtemplater-image-module-free": "^1.1.1",
        "echarts": "^5.5.0",
        "echarts-china-cities-js": "^0.1.1",
        "echarts-extension-amap": "^1.12.0",
        "element-plus": "^2.6.2",
        "file-saver": "^2.0.5",
        "jquery": "^3.7.1",
@@ -2171,6 +2173,16 @@
        "tslib": "2.3.0",
        "zrender": "5.5.0"
      }
    },
    "node_modules/echarts-china-cities-js": {
      "version": "0.1.1",
      "resolved": "https://registry.npmmirror.com/echarts-china-cities-js/-/echarts-china-cities-js-0.1.1.tgz",
      "integrity": "sha512-Xc7ShyUCaKeS5JHLygvpdZQ6A2nPN8MdVSMLMJhnl7Inatu1eRCJ6DtkeN4WtrjjpRmFYuQfYxKJ2K6Nb+3KLg=="
    },
    "node_modules/echarts-extension-amap": {
      "version": "1.12.0",
      "resolved": "https://registry.npmmirror.com/echarts-extension-amap/-/echarts-extension-amap-1.12.0.tgz",
      "integrity": "sha512-JpCCLhafpUGSfMcAB44lTnjnNuYWQ1jPuyvOF3t/zziQ1jbDjGLTkhIFenpKMuZOz9GzS4tREXL/zGeNrZpxDw=="
    },
    "node_modules/echarts/node_modules/tslib": {
      "version": "2.3.0",
@@ -7396,6 +7408,16 @@
        }
      }
    },
    "echarts-china-cities-js": {
      "version": "0.1.1",
      "resolved": "https://registry.npmmirror.com/echarts-china-cities-js/-/echarts-china-cities-js-0.1.1.tgz",
      "integrity": "sha512-Xc7ShyUCaKeS5JHLygvpdZQ6A2nPN8MdVSMLMJhnl7Inatu1eRCJ6DtkeN4WtrjjpRmFYuQfYxKJ2K6Nb+3KLg=="
    },
    "echarts-extension-amap": {
      "version": "1.12.0",
      "resolved": "https://registry.npmmirror.com/echarts-extension-amap/-/echarts-extension-amap-1.12.0.tgz",
      "integrity": "sha512-JpCCLhafpUGSfMcAB44lTnjnNuYWQ1jPuyvOF3t/zziQ1jbDjGLTkhIFenpKMuZOz9GzS4tREXL/zGeNrZpxDw=="
    },
    "editorconfig": {
      "version": "1.0.4",
      "resolved": "https://registry.npmmirror.com/editorconfig/-/editorconfig-1.0.4.tgz",

 package.json

@@ -26,6 +26,8 @@
    "docxtemplater": "^3.65.3",
    "docxtemplater-image-module-free": "^1.1.1",
    "echarts": "^5.5.0",
    "echarts-china-cities-js": "^0.1.1",
    "echarts-extension-amap": "^1.12.0",
    "element-plus": "^2.6.2",
    "file-saver": "^2.0.5",
    "jquery": "^3.7.1",

 src/components.d.ts

@@ -31,6 +31,7 @@
    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
    ElDialog: typeof import('element-plus/es')['ElDialog']
    ElDivider: typeof import('element-plus/es')['ElDivider']
    ElDropdown: typeof import('element-plus/es')['ElDropdown']
    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@@ -39,6 +40,7 @@
    ElIcon: typeof import('element-plus/es')['ElIcon']
    ElImage: typeof import('element-plus/es')['ElImage']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
    ElLink: typeof import('element-plus/es')['ElLink']
    ElOption: typeof import('element-plus/es')['ElOption']
    ElPagination: typeof import('element-plus/es')['ElPagination']

 src/utils/chart/chart-map-amap.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,161 @@
import * as echarts from 'echarts';
import 'echarts-extension-amap';

/**
 * è®¡ç®—地图中心点和缩放比例
 * @param {*} gridData ç½‘格数据
 * @returns
 */
function calCenterPointAndZoom(gridData) {
  let centerLng = 0;
  let centerLat = 0;
  let maxLng = -180;
  let minLng = 180;
  let maxLat = -90;
  let minLat = 90;
  let zoom = 10;
  gridData.forEach((g) => {
    centerLng += g.centerLng;
    centerLat += g.centerLat;
    maxLng = Math.max(maxLng, g.centerLng);
    minLng = Math.min(minLng, g.centerLng);
    maxLat = Math.max(maxLat, g.centerLat);
    minLat = Math.min(minLat, g.centerLat);
  });
  if (gridData.length > 0) {
    centerLng /= gridData.length;
    centerLat /= gridData.length;
  }

  return {
    centerLng,
    centerLat,
    zoom
  };
}

function generateGridMap(gridData) {
  // 1. åˆ›å»ºä¸´æ—¶DOM元素
  const div = document.createElement('div');
  div.style.width = '800px';
  div.style.height = '400px';
  document.body.appendChild(div);
  // æ³¨å†Œä¸Šæµ·å¸‚地图数据
  // console.log(shanghaiMap);

  // shanghaiMap(echarts);
  const chart = echarts.init(div);

  chart.on('amaproam', function (e) {
    console.log(e);
  });

  // // get AMap extension component
  // var amapComponent = chart.getModel().getComponent('amap');
  // // get the instance of AMap
  // var amap = amapComponent.getAMap();
  // // add some controls provided by AMap.
  // amap.addControl(new AMap.Scale());
  // amap.addControl(new AMap.ToolBar());
  // // add SatelliteLayer and RoadNetLayer to map
  // // var satelliteLayer = new AMap.TileLayer.Satellite();
  // // var roadNetLayer = new AMap.TileLayer.RoadNet();
  // // amap.add([satelliteLayer, roadNetLayer]);
  // // Add a marker to map
  // amap.add(
  //   new AMap.Marker({
  //     position: [110, 35]
  //   })
  // );

  // 1. å‡†å¤‡ç½‘格数据（转换为ECharts多边形格式）
  const gridPolygons = gridData.map((grid, index) => ({
    name: `grid_${index}`,
    value: [grid.centerLng, grid.centerLat, grid.value], // ä¸­å¿ƒç‚¹ç»çº¬åº¦å’Œæ•°å€¼
    coords: grid.coordinates // ç½‘格四角经纬度坐标数组 [[lng1,lat1], [lng2,lat2], ...]
  }));
  const { centerLng, centerLat, zoom } = calCenterPointAndZoom(gridData);

  // 2. é…ç½®é¡¹
  const option = {
    title: {
      text: 'Travel Routes'
    },
    // amap component option
    amap: {
      // enable 3D mode
      viewMode: '3D',
      // initial options of AMap
      // See https://lbs.amap.com/api/javascript-api/reference/map#MapOption for details
      // initial map center [lng, lat]
      center: [centerLng, centerLat],
      // initial map zoom
      zoom: zoom,
      // whether the map and echarts automatically handles browser window resize to update itself.
      resizeEnable: true,
      // customized map style, see https://lbs.amap.com/dev/mapstyle/index for details
      mapStyle: 'amap://styles/dark',
      // whether echarts layer should be rendered when the map is moving. Default is true.
      // if false, it will only be re-rendered after the map `moveend`.
      // It's better to set this option to false if data is large.
      renderOnMoving: false,
      // the zIndex of echarts layer for AMap, default value is 2000.
      // deprecated since v1.9.0, use `echartsLayerInteractive` instead.
      // echartsLayerZIndex: 2019,
      // whether echarts layer is interactive. Default value is true
      // supported since v1.9.0
      echartsLayerInteractive: true,
      // whether to enable large mode. Default value is false
      // supported since v1.9.0
      largeMode: false,
      // whether to return map camera state in `amaproam` event.
      // supported since v1.10.0
      returnMapCameraState: true
      // Note: Please DO NOT use the initial option `layers` to add Satellite/RoadNet/Other layers now.
      // There are some bugs about it, we can use `amap.add` instead.
      // Refer to the codes at the bottom.

      // More initial options...
    },
    series: [
      {
        type: 'custom',
        coordinateSystem: 'geo',
        renderItem: (params, api) => {
          // å°†ç»çº¬åº¦è½¬æ¢ä¸ºå±å¹•åæ ‡
          const grid = gridPolygons[params.dataIndex];
          // const v = api.value(0);
          // const points = grid.coords.map((coord) => api.coord(coord));
          const points = grid.coords;
          return {
            type: 'polygon',
            transition: ['shape'],
            shape: { points },
            style: api.style({
              fill: grid.value[2],
              stroke: grid.value[2],
              lineWidth: 2
            })
          };
        },
        data: gridPolygons,
        label: { show: false }
      }
    ]
  };

  chart.setOption(option);
  // 3. å¯¼å‡ºä¸ºå›¾ç‰‡ï¼ˆè¿”回base64）
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const url = chart.getDataURL({
        type: 'png',
        pixelRatio: 1,
        backgroundColor: '#fff'
      });
      resolve(url);
    }, 3000);
  });
}

export default { generateGridMap };

 src/utils/chart/chart-map.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,123 @@
import * as echarts from 'echarts';
// import * as shanghaiMap from 'echarts-china-cities-js/echarts-china-cities-js/shanghai.js'; // ä¿®æ­£åœ°å›¾æ•°æ®æ–‡ä»¶è·¯å¾„
// import 'echarts-china-cities-js/echarts-china-cities-js/shanghai.js'; // ä¿®æ­£åœ°å›¾æ•°æ®æ–‡ä»¶è·¯å¾„
import { shanghai, jingan } from '@/utils/chart/shanghai.js'; // ç¡®ä¿è·¯å¾„正确

/**
 * è®¡ç®—地图中心点和缩放比例
 * @param {*} gridData ç½‘格数据
 * @returns
 */
function calCenterPointAndZoom(gridData) {
  let centerLng = 0;
  let centerLat = 0;
  let maxLng = -180;
  let minLng = 180;
  let maxLat = -90;
  let minLat = 90;
  let zoom = 100;
  gridData.forEach((g) => {
    centerLng += g.centerLng;
    centerLat += g.centerLat;
    maxLng = Math.max(maxLng, g.centerLng);
    minLng = Math.min(minLng, g.centerLng);
    maxLat = Math.max(maxLat, g.centerLat);
    minLat = Math.min(minLat, g.centerLat);
  });
  if (gridData.length > 0) {
    centerLng /= gridData.length;
    centerLat /= gridData.length;
  }

  console.log((maxLng - centerLng) / zoom);

  return {
    centerLng,
    centerLat,
    zoom
  };
}

function generateGridMap(gridData) {
  // 1. åˆ›å»ºä¸´æ—¶DOM元素
  const div = document.createElement('div');
  div.style.width = '800px';
  div.style.height = '400px';
  document.body.appendChild(div);
  // æ³¨å†Œä¸Šæµ·å¸‚地图数据
  // console.log(shanghaiMap);

  // shanghaiMap(echarts);
  echarts.registerMap('shanghai', { geoJSON: shanghai });
  const chart = echarts.init(div);

  // 1. å‡†å¤‡ç½‘格数据（转换为ECharts多边形格式）
  const gridPolygons = gridData.map((grid, index) => ({
    name: `grid_${index}`,
    value: [grid.centerLng, grid.centerLat, grid.value], // ä¸­å¿ƒç‚¹ç»çº¬åº¦å’Œæ•°å€¼
    coords: grid.coordinates // ç½‘格四角经纬度坐标数组 [[lng1,lat1], [lng2,lat2], ...]
  }));
  const { centerLng, centerLat, zoom } = calCenterPointAndZoom(gridData);

  // 2. é…ç½®é¡¹
  const option = {
    // title: {
    //   text: 'Travel Routes'
    // },
    geo: {
      map: 'shanghai', // åŸºç¡€åœ°å›¾
      center: [centerLng, centerLat],
      roam: true, // ç¦æ­¢ç¼©æ”¾å¹³ç§»
      zoom: zoom, // åœ°å›¾ç¼©æ”¾æ¯”例
      label: { show: true }, // æ˜¾ç¤ºåœ°åæ ‡ç­¾
      itemStyle: { areaColor: '#ddddddff', borderColor: '#999' }
    },
    // series: [
    //   {
    //     type: 'scatter',
    //     coordinateSystem: 'geo',
    //     data: [
    //       {
    //         name: '黄浦区',
    //         value: [121.490317, 31.222771, 100] // ä¸­å¿ƒç‚¹åæ ‡+数值
    //       }
    //     ]
    //   }
    // ]
    series: [
      {
        type: 'custom',
        coordinateSystem: 'geo',
        renderItem: (params, api) => {
          // å°†ç»çº¬åº¦è½¬æ¢ä¸ºå±å¹•åæ ‡
          const grid = gridPolygons[params.dataIndex];
          // const v = api.value(0);
          const points = grid.coords.map((coord) => api.coord(coord));
          // const points = grid.coords;
          return {
            type: 'polygon',
            transition: ['shape'],
            shape: { points },
            style: api.style({
              fill: grid.value[2],
              stroke: 'white',
              lineWidth: 1
            })
          };
        },
        data: gridPolygons,
        label: { show: false }
      }
    ]
  };

  chart.setOption(option);
  // 3. å¯¼å‡ºä¸ºå›¾ç‰‡ï¼ˆè¿”回base64）
  return chart.getDataURL({
    type: 'png',
    pixelRatio: 1,
    backgroundColor: '#ddddddff'
  });
}

export default { generateGridMap };

 src/utils/chart/shanghai.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,587 @@
const shanghai = {
  type: 'FeatureCollection',
  features: [
    {
      id: '310101',
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          '@@AHV@BDCPEPLENFHCJHFBNCAGBGXWFIBGCGMUKKCCcGCDGBALCPIAAPGR'
        ],
        encodeOffsets: [[124373, 31970]]
      },
      properties: {
        cp: [121.490317, 31.222771],
        name: '黄浦区',
        childNum: 1
      }
    },
    {
      id: '310104',
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          '@@CEAMMAA@C@AFA@@BC@ABC@@BD@@BH@@BB@EHDDCBECADGEEAEBFNET]CMRELQjOEGRFBAHDBAHH@@B@BDA`H@F@BC@AB@FD@DD@@@CH@DDAFDD^LEPF@DFTDPHHQBOJBDOBKHADCOGCEAE@EFOBMAEUW@GBEHILMBE@KGM'
        ],
        encodeOffsets: [[124381, 31859]]
      },
      properties: {
        cp: [121.43752, 31.179973],
        name: '徐汇区',
        childNum: 1
      }
    },
    {
      id: '310105',
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          '@@@AACE@FO]KCCBECCG@@D@@CCmBSAcKG@EBAEGC@DC@QE@CA@@BEBMTNFAFDBA`D@BDA@AA@FFBBLD@@@IBDBABDB@@DBADB@CHA@@DC@C@@@BBABFDH@AHD@ACDA@FD@BCA@@CJCNWJ@BCHAFEF@XCV@DFH@VFBBCFD@HEFFFBB@@IDAJFBABIFK'
        ],
        encodeOffsets: [[124354, 31964]]
      },
      properties: {
        cp: [121.4222, 31.218123],
        name: '长宁区',
        childNum: 1
      }
    },
    {
      id: '310106',
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          '@@AB@PCJBNG@ABBDBB@DNBAJJ@@FB@@H@@@DF@ENB@BDD@BAT@BENDFDPB@AF@A]G@BOCKCEBA@G@KBEDCLMVQ@EACDECABCDKECGDMEKFFODOACU@BGOGUCELAJABIECBBNFHJBTLHB@BADDD@FB@@DC@BHOVUJCFIG'
        ],
        encodeOffsets: [[124340, 32022]]
      },
      properties: {
        cp: [121.448224, 31.229003],
        name: '静安区',
        childNum: 1
      }
    },
    {
      id: '310107',
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          '@@DB@DHBBCDBB@A@DF@@DFDDHGBDDALZCB@@EBA@ACQ@@DGBEFBB@FD@J@BFMBCCCDID@AODAEIDBDEBABBB@DC@AF@@AFGACBADBB@@NFADD@@BB@B@BAB@@@BBDA@HBB@AJ@@AD@@BB@AFHBDCJFHBGQAAJA@ALCBBF@@AB@@BD@@@JABDABD@@BHBBBNACEJA@ADAAA@B@ADAAAJBIQB@FCBBD@AGJ@@EJA@EHADDAB@BFANNDEVIPUAGD@@CA@@ECCBC@AGASKIAEGACA@EAEEA@EFC@DEAAUEG@CEU@WDE@EFGBADI@MV'
        ],
        encodeOffsets: [[124267, 31987]]
      },
      properties: {
        cp: [121.392499, 31.241701],
        name: '普陀区',
        childNum: 1
      }
    },
    {
      id: '310109',
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          '@@@OHWVFBABIKK@MJCJGBKV[C@@I[AOEODCACCCLADDBCFBD@FURQT@J@F@HABDFDLAPH@BTVCLBBE'
        ],
        encodeOffsets: [[124402, 32064]]
      },
      properties: {
        cp: [121.491832, 31.26097],
        name: '虹口区',
        childNum: 1
      }
    },
    {
      id: '310110',
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          '@@@JD@U\\ALIHID@NLLAJABUEGX@PVA@ZDDADGFX`ZKDHFAFHpSNGDCDGDM@cBGL[BKAGEGMOcY[GWA'
        ],
        encodeOffsets: [[124433, 31997]]
      },
      properties: {
        cp: [121.522797, 31.270755],
        name: '杨浦区',
        childNum: 1
      }
    },
    {
      id: '310112',
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          '@@@EBAD@@A@E_GCB@A@AG@BGCABGEAHQPFRiFKNQ^DFSEMFAFBHFBCFDDACCFGA@@AG@@AC@@AD@BAD@@AB@BED@B@F@B@FBBNDFLCDBCBFB@DFG@CBBABDB@CDBAFCB@DABD@B@DB@BD@@B@BB@B@@FJ@DKLFB@DMDBBABBCFDB@@HB@BBABBDCBGNBDAB@@BPDBAF@@AB@@AB@@CDB@BF@DGB@@CD@FDADF@BADDDCBBDCAAC@BCFEAAB@FECABC@ADBBEB@@EGCABAB@@CAA@CAIABAAA@@ECDGD@BCBBD@BBHBFALABAFBD@@CGA@BC@BCEAA@A@@AEA@@AAA@G@DCG@CCBAAA@ADBDAEAC@ACE@BCC@BG@ACBBAEAAA@B@CECDEAEBAB@BDB@DBD@BBD@FDBGBBFCAABCBDBCEC@UBACA@AAA@ABB@CCCE@AA@ADCD@@BF@@FB@@BDB@CDB@ED@DFB@ABB@HDAADCBE@CCACC@CACIABA@@@BD@@AD@DICABCECFA@AMEO@@CC@ABA@@ABA@GCACBADCDA@@BAAAB@BICADE@@BEAABC@GHC@E@@FD@@BA@CFC@@BC@AASEKG@ACAIZBFGDYCIAKGKAU@OCGAKIMIMCOEeC‘WOBQHI@C@CBB\\HBPTBHJHABECM@ADBB@J@F@D@B@FBDAD@NBBBN@T@DBBADFCFDDGTDJFAFNB@DB@EFFBADD@@DFDDCDBADERCDAB@DELGAADMCEPHB@AB@@BHF@@GNQV@DEJCDC@ADD@@BCFABADA@@FCB@DCD@DABA@EJEF@BEJCLGJABCHAB@BABCFCB@BED@BA@@BABADGFAAA@@CAAKGCAKAUTC@CDDBADIHDFCF@@CDBDCHDBAHGDBDCDABCAABAFKACBDDABBF@@@BHBBDDBC@BDFFFBBDD@@AH@HB@EFC@ABC@FFCFBB@LCFBBAEGFEDABGJMJCL@XGNFH@PDBB@FHDBAAA@@D@D@@CB@DGA@BCCA@@CABACAJA@@C@AKEA@EBBB@ACC@B_CABEMENSFA@AB@@DRFD@@CHDBFFAH@dLTBjA'
        ],
        encodeOffsets: [[124327, 31940]]
      },
      properties: {
        cp: [121.375972, 31.111658],
        name: '闵行区',
        childNum: 1
      }
    },
    {
      id: '310113',
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          '@@@JE@@BOAECMCAFS@ABC@ACA@FME@@C@@@GA@@EI@BIMA@CCA@CBAH@AMDI@OBACEEB@ABACCGB@FIB@FI@BHC@AAEDA@JRIABBCB@B@ABBCB@BIBDFMBAAGA@AC@BAACIB@@C@@AA@@BE@AAKD@BIBBBHRC@ICCCCDGABEA@@AC@@BI@@BAA@GCBAAA@ABBBCDAAEJFDB@P\\J@@FB@@DGA@FD@@DAAADCF@@ABBBCDDB@DF@CLCAEFEB@DG@@HD@DB@BB@@FHD@BADA@CFCFABDB@BED@BCDEFFBABB@ADG@GNCBFHAFA@@DCAIB@DB@@FBBEF^JBAH@AFD@A@@DA@@BFDABD@@JB@@BA@AD@DB@@FCJ@FA@C@ABAAABENDB@BCDCFG@ADDBEDDDABA@ADB@ADF@BD@BEACD@BCBJF@BABA@BBCFE@ABCLABBBAFEB@A@BCDEBADD@CBBBBAADBBD@B@BBADFADDDA@ED@ACB@FF@DFBBCB@@AC@@GF@B@AFD@@DB@@AD@@BD@\\PfK^I|]BAEGBE\\Q`W|i\\UdSXUBD@DFAEG\\UQQQY@QJONIVIEGEBCGYLW_HEBCCC@YUBAFKAUD'
        ],
        encodeOffsets: [[124384, 32068]]
      },
      properties: {
        cp: [121.489934, 31.398896],
        name: '宝山区',
        childNum: 1
      }
    },
    {
      id: '310114',
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          '@@A@A@@AC@BCME@@AABCDAHBBE@@BED@@CAABAFAACJCBFPC@BJCDCDDNAAEI@C@@EAAFEHA@CR@BDB@FA@@DAKYCBACGHCCCE@@CEB@A@CAADGA@CCAADGB@DB@ADC@@ECBBDC@BGG@CCIC@EAAOCG@OEUHK@IDINAHCBEFFHABEAKDA@EAED@EAD@BED@FGAG@@BC@@AC@@DA@@CCBEA@DGAKFOB@CG@@BAA@CGCBAEA@CA@@DEA@FCFB@ABAAABAC@AAACFGEBCABCCABCCABCAB@@CC@ADGDEEC@EDCA@BA@BDA@ACEFECABC@@BB@BDC@AJIJCAADC@CGEB@@AB@BDF@JDD@DHBABD@B@@BCHE@@BC@@DCA@DC@@DDBADA@EDFBIPCFIIBCMAE@AJ@B@FAB@DAJDB@DDB@FD@@BCBBBB@@DABAB@DCBBBAHBB@FMCKB@HF@EHIACBE@BFCBBLAH@DD@@CD@D@BFNBCDGBAFTHBEBB@DB@@AJD@ANFABBBD@ABD@@ANDBDCD@BABA@ABLDCFDBF@ABC@ABDB@BFDADJDDCCDBDCDAAABBB@BC@ABA@ABC@@HA@C@@DJ@@DFB@BD@HB@AD@ABBDFA@HA@@CA@BDABOBMFAFB@ADBDAB\\LDAHBBADBHAPFJFAFBFFD@BJHRD@FHFNHDACCLADBH@DDFABHCB@BHJF@AJ@@FAFDB@AEFE@CBIHB@AC@@AA@DEHD@BD@ADB@BDB@AKD@@DBA@@@AD@DBBDBBDBD@@FDDBA@CDAHDBBHDADB@FA@BD@DCD@BFFCJD@DA@FBBDFADC@A@BFABEAABADKBAF@DEAAB@BA@AIEDA@ADCFB@AACE@BCA@BCB@BACCFCCABCH@DEDC@ACAFMBABBBAD@B@@EDI@EA@@CBCB@@AA@@IC@BAEC@AB@@CB@C@BEG@AB]IFEAA@EA@@CJADB@CB@BEEGDAHMH@BCA@BAEAFEDC@AFC@ACABALQGC@ECCE@@GH@@CFAFEDBDKE@@CCADCAABA@@DEBCBB@CC@@EHB@CA@@EI@GMEMICFIBBBABAAA'
        ],
        encodeOffsets: [[124249, 32046]]
      },
      properties: {
        cp: [121.250333, 31.383524],
        name: '嘉定区',
        childNum: 1
      }
    },
    {
      id: '310115',
      type: 'Feature',
      geometry: {
        type: 'MultiPolygon',
        coordinates: [
          [
            '@@bM²WLCļÑNI^_È€sJQ¶±`e`Z¡LƒD‡CsEWOWs@GBI\\wsYg|QNUBÄ£Fq„AZHZB@@JHBAJFRA@BB@HABB@@J@HBDBLAJC@@BD@ABA@B@AD@FB@@BA@@BA@G@@FC@AB@DA@ABCAC@@DEA@DD@BDEF@FQJE@CAGJA@ABCAEDBDGHADWR_TYJI@G@SD@AA@@AA@IDGB@A@BQBmAA@CBOAGFELC@AAaDACS@C@@AIAABKA@BEBFDADDBCJC@@BC@@A@@ABJBBD@DDDDB@DAFCDBBGCA@BAA@CEC@@FCA@DCA@AA@@EE@@AC@CD@BBBF@DD@DAA@BBB@BDBAB@VFDADACADBBEDAAAHECC@AAC@CAA@ACA@ABBFCFFD@D@ABBFBABDA@BAHD@ADF@BDD@FBCBCA@BBBABDDH@CDH@B@BB@@FB@BB@B@FBADD@@AHB@DC@EAABKBEBGAAAC@AAADC@CHFD@@BBABJBDBB@DB@@BABAHD@FA@AFCA@BADDBEFA@BBEFADD@BBCDAACDCCABE@BCECC@@DA@CHE@@ACA@DA@@BA@@BE@ABOC@AA@CBMAAHCDAAAB@AGA@@CADEAAABCACNA@KECLC@E@@EA@A@@A@AC@@AAAA@A@C@BA@CDABEAAADCABAAA@DEH@CEADACAKDHN@LAFKNGJAF@D@DBFNLHLANEP@FBFJJJDdHDDLLNVDHAHEJWXAF@FJFHDtDXHhZNPFHBHALK\\AH@dCNCHCDMHoTUJMJIP@RRZRR'
          ],
          ['@@PDNAvOFGBKCeEQGEI@IBMNY\\GJELATBJ'],
          ['@@HRHJNBX@XCRGfEFGBM@eYuGIgCIAK@KDMPIREVCXARBP']
        ],
        encodeOffsets: [[[124438, 32149]], [[124808, 31991]], [[124870, 31965]]]
      },
      properties: {
        cp: [121.567706, 31.245944],
        name: '浦东新区',
        childNum: 3
      }
    },
    {
      id: '310116',
      type: 'Feature',
      geometry: {
        type: 'MultiPolygon',
        coordinates: [
          ['@@DBBAGCBD'],
          ['@@HADA@AGCKHBBF@'],
          ['@@FACAAD'],
          [
            '@@DB@EB@@CB@@GEQ@IEKAM@ATE@EHADF@GDCFFPD^BBED@@BD@@DPBB@@CDB@BLC@ADB@BF@@CF@@DB@BDCDA@@DCACBC@AB@HDBRTHGBCHBDB@AF@B@NACQ@@@AC@@CC@CIEE@CFCFHDBHABDN@BED@BDNA@HAF@FCBADDLD@DAAC@AB@@ANC@ANC@TDBL@DGJC^BDBDBJ@^F\\VHGPB@CD@BAF@DKDBBCA@BAC@FK@E@BD@@BNABCF@@AFB@AD@BADB@GA@@AF@BCFBDKB@@BDBB@BEDBBDF@@CFB@HD@@F@@@HA@BBA@BDC@BJADBBLB@AA@@ED@DIHA@BB@BDDBBCBA@@@BF@@CB@ABFBBCFB@BD@FCF@DBBAD@BAD@BABBBAHDJ@ABDDABDBHCBDJIBOFE@IDKJAFCBAJELAAEBCBKAA@GD@AIBEAIDOK@@EDEAABA@A@BB@@@B@B@AAD@@ADA@EJ@@CB@H@BLDBFA@@B@@GEB@EB@@CB@DETAAADA@GH@BHLAPA@ABBD@JU@ABBFCB@‚£«ugW›OCOCgB‡DaAE`@HCBBFCBAJA@AFDFAFFD@FDFCFBBA@BBAFBDA@CDAAA@STCBWLAAABBBCBAACB@AABBBIFAPCHCFBBCB@HA@CAABGPIBO@ICCEDMGAILADACCBCA@CECEAKCADCBADAAKAEC@HEBCAEDQBACEAAB@BGCYDEJCB@BBFN@B@@JDbHRJL@D@FA@@CCB@DABBDEFACSDA@AAA@DDBLFHAB@BABCAIDADABCEKCABC@CDABBBC@@B@BA@BBcO[@MGDCC@DK_KFMGBCFGADEA@AGCA@@DAD@AFB@BCB@DGOCCLKR]JADEAMMABBCA@CB@BABCAACB@CEAB@CAAGBDFGFHFGBBDFHF@BDB@ABBFDADFF@DHD@DFFADDGDDDADDABDA@DDCDFFBDEBFFDCDBCBDDEBBDB@@@CDCDI@GB@BBFAB]DAHCDDH@DDBHB@DHABDB@@FG@CABJBl@FEFCFBB@LB@J@@GPDA@DD@AD@D@@CCA@BCA@CB@A@@AF@BGFAADDB@ARF'
          ]
        ],
        encodeOffsets: [
          [[124321, 31442]],
          [[124337, 31429]],
          [[124341, 31419]],
          [[123933, 31687]]
        ]
      },
      properties: {
        cp: [121.330736, 30.724697],
        name: '金山区',
        childNum: 4
      }
    },
    {
      id: '310117',
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          '@@@DLB@BFTHAFB@DABHFELFBBAH@DIHB@GB@@CB@BEDAB@LAPB@DFBADD@@BBBN@@DRB@BADALHABlH@@\\ABAFQPOLDBDBDCJBBJFA@FCJC@@DCAABDDBDKHB@CDBDEBCEINHDABFB@DDDD@F@@ABCAA@EB@@CH@B@BCBABD@DLBBCB@R@ADD@BAJ@BBBB@BA@@NG@AFELC@AB@@CBA@KJAAA@CAC@CLD@ABBBGJDBBDCFBBDCFDADBBDCABB@@BA@HHDBABFFDCBBDCB@BABB@AFEBBBED@FEDDBED@BALB@CD@DEHBBGDBBCB@BFB@@LC@@FJA@AJB@@B@@FB@@HH@@BJ@CJDDADDBB@B@BCJD@DB@AB@FC@@FC@@D@FDA@X\\ILF@CAA@ABBJ@DEXFPBI_CM@CF@NFF@BBB@BAADBLFBJABHKB@@L@BHXCAGBAF@@BB@@BCFBDDBD@BB^ENNEFEAEHCC@DBB@BB@AH@BFCD@B@ABDB@@FAF@ABXFnNHKB@BA@CDC@CDA@EB@BCBADE@AC@BCD@DCFI@CRUHM@@GE@AA@@BGAFONDBCHBFK@CBAHODICACDEC@CC@BCEAFEA@@CMABEIESCCHECEDBCAA@WAMAA@MBCAC@E@A@C@E@IAABCN@FDBAIGAGOSGAA[DAD@J@XIJ@PDDI@ODK@UD@BCAAGADSG@CAA@AABAAAA@@BECBC@IFCBC@CIG@A@AGDCABACCBAA@@@G@GCCB@AABC@ABC@ABCAE@EDC@@AEAADEABAA@@DE@@A@@ABADCAACA@@AGBCJC@@FB@@BMCBCAID@ACB@AAB@@G@@@EC@@GEA@DE@ACCAAFA@CA@AA@CLEAADE@@BB@@HCAABC@@BEA@BE@ADMB@AC@@A@FELD@ABB@ADCACLE@ABC@@DOAGH[U]EI@CACA]AIDCHK@CA@SMD@BMD@BA@@BBDCBC@CKBCDA@EBE@GMBACC@AFM@ACGBCAEGED@DFFDJD@@DD@@B@@DRMBA@E@@BCAGAADGHQSCA@GBAD@DADB@CB@DCACA@@CE@@DE@@ACA@BKD@ACA@DA@OA@CC@@AC@AF]AOCEECD@HCEGB@FSF@BBNFL@JFR@HA@@DA@@FCA'
        ],
        encodeOffsets: [[123933, 31687]]
      },
      properties: {
        cp: [121.223543, 31.03047],
        name: '松江区',
        childNum: 1
      }
    },
    {
      id: '310118',
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          '@@@GCIBA@@FADHD@BCDBJIBID@ACA@@AD@BAFDFEBDB@ACB@@ADBFCD@FFHCBCD@@DA@DBBADDBADDBAADHFDEBB@BBDBABBBAA@DE@EFB@CB@@DFBABHD@DBB@AH@@DPALEHB@CFBDA@DB@@CD@AAEAEEACD@CAACGA@A@@AEBACCDALBBEBADBBADCACHCBGCADGACDC@@DECEJGBCCADCD@VSLBDBLHBB@DB@BBFCDEBA@AB@@AFC@ADADEBA@ABADGBAHIDKJOmMWEBAE@EB@@CABAA@C@ED@ABGA@@AAA@CDDFGFBFEMM]FAAC@CAACDE@AA@@AE@ABBHWDAGK@@@LAAGIBEAAKBCABA@AAE@MEE@@DDNJ`OAWECFI@AA@BBB@DKE[J@WCB@E@CD@@ED@@EBAA@@CICADA@A@CABCCCDII@@AG@@GA@@EA@@@IA@BIB@ED@@KA@AEA@ADCAAHGACFC@@DKAABC@AFCCEFC@AFAAEF@BAAABA@CDAACDEEBACAGGB@@AA@BACDAABCECCDAADGAACAHIAABAC@@EDEB@HBBBLIB@DA@@BAD@FKBEH@@MB@@AAAAAI@ABC@BCQ@A@ADKA@CACABADA@G@@DA@@FBBAD@BE@C@CC@CEABAGCJMDFFAACDCA@LGACCCBADB@CD@DI@EEBAIIACDCACAPKROBEBA@[G@AkGBBKBC@AQA@CM@AA@AC@BCEA@COAKBA@CBAFA@@DA@@HGACJG@ABEAFKGEBA@CEAGBEUKA@CQE@BCABCEBAHE@@BB@A@@DDB@ADB@DC@C@@BCCB@OC@HM@AHC@AHF@CHBF@BC@@DB@ADBB@BNB@BB@@FDB@DC@A@CRA@CFBBAFGAADDB@HA@@DB@@D@@ADBBEJDBM@ADg@ABFFABGBCNGBC@CACBAADAAEFACK[AAAJK@AC@GBEDG@ACOFOEAD@JQ@@FBdCDEL@FCD@H@JHXBPHABDEJ@BEDCACHCFAHA@@EG@QB@BBDE@@DE@AAE@@CG@ABADA@ABCAABCDBLD@DHNJDD@HDHHHJFdDPCTD\\JnE€MPDvBJHADHBBD@BD@@EHBFCBEDB@AD@HREB@FHD@DHBBGD@H@ABDBL@@AB@@AD@@CFA@BAFFD@BBB@CB@@FHDADB@@DEAADJB@DCHEAABBB@BFBAFEFADJDABIAADFB@DAB@B@BDBABCB@BE@@DD@Kz@DD@@HD@@DC@ADA@A@AFFB@HBA@BAB@FC@@AIBDBDABD@NA@BBBBABBRA@@@dFFDDHEBBHDNFFABDBDADCB@@AB@BCFO@ABCHCD@BBC@@@FDPRF@FA@DB@@AHAACFCHA@DFAACD@BBDAAABAD@BBD@@CDALBFB'
        ],
        encodeOffsets: [[124062, 32028]]
      },
      properties: {
        cp: [121.113021, 31.151209],
        name: '青浦区',
        childNum: 1
      }
    },
    {
      id: '310120',
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          '@@LBBAJB@BD@T@BDbCBBD@FKHEPBDAB@nBRA@A@BHAJCB@@BB@@BTCH@J@ZI`SXQBCHGACFCDBBAB@HIDBF@NGDA@EFEACC@@CFB@CD@DBBAB@@CBAD@@EH@B@@AB@@AA@@EBCA@B@BAC@@AD@BIAKAC@G@IA@BA@GAAB@EQBIGA@IA@GYBYrƒĥDƒEŸU¡_‰[g¤A@EDAA@BIVC@AA@BOBKBAGG@@HCBBBSBCFA@@DA@@FFA@HA@@@EBCAAKG@A@@DI@@FCB@BC@BBA@A@@@A@@A@BABBBCF@FL@CPBJAFBJC@@HBBALADBFKBIFABEDIBCL@JEFAPKJHFBFADED@JADFD@AB@BBABBBB@DBH@CTHBBBADC@@VCL@PCJ‚TfD^JNJLJHBPDV@LBLHJBZDHCAEJYDB@BLHTFBBD@@AD@DEB@@AC@@EF@D@HGD@BAFB@AF@BCJD@ABABB@AB@DCBCDADB@HAB@BB@BAD@@DP@NF'
        ],
        encodeOffsets: [[124489, 31743]]
      },
      properties: {
        cp: [121.458472, 30.912345],
        name: '奉贤区',
        childNum: 1
      }
    },
    {
      type: 'Feature',
      properties: { name: '崇明区' },
      geometry: {
        id: '310151',
        type: 'MultiPolygon',
        coordinates: [
          ['@@Ɯp@dG¶ƒY€IЏtuÆu¬RWˆWckĜyPVĆgðÕTUm…UÂ¥c}S“HÂ¥|÷Œ^oGĝ¬åŠµxƒb™žcAXor‘š]dš€'],
          ['@@”MšURm@kYiD[YRwRmdS^ChQv'],
          ['@@¬Q˜SzoMUægLShQ”e^sFwS_aL“’ïž{d\\ungZeNGZ']
        ],
        encodeOffsets: [[[124119, 32586]], [[124716, 32134]], [[124427, 32249]]]
      }
    }
  ],
  UTF8Encoding: !0
};

const jingan = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {
        adcode: 310106,
        name: '静安区',
        center: [121.448224, 31.229003],
        centroid: [121.450659, 31.270821],
        childrenNum: 0,
        level: 'district',
        acroutes: [100000, 310000],
        parent: { adcode: 310000 }
      },
      geometry: {
        type: 'MultiPolygon',
        coordinates: [
          [
            [
              [121.457686, 31.220193],
              [121.457341, 31.221073],
              [121.456896, 31.221918],
              [121.456836, 31.222496],
              [121.45683, 31.223524],
              [121.456756, 31.223898],
              [121.463101, 31.223965],
              [121.464071, 31.22396],
              [121.465837, 31.223818],
              [121.467041, 31.223818],
              [121.46746, 31.223866],
              [121.467634, 31.224483],
              [121.467658, 31.225632],
              [121.467914, 31.225714],
              [121.46762, 31.226205],
              [121.467326, 31.226987],
              [121.467171, 31.228149],
              [121.466971, 31.230888],
              [121.466521, 31.233394],
              [121.466323, 31.234315],
              [121.466123, 31.234911],
              [121.465596, 31.235913],
              [121.464792, 31.237236],
              [121.46428, 31.238272],
              [121.462973, 31.2414],
              [121.463977, 31.241383],
              [121.464964, 31.241177],
              [121.466288, 31.240751],
              [121.466713, 31.240541],
              [121.468365, 31.239476],
              [121.46956, 31.239214],
              [121.470546, 31.239326],
              [121.471621, 31.239771],
              [121.472217, 31.240104],
              [121.473497, 31.240947],
              [121.474129, 31.241227],
              [121.474847, 31.241421],
              [121.475601, 31.241491],
              [121.476666, 31.241425],
              [121.477235, 31.241178],
              [121.478915, 31.240294],
              [121.479632, 31.240108],
              [121.480324, 31.240106],
              [121.481051, 31.240316],
              [121.481494, 31.240543],
              [121.482989, 31.24192],
              [121.48241, 31.243204],
              [121.482349, 31.243485],
              [121.482133, 31.245363],
              [121.48177, 31.246579],
              [121.481234, 31.247955],
              [121.480922, 31.248386],
              [121.479589, 31.249809],
              [121.479809, 31.249983],
              [121.481668, 31.250694],
              [121.481137, 31.251637],
              [121.480238, 31.252688],
              [121.480142, 31.252672],
              [121.479626, 31.253389],
              [121.480299, 31.254318],
              [121.480586, 31.255244],
              [121.480606, 31.255687],
              [121.480494, 31.258569],
              [121.479924, 31.258773],
              [121.479596, 31.259014],
              [121.47806, 31.260385],
              [121.476536, 31.261668],
              [121.475907, 31.262157],
              [121.475187, 31.262575],
              [121.473565, 31.263954],
              [121.471293, 31.266139],
              [121.470196, 31.267128],
              [121.469601, 31.267802],
              [121.468328, 31.269536],
              [121.467741, 31.270393],
              [121.466818, 31.271619],
              [121.464722, 31.274298],
              [121.464298, 31.274684],
              [121.463842, 31.274959],
              [121.463094, 31.27521],
              [121.46284, 31.275389],
              [121.461868, 31.277313],
              [121.461826, 31.2784],
              [121.461477, 31.278881],
              [121.461513, 31.279676],
              [121.461773, 31.279726],
              [121.461842, 31.28015],
              [121.461791, 31.280839],
              [121.461401, 31.2818],
              [121.461341, 31.282394],
              [121.461566, 31.283042],
              [121.461807, 31.284695],
              [121.461584, 31.285232],
              [121.461471, 31.286237],
              [121.46141, 31.287236],
              [121.461073, 31.287937],
              [121.460985, 31.288811],
              [121.460449, 31.289318],
              [121.460086, 31.28978],
              [121.460165, 31.29011],
              [121.460831, 31.290782],
              [121.461385, 31.291657],
              [121.461584, 31.292112],
              [121.461852, 31.292391],
              [121.462448, 31.292745],
              [121.463238, 31.295091],
              [121.463738, 31.295745],
              [121.463956, 31.296366],
              [121.464207, 31.296623],
              [121.46425, 31.297359],
              [121.464527, 31.297993],
              [121.464328, 31.299093],
              [121.464173, 31.299625],
              [121.464224, 31.300182],
              [121.464529, 31.300877],
              [121.463837, 31.304554],
              [121.463532, 31.306002],
              [121.467679, 31.306304],
              [121.468138, 31.313354],
              [121.468277, 31.315201],
              [121.46839, 31.31745],
              [121.468139, 31.320323],
              [121.465222, 31.320395],
              [121.465377, 31.3214],
              [121.457137, 31.320999],
              [121.454704, 31.319248],
              [121.453006, 31.318544],
              [121.450502, 31.317729],
              [121.447887, 31.317103],
              [121.447298, 31.318571],
              [121.446717, 31.319813],
              [121.43677, 31.319667],
              [121.43669, 31.319671],
              [121.436459, 31.320871],
              [121.433712, 31.320923],
              [121.433599, 31.320868],
              [121.433191, 31.318541],
              [121.432471, 31.318666],
              [121.434621, 31.312298],
              [121.432939, 31.311956],
              [121.432167, 31.311686],
              [121.432497, 31.310515],
              [121.432488, 31.310298],
              [121.432011, 31.30996],
              [121.431673, 31.309578],
              [121.431925, 31.308556],
              [121.43213, 31.307382],
              [121.432434, 31.305914],
              [121.431048, 31.305769],
              [121.431294, 31.303635],
              [121.428471, 31.303309],
              [121.426428, 31.303203],
              [121.426398, 31.303136],
              [121.426566, 31.301729],
              [121.426869, 31.299864],
              [121.426937, 31.298531],
              [121.426513, 31.298408],
              [121.423642, 31.297254],
              [121.420493, 31.296932],
              [121.420033, 31.296912],
              [121.420399, 31.29572],
              [121.419766, 31.295616],
              [121.419635, 31.295002],
              [121.419141, 31.294837],
              [121.419245, 31.294164],
              [121.418872, 31.294026],
              [121.418827, 31.293039],
              [121.418645, 31.292889],
              [121.418645, 31.292256],
              [121.418915, 31.292288],
              [121.418932, 31.291689],
              [121.419618, 31.291678],
              [121.419695, 31.291068],
              [121.421249, 31.291377],
              [121.422392, 31.291115],
              [121.423801, 31.291057],
              [121.423634, 31.289408],
              [121.423514, 31.289124],
              [121.423315, 31.288167],
              [121.42327, 31.287252],
              [121.422852, 31.284456],
              [121.422977, 31.283988],
              [121.423608, 31.282076],
              [121.423971, 31.28115],
              [121.424439, 31.280233],
              [121.424544, 31.27986],
              [121.424656, 31.278808],
              [121.424544, 31.278365],
              [121.424752, 31.277268],
              [121.424326, 31.27603],
              [121.424491, 31.274629],
              [121.424568, 31.271929],
              [121.424716, 31.271298],
              [121.425252, 31.270666],
              [121.429579, 31.274707],
              [121.429838, 31.274926],
              [121.431236, 31.273054],
              [121.431635, 31.272599],
              [121.432414, 31.27194],
              [121.437095, 31.26944],
              [121.438855, 31.268794],
              [121.441255, 31.268019],
              [121.44226, 31.267654],
              [121.44272, 31.26738],
              [121.442953, 31.26712],
              [121.44595, 31.263248],
              [121.449614, 31.258406],
              [121.449796, 31.258205],
              [121.450376, 31.257229],
              [121.451043, 31.256263],
              [121.450393, 31.255578],
              [121.450056, 31.25513],
              [121.44989, 31.25457],
              [121.449883, 31.253838],
              [121.449492, 31.253565],
              [121.449319, 31.252923],
              [121.451467, 31.251992],
              [121.451285, 31.250735],
              [121.450644, 31.250767],
              [121.450696, 31.250599],
              [121.45074, 31.249199],
              [121.450619, 31.248408],
              [121.45041, 31.247747],
              [121.449422, 31.246393],
              [121.448609, 31.245627],
              [121.448314, 31.24522],
              [121.448435, 31.244523],
              [121.448755, 31.24419],
              [121.449994, 31.243294],
              [121.449283, 31.242527],
              [121.449102, 31.242443],
              [121.447232, 31.241971],
              [121.445956, 31.241445],
              [121.443854, 31.240191],
              [121.443358, 31.23981],
              [121.442583, 31.239454],
              [121.441226, 31.238662],
              [121.440291, 31.238051],
              [121.439537, 31.237777],
              [121.43798, 31.237016],
              [121.43728, 31.236321],
              [121.436038, 31.235579],
              [121.435165, 31.235251],
              [121.434589, 31.235149],
              [121.433085, 31.234998],
              [121.431336, 31.235141],
              [121.431007, 31.235103],
              [121.430505, 31.234336],
              [121.428423, 31.231865],
              [121.427912, 31.231149],
              [121.427748, 31.230668],
              [121.427515, 31.229284],
              [121.42787, 31.225897],
              [121.427877, 31.224958],
              [121.427713, 31.224225],
              [121.427912, 31.224093],
              [121.429031, 31.22309],
              [121.429769, 31.223936],
              [121.430148, 31.22421],
              [121.430636, 31.22438],
              [121.431702, 31.22452],
              [121.43221, 31.22466],
              [121.433275, 31.225253],
              [121.434302, 31.225891],
              [121.43541, 31.225069],
              [121.435435, 31.224379],
              [121.435872, 31.222598],
              [121.436119, 31.220855],
              [121.436787, 31.219099],
              [121.437315, 31.217976],
              [121.43777, 31.217211],
              [121.438651, 31.215329],
              [121.439252, 31.214432],
              [121.443164, 31.21522],
              [121.444506, 31.215506],
              [121.446559, 31.215743],
              [121.447999, 31.216023],
              [121.449545, 31.216475],
              [121.451527, 31.21718],
              [121.452317, 31.217496],
              [121.454984, 31.219196],
              [121.455921, 31.219758],
              [121.457686, 31.220193]
            ]
          ]
        ]
      }
    }
  ]
};

export { shanghai, jingan };

 src/views/historymode/component/MissionReport.vue

@@ -32,22 +32,54 @@
          ç”Ÿæˆå›¾ç‰‡
        </el-button>
      </el-form-item>
    </el-form>
    <el-form-item>
      <el-image :src="base64Url" fit="fill" :preview-src-list="[base64Url]" />
    </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="el-button-custom"
          @click="handleMixClick"
          :loading="docLoading"
        >
          ç”Ÿæˆç½‘格图片
        </el-button>
        <el-form-item>
          <el-form-item>
            <el-image
              :src="gridBase64Url"
              fit="fill"
              :preview-src-list="[gridBase64Url]"
            />
          </el-form-item>
        </el-form-item>
      </el-form-item>
    </el-form>
  </CardDialog>
</template>
<script setup>
import { computed, ref } from 'vue';
import moment from 'moment';
import dataAnalysisApi from '@/api/dataAnalysisApi';
import gridApi from '@/api/gridApi';
import { exportDocx } from '@/utils/doc';
import { radioOptions } from '@/constant/radio-options';
import { TYPE0 } from '@/constant/device-type';
import { FactorDatas } from '@/model/FactorDatas';
import factorDataParser from '@/utils/chart/factor-data-parser';
import chartToImg from '@/utils/chart/chart-to-img';
import chartMap from '@/utils/chart/chart-map';
import chartMapAmap from '@/utils/chart/chart-map-amap';
import { Legend } from '@/model/Legend';
import { getHexColor, getColorBetweenTwoColors } from '@/utils/color';

// å€Ÿç”¨å«æ˜Ÿé¥æµ‹æ¨¡å—中的100米网格
const props = defineProps({
  groupId: {
    type: Number,
    default: import.meta.env.VITE_DATA_MODE == 'jingan' ? 2 : 3
  }
});

const formObj = ref({
  timeArray: [new Date('2025-07-01T00:00:00'), new Date('2025-08-31T23:59:59')],
@@ -57,6 +89,9 @@
const docLoading = ref(false);

const base64Url = ref(null);
const gridBase64Url = ref(null);

const gridCellList = ref([]);

const params = computed(() => {
  return {
@@ -313,6 +348,65 @@
  return images;
}

function handleMixClick() {
  const tags = [1, 2];
  const fetchGridData = () => {
    gridApi.mixUnderwayGridData(props.groupId, tags).then((res) => {
      const gridData = res.data.map((v) => {
        const data = v.pm25;
        const grid = gridCellList.value.find((g) => {
          return g.cellIndex == v.cellId;
        });
        const { color, nextColor, range, nextRange } =
          Legend.getStandardColorAndNext('PM25', data);
        const ratio = (data - range) / (nextRange - range);
        const _color = getColorBetweenTwoColors(
          color.map((v) => v * 255),
          nextColor.map((v) => v * 255),
          ratio
        );

        // // æ ¹æ®é¥æµ‹æ•°æ®è®¡ç®—网格颜色
        //         const { color, nextColor, range, nextRange } =
        //           Legend.getCustomColorAndNext(data, min, max);
        //         const ratio = (data - range) / (nextRange - range);

        //         const _color = getColorBetweenTwoColors(
        //           color.map((v) => v * 255),
        //           nextColor.map((v) => v * 255),
        //           ratio
        //         );
        return {
          centerLng: grid.longitude,
          centerLat: grid.latitude,
          value: _color,
          coordinates: [
            [grid.point1Lon, grid.point1Lat],
            [grid.point2Lon, grid.point2Lat],
            [grid.point3Lon, grid.point3Lat],
            [grid.point4Lon, grid.point4Lat]
          ]
        };
      });
      // chartMapAmap.generateGridMap(gridData).then((url) => {
      //   gridBase64Url.value = url;
      // });
      gridBase64Url.value = chartMap.generateGridMap(gridData);
    });
  };

  if (gridCellList.value.length == 0) {
    gridApi
      .fetchGridCell(props.groupId)
      .then((res) => {
        gridCellList.value = res.data;
      })
      .then(() => fetchGridData());
  } else {
    fetchGridData();
  }
}

function generateDocx() {
  exportDocx(
    '/underway_season_report.docx',

 src/views/underwaymix/UnderwayMixMode.vue

@@ -128,13 +128,13 @@
                prop="zone"
                label="区域"
                align="center"
                width="50"
                width="60"
              />
              <el-table-column
                prop="pollutionDegree"
                label="污染背景"
                align="center"
                width="70"
                width="66"
              />
            </el-table>

@@ -229,7 +229,7 @@
const props = defineProps({
  groupId: {
    type: Number,
    default: 3
    default: import.meta.env.VITE_DATA_MODE == 'jingan' ? 2 : 3
  }
});
const show = ref(true);