echarts map 地图在react项目中的使用

阅读原文时间：2023年07月09日阅读：6

展示海南省地图，点击市高亮展示，并在右侧展示对应市的相关数据。
Echarts
海南地图json

index.tsx

import React, { useRef, useEffect, useState } from "react";
import Sss from "../../images/index/sss.png";
import SssActive from "../../images/index/sss-on.png";
// 按需引入Echarts
import * as echarts from "echarts/core";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
} from "echarts/components";
import { MapChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
// HainanMap-地图json，HainanData-各市名称映射，HainanIntro-各市展示数据
import { HainanMap, HainanData, HainanIntro } from "../../utils/hainan";
import "./index.less";

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  MapChart,
  CanvasRenderer,
]);
function Index() {
  // 需要渲染地图的Dom
  const chartDom: any = useRef();
  // 需要展示的市数据
  const [cityInfo, setCityInfo] = useState(HainanIntro["haikou"]);
  // 是否选中三沙市
  const [isSS, setIsSS] = useState(false);

  //海南地图
  useEffect(() => {
    if (chartDom.current) {
      // Echarts初始化
      const myChart = echarts.init(chartDom.current);
      echarts.registerMap("Hainan", HainanMap);

      myChart &&
        myChart.setOption({
          title: {
            show: false,
          },
          tooltip: {
            show: false,
            trigger: "item",
          },
          toolbox: {
            show: false,
          },
          visualMap: {
            show: false,
          },
        });
      // 点击地图上市，进行高亮区域和相应数据切换
      myChart.on("click", function (params: any) {
        const data: any = params.data;
        if (data) {
          setIsSS(false);
          HainanData.map((item: any) => {
            if (item.name === data.name) {
              item.selected = true;
            }
            return item;
          });
          setCityInfo(HainanIntro[data.key]);
        }
      });
      if (isSS) {
        myChart.setOption(
          {
            series: [
              {
                id: "hainan",
                name: "",
                type: "map",
                map: "Hainan", // 自定义扩展图表类型
                label: {
                  show: true,
                },
                data: HainanData,
                itemStyle: {
                  // 设置每个市区的默认颜色
                  areaColor: "#eff9ff",
                  borderColor: "#1b85f2",
                },
                emphasis: {
                  // 设置每个市区hover的颜色和边框
                  itemStyle: {
                    areaColor: "#90eaff",
                    borderWidth: 2,
                  },
                },
                select: {
                  // 设置选中市区的颜色和边框
                  itemStyle: {
                    areaColor: "#90eaff",
                    borderWidth: 2,
                  },
                },
              },
            ],
          },
          true // 必须设置为true，否则数据不能正确渲染
        );
      } else {
        myChart.setOption(
          {
            series: [
              {
                id: "hainan",
                name: "",
                type: "map",
                map: "Hainan", // 自定义扩展图表类型
                label: {
                  show: true,
                },
                data: HainanData,
                itemStyle: {
                  areaColor: "#eff9ff",
                  borderColor: "#1b85f2",
                },
                emphasis: {
                  itemStyle: {
                    areaColor: "#90eaff",
                    borderWidth: 2,
                  },
                },
                select: {
                  itemStyle: {
                    areaColor: "#90eaff",
                    borderWidth: 2,
                  },
                },
              },
            ],
          },
          true // 必须设置为true，否则数据不能正确渲染
        );
      }
    }
  }, [isSS]);
  // 选中三沙市
  const selectSS = () => {
    setIsSS(true);
    setCityInfo(HainanIntro["sansha"]);
    // 海南数据selected全部置为false
    HainanData.map((item: any) => {
      item.selected = false;
      return item;
    });
  };
  return (
    <div className="city-wrap">
      <div className="normal-box">
        <div className="title">各县市专场</div>
        {/* 海南地图 */}
        <div className="hainan" ref={chartDom}></div>
        {/* 三沙市图片 */}
        <img
          className="sss"
          src={isSS ? SssActive : Sss}
          alt=""
          onClick={selectSS}
        />
        {/* 市区数据 */}
        <div className="city-intro">
          <div className="main-info">
            <img
              className="city-img"
              src={require(`../../images/index/${cityInfo.img}.jpeg`).default}
              alt=""
            ></img>
            <div>
              <div className="city-name">{cityInfo.name}</div>
              <div className="city-info">{cityInfo.detail}</div>
            </div>
          </div>
          <div className="city-company">
            <div className="company-row">
              <div className="row-idx th">序号</div>
              <div className="row-content th">部分知名企业</div>
            </div>
            <div className="company-row">
              <div className="row-idx">1</div>
              <div className="row-content">海南电网有限责任公司</div>
            </div>
            <div className="company-row">
              <div className="row-idx tb">2</div>
              <div className="row-content tb">海南航空控股股份有限公司</div>
            </div>
            <div className="company-row">
              <div className="row-idx">3</div>
              <div className="row-content">
                海南天然橡胶产业集团股份有限公司
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Index;

index.less

.normal-box {
    width: 1200px;
    margin: 0 auto;
    padding-top: 52px;
  }
.city-wrap {
    width: 100%;
    height: 740px;
    //padding-top: 60px;
    background-image: linear-gradient(to right bottom, #81bcff, #006def);

    .title {
      color: #fff;
    }

    .hainan {
      display: inline-block;
      width: 600px;
      height: 600px;
    }

    .sss {
      position: relative;
      top: -50px;
      left: -200px;
    }

    .city-intro {
      display: inline-block;
      width: 500px;
      margin-top: 50px;
      padding: 30px 18px;
      background-color: #fff;
      vertical-align: top;

      .main-info {
        display: flex;
      }
    }

    .city-img {
      width: 150px;
      margin-right: 18px;
      object-fit: contain;
    }

    .city-name {
      font-size: 22px;
      color: @primary-color;
    }

    .city-company {
      margin-top: 40px;

      .company-row {
        width: 100%;
        height: 50px;
        line-height: 50px;
        display: flex;
      }

      .row-idx {
        width: 48px;
        margin-right: 3px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
      }

      .row-content {
        flex: 1;
        padding-left: 40px;
        padding-right: 10px;
      }

      .th {
        background-color: #d9f2ff;
      }

      .tb {
        background-color: #eff9ff;
      }
    }
  }

hainan.ts

export const HainanMap:any = {
  "type": "FeatureCollection",
  "features": [{
    "id": "460100",
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": ["@@¢NDxBrCpI^OTGjGfBBBFFB\\PlRRPJhJ\\DC|K|Q¤kfGL@PDFAHGFMFENEJGNODK@OCE@AFAHEXGJEL@BEFAD@BC@MFGD@DAL_CKAEN@D@BBNKF@BEFEDGFCFICMAEJGDUBGAEKIAEHQJAXFN@DCBEJIJCBGACWMCG@CFGDYFKCEMEGEE@SAKFELBFEDEIEBIAKOGCEGAAACECCBCABIB@FDB@ACXA@CCAKAACBGAAEAEEAIEICOCCCAGEGSBEHKBIDA^IDE@ICEGBOCKBIGE@CAGBGGACJCJ@HDDABMGGFU@MAEFGPMFBHCHBTADCBCDAVBD@@AEEGAGEKABGC@CCDECIDIAEGIEMGECIIGAC@[AKFMDCEI@CFBDAAGBGCQGACIE@@AOEEDKACC@EGBCAEBGACFC@EA[CCAG@ECG@EDC@EBCDELEDC@OABDAFDDDJBBBFBF@HDJMCWBECAEA@UVGDC@ABC^ABM@IHGDABOEEK@ACAODGDK@EGDCAGACCAGBKFI@KHIBGDGNAJDLFJ@@EDC@CCAB@DCAKBEEABGAEBADCAAFA@AH@BABBFADBBC@BDADGA@BCB@FCDANEHGDAD@HADBNBXBFHJ@FAHXLFJBFAFCB@HEFCNIBBD@HDDADIAASCEeDCBIECBIFEBEACCEAOCEICCGOEEICABWJC@CAI@GAG@A@EGEDE@ECG@ACBKqGUIE@KJAHHFBTFNBBABCDAJQ@IBAT@BFDBJFF@LNFFNFADBABCBELDVCDYL@JGJIhABHR@H@FCFARWRGBIAMB@FHHPAHBET@BABCCMCAA]LEAKIMGC@C@CDAJ@BF@HDRA@FCF@DBVGHKDAFFJFDNF@DEHI@MLEJ@JDHB@DABCH@BDFBBBAFDABCJEDGB@AJID@DFBLA@BGFCCGBEBAFLZBBBBCH@FDBHBCLDFCREBACCAODGAILKBBNBHKJmx"],
      "encodeOffsets": [
        [112750, 20508]
      ]
    },
    "properties": {
      "cp": [110.43119, 19.900071],
      "name": "海口市",
      "childNum": 1
    }
  }, {
    "id": "460200",
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": ["@@FDFFAF@DZRRD@B@LLTFDFFABJDLALPRDHADBHHLBJABCD@RdD@XMHDJHDBFFLDDLRE@ABCDDBABFRDREBDF@DDLDDADEJAFCFKDCTCVL@BEFBDJBBHFFAHBVCPCDEBAF@JCJBPBFDBDH@HBLBBF@BFJFANBHDFFDFBF@FCHA\\CRHJHF@FGLCD@VODINQLBFAHC@EACBMDIB@JHHDHEJBFFFJBLKVAFBHFJXZBLDFFDLDPDLLJ@NLJDNNNJNZNJHAFB@CHG@OCKFEACF@BC@CBGLU@GDCD@@A@CEIFGF@FDBBBFDABBB@LCFETIDCN@XFJEFALEJBFAL@DDFGBSDAFAZCPGFCBECWBG@A@EBC@OCCDMCEIGGIDIEEAQEC@I@ALI@GCGAIGGKFBMNMPE@ADABKLE@E@IBGFCJAJDFAFBDAFBBAH@@CTIHJNFNMHBDCFAJFF@D@DBBBDBDAFBDBDFDAF@LL@CJKJCHBJCB@DBHAD@@FBDLDFEDALFGN@DHF@HN@@LAF@JPTB@JIFAHI@@BB@HER@RDNBLFJLNFBFAB@@FCHDJCFBH@DP@NHHHDCNFNDDRBD@R@DH@HFHGD@HI@MBAECEQFOFENGV@BCJMHGFO@EAEGIAWCGCA]ECC@EDODEF[MEFGFBB@\\«UEQICCGUEmW{C]CgW¡QO]MeIgC_DUDO@QCeMc[YKWEWAUBMDWP_`IDO@}CUDMDGHM\\KJSH×VUJsRħI_BUBQLELIjMlEHGDSD½DAQCKGEGGCKGBGDGHYl"],
      "encodeOffsets": [
        [111547, 18776]
      ]
    },
    "properties": {
      "cp": [109.508268, 18.247872],
      "name": "三亚市",
      "childNum": 1
    }
  }, {
    "id": "460400",
    "type": "Feature",
    "geometry": {
      "type": "MultiPolygon",
      "coordinates": [
        ["@@EGICEEDIEKDKEGAODIHEAIQMEKSUMGGKEW@EHGHAR@D@DEAQ@KCOBOBEHCBELABE@KGQE@GBGFIAACFMAEEBIAKAIGUHONO@GAQCSKK@KDGAQECEAE@CJGBC@CCCASLMIUBIDAJCFDL@HCHFLADEPB\\A@@CC@CFE@EFBDDF@@IFKDCAACCBABK@SCOIQEMGGCMAGDEDCHSBKDGAuCGGGAKEECEAOGIAGCKKNITEVCDEBMEUCaCCLSNQTAXAF@ZABKDIAAAAEAGE@GGEBCHCRADGHAHABKFEHEBAD@DGHEHAJGDADEPIDCNE@GGMAMIKCGCC@CFFB@DKBeKCACA[HBBFJDLBDTAAH@FHDBPHFFAFBAJHL@DC@CH@JFDH@DF@DCFEDG@@F@FGDELIJAFNLAFEDEHAFC@IIQCKBI@EGQWEMDOEEQKEEKEABMDCDGEC@G@IIGDEAE@KFEDDD@BEFADBF@DIDABEAAAA@CFEFC@@AAAAFE@DE@EEGCB@FA@CCCA@HABCEIBCRINIBIHA@EEA@ADBDAFCDAA@CGAEKCDAFABAC@CEEGD@HCDADCDA@CCBMAGC@A@W@@CFC@AAASB@ABGAAMFEFAHOAILM@AEC@A@AHA@IE@ECCO@ABEJQLGBOEECE@IFGJBH@JHNZRGP]AUBEFITINOFGFCHAJKTEHIACCAKCEEAEHEDGAWBIFCHUJODW@GBG@EEESB]NWBIEQMIWJWMGCM@KBGDEDBF@HAFCBEPAJDB@BABGDCDE`OBUHENGHKDIAEACBEHWvTVXRtX|lXhN\\Xj^b^NXHhDRDNLZ`DN@HMbELCLBd@PP^JJPHlTFHDXDFV\\JFPJL@PCFBPJBNFN@bFLDBF@LALEH@BBAJDHFD\\JN@rKFAVUFAJ@JBN@IQĘyPEDIFe@aAU@KJgDKHEXCJEHUAOAEBYAGGI@EGCKDBIKGIIEAKAKLC@@IAMDIDEDAJBNY@OEEXOJUIMAGHAF@VJJOHADEN@DCJJXBF@DCFID@@FFDBADEFBL@DBNAJB@ASEIMBEAIJACGDCBCAADGBD@JHK@AACF@@CF@@GBAAFDBEHAF@@JCDCBCBB@E@ABAAAB@BFB@DGB@FEBBGFADBBD@@EDABBNABEJKFAJJRJREBCJBIHC@DB@BFGHCDFCBH@BHBAAECCAEK@FGFABCDBHCL@DAJHPB"],
        ["@@MEGBID@FDHRJNBP@dEjIHGBCACICGIC@KBCBI@]JCBAFM@GA"]
      ],
      "encodeOffsets": [
        [
          [112404, 20049]
        ],
        [
          [112059, 20391]
        ]
      ]
    },
    "properties": {
      "cp": [109.376782, 19.517486],
      "name": "儋州市",
      "childNum": 2
    }
  }, {
    "id": "469001",
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": ["@@@AFSLKEEAK@IJKDKDANQHU@YJQDCbKDABMHMDAbAJYRFRADDBJJDF@TKFFPBREF@FFPHFFLALFNEFEPDHCFIfEBA@ECEMKGCKBGAUSAEBIHKHCHGHGBCBKAKAQ@OBCAAKCc@ECAECEFMJI@EIEEI@CFMKIAAHEDEAIBCHIBIJKDKPa@CCCAOAAAAIDEAK@MHKBEAGAIASBKEKB@IEIAGECAC@EDIEOCAGDCAIQ@EA@MJEFAHGDADE@CAIBIRGD@HCJKDK@AD@HDDJBD@H@DTAJKDCBICIDG@@AD@@EGEQGAKIEEOEGCAKCIG@EFGJaACCCAGDEHMDA@EGAOAAIEEI@SJiMI@IBMACFK@EFI@KDCBKMCMEKMMICa@CBCJGDEFGLHhAPKLE@IBAHCHEFEFONIFKRAF@LAPBHFH@DGRCPBDFB@DIP@LBFDBHADBED@B@JEZBJEH@NHJDLFFARBD@HFDBFNJDHADYbGDI@QFDFDB@DG@HF@DIJ@DBHILAHEHMBEJFBCHBFBDTLBJBFPDBFVEFCDGDCD@TJFD@LBDHBJHJ@TNHDAJNTNHHPDBNALBHBJDPBFDDHFbFZDDFCFEDALBVHRGJ@HFNCLD"],
      "encodeOffsets": [
        [112153, 19488]
      ]
    },
    "properties": {
      "cp": [109.516662, 18.776921],
      "name": "五指山市",
      "childNum": 1
    }
  }, {
    "id": "469002",
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": ["@@o·}WyocGcQÉFUBKFCHANC@CBIEE@GFSWIQKEE@GFQTOJQ@OKHaKOOKaAQGMGOG[S[KmMWCACC@@EBCAGBGAAACE@@CCAIAM@IEE@EAA@CHC@CCG@CKII[MMDQASIYEIHMTAFADADILECGEIBGAEBKEGBEFBLDHAFKBEAAAAQHMAGA@MAIDGRMHEJA@CCIQCJEFADDLFH@BGHQDINAHCBEBIHAHGBGZFF@JBFBPGf@^KlD@PPPTLT@P@NHNEZDPHLJ@Z[NGRFVJZHRHNDT@EZJ@XFLCZQL@JBJHJDZINB`\\RBJEFEFCJBHHDPCJGJCJ@LDVHLDDZDFJ@JALCLEFUHcTCNLTDP@DFXLJf@FFBLCP@PLTPHZBHBNLLXHFHAFCPCHFL^HJNNLJLBN@VIL@JAHDFFDRJNLJJBRCTEPDVDHcFITCJCPULW@QEQBGLGDKEiBKHK`KRH`VCXBJFPDDJANGFPJDLBPCVG¬Y"],
      "encodeOffsets": [
        [113388, 19844]
      ]
    },
    "properties": {
      "cp": [110.496785, 19.246011],
      "name": "琼海市",
      "childNum": 1
    }
  }, {
    "id": "469005",
    "type": "Feature",
    "geometry": {
      "type": "MultiPolygon",
      "coordinates": [
        ["@@FHFBBBAHBDLBDB@DWBBDA@ECA@AJDBDAFDBDBBFHHDLPJBFAFJFCAEFKLETBF@HFNFDFELCZEH@DDHXNBDAHIDIJAFCDM@WEIBGRBFLJBFAHCVIHBFDNEJEDCHEFAFE@MLAAC@M@BFDLK`CBC@EH@NADC@EBAFK@IFWHGFEB@BDF@PCLMPIHMFEFENGHEB&nbsp;fjRPPLXLXJLDRRTTTRHDL@HA\\MLM`³N_JErETE\\SRWPUZSlQbGXCPVL\\H\\ANGJKFOhÉtý~ñrģFmEUMMWIQCASE¥{{gg{qiiQGOEuEEAIM«ZUHODKAICEOMHIBCCEOAIDW_UQGODOHGLALFjCLKHAHFR@RCLKTKNIDSDEJGdHHDTAJORGFeXMBK@mQM@GDCDCJC^BLJJLFNJHNJHLDVDLHNKB@BFFDXANDCI@GAEAEAACICCBEACPBD@FCFKDCFAD@FCH@FDH@DB\\DFBD@DEHBFADBHA@FDDLBFCPF@BF@DJHBDRAHBHCBEA@DFJCDENBL@\\BDJHDJHFFNHJBFCJDJCFDDD@AHLBHFHBFF@BC@UACBADCDSBGAGDEAONEHBF@NEVHHANCBGCI@IDBDHHHADBF@JHLAPDHADF@JCF]JCBAJGLAFHTHFDBDDDPHR"],
        ["@@@HJD@CAAFK@CA@KJ"],
        ["@@BDB@DBB@CGEB"],
        ["@@BB@AA@"],
        ["@@B@A@"],
        ["@@FFFBAGEACB"],
        ["@@@FB@@CAA"],
        ["@@BBAA"],
        ["@@@BBAA@"],
        ["@@BDDAEA"],
        ["@@BBB@CA"],
        ["@@BHFAHK@ECACBGJ@B"]
      ],
      "encodeOffsets": [
        [
          [113296, 20243]
        ],
        [
          [113943, 20459]
        ],
        [
          [113936, 20444]
        ],
        [
          [113935, 20443]
        ],
        [
          [113930, 20442]
        ],
        [
          [113924, 20438]
        ],
        [
          [113872, 20402]
        ],
        [
          [113873, 20404]
        ],
        [
          [113875, 20391]
        ],
        [
          [113886, 20359]
        ],
        [
          [113885, 20360]
        ],
        [
          [113871, 20387]
        ]
      ]
    },
    "properties": {
      "cp": [110.793975, 19.612986],
      "name": "文昌市",
      "childNum": 12
    }
  }, {
    "id": "469006",
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": ["@@cšO@cFqDa@_EeEQMWWU_O¥[AACY@sHA[AEGCOAŁcI@KBQTY@WsW]QdWBK@KBEDAJC@QBEGMEGIKCEFIJEBOZCBKAG@CBYVGNEB]@KCC@IFGHGNARMJI^@HEV@RDJBFEX@HDL@N`JBNAF@DLHHPJ@NID@FDHPJLBBH@BDEHDRDBNDDBRRJLBJENKNGRALQXUTKVW\\FJzXTJPFHDLLDLA\\FPtPPAPBFPPBFJRDDB@FINGHQJCJ@FBBHGN@PDDJ@H@BA@CCGAKDCFCD@LFFAHBJAHFFDJKBCBCBENSJGZFTJRBNC\\NJJDLH@DDD@DGB@FBF@JFN@JBDB@DF@BDBBAHBHAD@FD@BDXDnN\\L\\TPHNHRHbBPLLPGbPLR@PIRSHEF@LFJRTXHEF@JFDAD@BMDGLEVAE"],
      "encodeOffsets": [
        [113266, 19543]
      ]
    },
    "properties": {
      "cp": [110.388793, 18.796216],
      "name": "万宁市",
      "childNum": 1
    }
  }, {
    "id": "469007",
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": ["@@BEE[SESBQEMOKGGIACAmAEKKSBSACCAECAKDM@KDMBKFGEQAECKOAEIKIDQBC@CEEAKBOHQCEBYBwOUIIGSKQQmQ_YccM@]DKAKKGFILOPKDOG{@ICUMGCTI\\ejqrapI^A^@TDTL^pp\\ZDFHTMäADaXIRUK¦ATôJFXNZbtZVYJOHUAEDKHCDE@CHKDETOBEBCDKDGJGNGTEXCNDJAfMxOD@LHFBX@LBJDPLRDFCHEHMJCNAJCp]\\BDAROPEJBJDNB`CLAHGHIDKLKBaHYFKNOFEJAL@NE@AIKOAEA@CDG@ERGF@NDHCFGBGFEDS@AEBCCEICACE@EDEDKAIICCEHIEa@EVULDREFDFH\\@FA\\QL@`GL@DCRuBA@IDC@EDYAIDICI@ECC@CGKAIMS@YMKCQBCBCNCPMDEDIDCNENK"],
      "encodeOffsets": [
        [111745, 19332]
      ]
    },
    "properties": {
      "cp": [108.7866700000, 19.0961400000],
      "name": "东方市",
      "childNum": 1
    }
  }, {
    "id": "469021",
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": ["@@HBDA@AEEBEACJADMFE@GDABEAEEIWKBG@EGIAEAWAMBC@GBCHCFGBMDC@EDA@AHBBCACD@AABCAEBA@ABGB@BEDBBCFAHBBAFFLADB@CBADDD@FCEICKBIFKJEJAHGF@H@RGFBDJ@DCBFHL@HCPCDB@BFLPFBAHCJGN@BAD]BAD@HCHE@CKGUCKCIGGMMIKEIIAKD]DIDCHCH@F@nRL@NAfWHEPQBICSGGUCOCSFQDIAKIIMCQEEGCIBK@UJM@KAKIMMGIK]GEODEDGBGEKWMKGAYAOGKS@ODOAKEEe@KIEW@CCOKSDMdSVGFEDKBUEIYCCCGKCU@KDIHIDICOGGIAEDEFIFQA_[MAYJICIGIAK@YRKDWEI@DXC`DTBlDJCDBHDF@BEPABEAE@CBAFMPCEM@SGIAEHCDHJABGBCBCJBDRRBFAJEHFHKFIEC@EFCHIH@FBNCHAHCHCPHJB~LRZTJNLHRAPGTCPDJR@jBLNJRALJ@LIRORIDKBOJO@IF]NAD@NBBFBDB@DEB@DDNAFCLBN@BEBEFCHBLCDG@GCEFABECCBKKABMCAADCAGBCGA@CDAICBAGCBEI@CAACCA@EA@IFAJCDADBRTD@HI@@JAD@FC@CCCCACE@CFCFBJFFDDRHHJ@HAPKXGXFHTBHL@JHJRFNEB@FARO@CCEDIAEFGF@DA@IHAXKJOLDDAJEDKD@HDBDCHGDCJFFDHFBHJN@A`DFNHNBHHALJVAHBJH@FDF@FCFHRBJ@DBJADANEBAJDFFHPDDFJPDFBDDFBFAJEDAJFDAfCDFBT"],
      "encodeOffsets": [
        [113028, 20202]
      ]
    },
    "properties": {
      "cp": [110.369235, 19.484966],
      "name": "定安县",
      "childNum": 1
    }
  }, {
    "id": "469022",
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": ["@@HCBFDBBDDBJ@AFHDABJDCB@DHBADBHCDBBNDBALLDAFDBAFEHDH@DCAKDGFEFA@AAMDKBECM@CFA@CCAEAAA@MBC^MJEP@PILAJCPQJQ@KKIQBMIAK@iIQOCSDOHQBKGIMYSKQA}GIDODGBGDGAM@EJGDGFED@JFLEEGFGBIAEQQACDIDAHABAGIDCFGJBTHN@DFNOBEDAF@FBBAFO@ACEAGDCCIAkCSD_CWFYS@MCQGYGUIQEMHY\\I@GKCOFYGM@M@OKSOSOOC@KJODO@S@eIQAKHEHAPGPSPCDCJDHEBAAAAQDEAGFCAI@CHEB@DBDEBAFCAADa@GA_CGN@FBT@HGNKNMLOFMJKBKA_AQRcnEFGDMBM@CCA@MLQBQVDdDFCJDHD^@DGDFHHDHFF@LJ@VFPLTPJJBJC@DDBDCFBHIHGJ@D@PNRBJJ@FGA@DC@@BDDJBBD@DELIAC@ADFBJBFB@F@NDJDBFED@RDNAFB@DGLICEBGB@FBFDDF@JH@LJLCH@BLBDB@DIBKN@BDHALVBZFXA`KRANBbFJCJEDIDYHKNCTFTHNJDJ@JGNDPRJLBdAPDPJAJCHILBLDD@FADEFCAABCACBBDDDCHEFBBAHNDD@FABABB@BFBBBBBADFBJHFAJ@BABB"],
      "encodeOffsets": [
        [112781, 20030]
      ]
    },
    "properties": {
      "cp": [110.032773, 19.362916],
      "name": "屯昌县",
      "childNum": 1
    }
  }, {
    "id": "469023",
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": ["@@nwLIAGAMLAJKHBPCDBBDDAB@BGBICEDKGACA@EDGAAAAKYBEFAHADDHE@AKBEA@CJCBIA@CHIFADCBBEAAEAACG@ADCBA@CG@IFINKJ@FG@CMEECEIBELCHGAU@CDE@EQBGCE@@ABIDCH@NHLJFB^KBBNDDDBA@AFSGAOBGG@ENAJBHAXQBQDE@E@GGQBAJgHI@IZKDCCUFKDABACAEBEMME@KEEAIEC@ABSJAR@BIDCBAAAEMASGEBGLIF@VJrH@EIQBKGGMAICEE@cM@GIEACGEEDIHCDGACGCC@CLIFCBKCIPWLGB@JCBE@EHBFCJDF@DQPEBA@MFQEGI@IGKSAEGHWLWBO@GGIQGCCEEAIDEDEF@BDDDDDD@@EBC@IJ@@GSCAQBCDCBIBAAAABI@EBIGEABCAAAAEA@AAAABEBC@MCBGAAFEDGCCACDADBBADBFEBC@ECCAKJKDGBIOIOCcBKAQICOHM@ICIMISGSEMDGLCZCJIFIDaEMAQB_LWBYEUABKCG@ALMJA@CCAKA@ADGIK@KIGE@CCAE@EHAFAJDHK@CEAMBQCC@EFCACI@M@EEAIAEABCD@JBFK@CACIACC@AD@@CHB@EIIQAQMI@C@EHOVIBBL@JIJGBCBABHJADEBEEBGCGGEOCAI@CJCLGDABAACIBGIA@GJC@ONC@ICIGQAKKMAECAMI@AHGBE@EHEFABDJKPUFY@OLBFENBDJBHEHAF@HR@LAFKBAFGDAFAPDP@LBRCFC@Q@GBGH@FFXHLNHTVFLRNBJGFCJBPFHCLFLCJFFJDDFHDFHBHJNHT@FDBH@FGLGLAJBRELBPJCH[HENBJHFLJDDBPFHNHTDLFDJ@JDNJR@VBPFL\\`HLBXFNCNANJBBBFL@JDJDL@DEHGDEJWJADFT@JFFJD@DCLUF@FDJLBFBB\\KDI@CJCBMAGBORQDHJFBDFAHKPLBJALPFQDAHBDC@CHABCFBLNHV@^BLYFIRc¤ZFPBpCbK`OZBTÄ"],
      "encodeOffsets": [
        [112750, 20508]
      ]
    },
    "properties": {
      "cp": [110.007147, 19.737095],
      "name": "澄迈县",
      "childNum": 1
    }
  }, {
    "id": "469024",
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": ["@@X|VLR~p^\\NJNDP^@^NTRJDNDP@TCN@dHL@NCTK^cZUNCXAPBLDZRNFNDR@LALG\\Kd£JQZEAK@]GUKMEAADGB@DCDGACBERKOIBKALOBGCEEAGIRCPQHANBDADIJ@LCA[EAKACI@EVEDK@CICEE@IESBCXIFIHCFG@CCKCI@IEKAAIABMDMEMAWGK[_EKAO@UIQCM@ICIKESCMGEGAOCCKIGEAIFM\\GDGOIKAQFIAKBKHEHG@CA@EGSIMAGEGEAOAIGCBK@GDCAADEBEHL@BFDDBFABAGG@DACEGDEH@ACAD@JGIAADQFQIIIEBILAFMBAACB@FC@AABCHEAAEFA@CHA@AEA@BBAB@B@FAAADCDIDBEFGCABEAB@HE@@DE@BD@BGL@IACCHBBADCDDHIBBJAFJNTF@BIAMBCAK@EACFABEC@EC@EJCDE@WAIICDM@CFGBIPUIE@GBBHJNIVWPFF@PMZIACBCFCJBN@JD@LKLBFBJJLHAJLCHD@FHJBHAZBFBPGVIFWDGFCLIhDxGrCJOF·`"],
      "encodeOffsets": [
        [112127, 20351]
      ]
    },
    "properties": {
      "cp": [109.687697, 19.908293],
      "name": "临高县",
      "childNum": 1
    }
  }, {
    "id": "469025",
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": ["@@PCVIDGJEXAHBFCFGFBDFBLDDJBFGLSBIDGHEPEJMJSFEVA^BHOYQGM@IAGHIJEF@FDPFHARKFIBAP@DD@FJFB@BGB@D@BFN@JKPBBGFENEBBAH@BTABB@BED@DX@B@D@BHANDDB@DCBCDC@GHCFF@DBDBABEDCFLHB@DBBDCBEACBCB@FFB@JGJAJMDQJADFBA@GDBDDB@@EDAFH@FCFF@BEBB@BD@FEDEB@BBFBBAJC@CAEBCFE@ACCFCLEF@FBHCJJH@D@HFDCNCBALFFFRLFFCPFNRXFHJ@LARDJJD@BEFGFCBEMKBEJIFKHC@E@EH@FCDE@CCEG@EC@IDGD@@CGKBIEAEBGEAOGC@EBGSBACCKEIAA\\GDBDBfLLA@CEADED@HDLDNJNBHHF@DMJCFOBCHCBIFGHG@CBCFAFGLEBABGHGBCDQDGFAHHF@BHBFBBJBNC@[BEBWRSTMDKrFTHFADAFWJSLMCKJSBCTKBICQDKACY_YTW@IGGMAKBMAAICKIOCIBE@EGUKEG@EJ]CMGEEAKAw`OFOBIAGCCCEECE@QCMAMKCIGIEKCMDGEI@QHUGKAEBGHC@G[EaCGECOAICGAKAMBCAGOMGMSBIGCSMI@IGGAAC@G@CECSIEBEJED]HMJKCC@IFeLKFCCIDS@AHBTILADBBDFJNBD@FAHEDCFD`AFCDBJCFAHCFDLBNCH@JKDKECBM@KFINMAI@CDGDGCG@IRKHMDIAOIGAGAIBMtKXEHANFVCLIJk\\KNM^ETBLXnRrBNBRIPGHGJKLGTADIAGCK@SLKTCTIL]@QFKFSRERBRDHHHJL@VIVCNCjBNNJFRAJMXA^FTFFH@HAX@"],
      "encodeOffsets": [
        [111689, 19955]
      ]
    },
    "properties": {
      "cp": [109.452606, 19.154584],
      "name": "白沙黎族自治县",
      "childNum": 1
    }
  }, {
    "id": "469026",
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": ["@@ASDcDMJU@UIKGGCGAQFQTQLERE^@JKDSLSTKL@HDJBBCHSLKHIHGJOAQAMQqWmAKFSN]LMl[JIDKEUBMFGLWNsJAHBHBPJJBNCLGJQH@HDHCDCJ@NBJMLEN@DALFLC@IDGAMCKDEBGDEAIDCBEC_DEFCBG@EACMSACLMASBGT@JC@EGOG@SUMCIGGYB[AAEAKAACEAMCOBQAGGECKDOAYNEDCHKDKDS@GGSBKGQ@EQQ[EEA@MLMFCDCJCFONMDADADDRNL@ZNTBJHL@DDD@FDJCJBJCZ@FCD@JABQvCDK@_HK@[REB[@EGECQFKCUV@FFbGJDFJDBJCLCF@FDFDBFJDDFA@BCTEFAHEHGDMCE@QH@FCH@DFBPBJL@BMFK@IBEFMPELGZAbKLCLGJGHKB_DMAICIAOFQPCB[Ao^IDMBIDGNGFEDQCOKICKAW@EAKGC@wPeNIBMCWDSFMHIHCHCLADAFSPCFGL@DCFGDCLBFGVIPUZNVZ^`N\\LXDBTDdRNNj\\XbNhLZLjXuFGDAFBJBLCHGFMVGPAF_DCHCBA@ACABIFODABE@GAEFCHCLAN@HDXNXI"],
      "encodeOffsets": [
        [111662, 19897]
      ]
    },
    "properties": {
      "cp": [109.053351, 19.260968],
      "name": "昌江黎族自治县",
      "childNum": 1
    }
  }, {
    "id": "469027",
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": ["@@EAGBIEEECMGIMIMMICMKI@MKMCQGCEAKWYEIAGBELUAKEIEEIAGFGCIGA@CJANBD@FGDEBKAMRCJUPC@KDEHE@IGQG[DGBEDE@EAECCEAGBMIEAEE@AAAK@GCGCAAEAODI@IBEFADCDOAUBGEEAGIAACFE@AUKSDCDELEDIBCFCBKCCCE@ACQFQCAEABCCAD@BQFCKKCEECAIGGCWNC@QcC@ADIBKAGGCAGBQCKOKBICBAEEECKS@K@AQCYQ@CBEEEECwapIFCBsBTqTkJÇDkHePWNQXIZGtChDbÆNIHVNJD|@PHLCPOJKHELLLB^CN@dd`ZnRRRTLJHVJxPZAFARDPGLAFBDFD@RAJCJLBFLPFDRBHFLENALCN@LCDBBFDDTBVAJLBFBnBDHJLHNPRFTATFF\\AFHFR\\FRP@NHTAHHT@XGDGFCVKFANBJCHDHHRBPANDFBDFPBBFAXHZJHNDTVH@B@FP@FDDLEfKJED@LDNIHAAEOCAEAISKCIDGEAFINAFGBGJKAGJOACECF@BAGIREJ@HCZaBCCGMIAEEC@GACBQEECKGI@MFGAIFY@I@AFCCAGBCAAE@KJO@CEAACDOHQ@CEGAGBO@KBELQJEPMFEFEDGBGJAF@LKBOGgHKFEHCDKEG"],
      "encodeOffsets": [
        [112031, 19071]
      ]
    },
    "properties": {
      "cp": [109.105444, 18.64758],
      "name": "乐东黎族自治县",
      "childNum": 1
    }
  }, {
    "id": "469028",
    "type": "Feature",
    "geometry": {
      "type": "MultiPolygon",
      "coordinates": [
        ["@@@MCK@GFWAECI@IF]@GJ]NIBQHMHGLEND^@FAHMZUDAH@LBDAPYFAJIFELDHJNFFHRAD@BIFCLAL@XAcµaQe_IKQaM}U»GOKQSK¡aOA_BSFuReFsBË][[¬A@EAEHNFE\\CFCP@FDD^FDBDHBXHJBF@FEPGHINADC@Q@MHEFEPFRFDJAH@JJJAHHD@BE@EBGHAFB@FDFDELCJDNTDJALCFBNPHD@FHDB@LDF@DCHEB@F@DQCCAC@CDI@EDANAFEDG@CAGD@@@FEBEJDJ@NAH@FFXALLDHHNBJCDB@NALCHEJAHDDN@B@BJDDFRORIRGDANBD[@CBCBCN@PBDC@QIYEA@MJAD@JLNADOH@BHdAB_HABDPCLBRNLDLRRDIACBADA@CBAFGP@`[BGBGHIAOBQFOJ@B@HKPQJ@NFJ@RCDBNPJFDLBBLAJPFDFABAHQFIDAF@BHJFJHHHHLJBFFL@HJJF`DN@ROJBFEDKLGDEBKPKHIHCL@"],
        ["@@DBBAECADB@"]
      ],
      "encodeOffsets": [
        [
          [112656, 19183]
        ],
        [
          [112788, 18878]
        ]
      ]
    },
    "properties": {
      "cp": [110.037218, 18.505006],
      "name": "陵水黎族自治县",
      "childNum": 2
    }
  }, {
    "id": "469029",
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": ["@@QQCKKGACAIDSCOBA`GBAGc@APGBCKM@IDENGZFRJD@AC@ODMDADA\\@ACBMHCJQPQEQCCAIA@M@CCBGFIDGBK@MCAIDMAGGIC@KE]BOCOFIFA@EHCDBH@FCBEBMFCJ@DCD@DBRD@C@EFADG@CCE@KCAEGC@OGAMDEBKCIMSICKDCFCE@EEAGBAH@FAFA@EACEIBIIG@IBABANEJC@GHGEG@@C@QACCQMCMECDGGMGO@@CAGDECIDG@EA@EBEAKMEIAKCM@QFQ@GAA@@GJEBIJA@OS@IBE@KM@@GGE@CHMKECBEFKCAC@EC@GBCAA@IDGAIDIL@DKKE@CBCECAEACBCAAACAC@E@IEEBCDGAMNMEGISJ@DG@ABEACBEAEBICOFAH@J@FKFALCB@BOFMNANLEHHBJDH@HKJ@B@JFDBRFFCJHJJHDFCNDD@PAD@F@BAHDXAFEDOHYDEBCBATEHCCK@EBIAKFEBIFWEM@CDSJEFKDA@AACBAEAAECE@EHFJ@D@BC@CD@HKVAH@DADE@BDEFDL@PGH@DFHF@V@N@FDNNFLDNLNDALCJ@FEL@DENBJAJ@jNTIJ@FFBJPBHB@FCBGNCFBHDDBDIbEH@FJHLDDBFHFPJFBLRHHF@FC@@BH@JCJDDALCBICSG@C@IACC@GBCL@LCDI@GHCJQJADBF@BCHCBGFENIB@@FJRDBHCDBFPCJ@FBDFDBHFJ@JLALFTAJBHBFBLANGL@FBLABBBPDD@DObCLILAJGJADBJCFGFBBLJENBJNJ@HIHENDFBFFDd@LDBBLAJGHAPQFAJANDL@LDD@JGFO"],
      "encodeOffsets": [
        [112409, 19261]
      ]
    },
    "properties": {
      "cp": [109.70245, 18.636371],
      "name": "保亭黎族苗族自治县",
      "childNum": 1
    }
  }, {
    "id": "469030",
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": ["@@EAEDAA@CIDIAOIKSEO@UKIE@GEGCEGHC@CC]CGDICEA[AEBEPQRANKB@DDN@NAHCFEdmRQ`BLBLANIPENKLMHM@GAS@EHM`DHBb@BCDBBEFAAC@CFADGJ@DBHEFBRCBBBBFACGDIDCTOHOBOFGLGRBfJd@PCLILk@]HeAOAE@IEEHYHABGJGFADABGJMRCHG@AEGCKBCFEDMAAOOAEBOOOsEOB[CKKKGCOESIyWEIX[LUVSRWBKHQLMFMAIIKQQCAMCCACQFGACG@AAIKGOECC@MJI@GOKG@CBEAM_IK@GDGJOLALCFKHCLEFIAQPM@_CIEGIK@EEIAGKGGIGIEAGE@CBEJGRABEBECIOKBAACKIEIKEEYDIAGCKBMPGLA@I@EPARBPGJAHAH_\\O@EHAB@DCBABBDADIVIHMCK@MCIBEBORGBGHMBAD@PBRBLALADGHGHGDGLAJBFVTHBLAHDRR@DADeFEJGDCAIAGFMFKEKBEEOGEEE@QFOAEESLE@ICAICCQBQEIZaBCBGNANCBaLCDIR@ZGVMRCBCLIL@JBLFFKLET@BJFFFRF@NDN@RJLLHPBZGx_LBFBHFDNI^@FFHVLFHF@JAPDLJJDBBANBLHNJHX@ZS\\bCNDRAJSLADGPADHXBHHJBPDFFFBLHHDHBvCHALGTCDCFBHDNHHFNJRDP@TALABDDBBCDEL@JE@CCEA@FEF@DDD@@[BOACFKBGEGDK@ECIDCBAJJVKNBTDD@DADIH@DBHDDVHD@LCL@TLRDHBP@PMVGNHRDVMZ@VELOCIBAFEFGLABABEHABB@DBJFDNBLLRBJHJDD@PMD@HIB@HJJABDABCBKHID@HBFPDHFDHAHDDDBDABCGIBADAHAFEDGAQJAHK"],
      "encodeOffsets": [
        [112514, 19853]
      ]
    },
    "properties": {
      "cp": [109.839996, 19.00557],
      "name": "琼中黎族苗族自治县",
      "childNum": 1
    }
  }],
  "UTF8Encoding": true
}

export const HainanData: any = [
{ name: "海口市", key: "haikou", selected: true},
{ name: "三亚市", key: "sanya" },
{ name: "儋州市", key: "danzhou" },
{ name: "五指山市", key: "wuzhishan" },
{ name: "琼海市", key: "qionghai" },
{ name: "文昌市", key: "wenchang" },
{ name: "万宁市", key: "wangning" },
{ name: "东方市", key: "dongfang" },
{ name: "定安县", key: "dingan" },
{ name: "屯昌县", key: "dunchang" },
{ name: "澄迈县", key: "cengmai" },
{ name: "临高县", key: "lingao" },
{ name: "白沙黎族自治县", key: "baisha" },
{ name: "昌江黎族自治县", key: "changjiang" },
{ name: "乐东黎族自治县", key: "ledong" },
{ name: "陵水黎族自治县", key: "lingshui" },
{ name: "保亭黎族苗族自治县", key: "baoting" },
{ name: "琼中黎族苗族自治县", key: "qunzhong" },
{ name: "三沙市", key: "sansha" }
]

export const HainanIntro: any = {
  "haikou": { name: "海口市", img: "hk", detail: "别称“椰城”，是海南省省会，国务院批复确定的中国旅游度假胜地，是海南省政治、经济、科技、文化中心和最大的交通枢纽，是国家“一带一路”战略支点城市，中国（海南）自由贸易试验区（港）核心城市。" },
  "sanya": {name:"三亚市",img:"sy",detail:"别称“鹿城”。三亚是具有热带海滨风景特色的国际旅游城市，被称为“东方夏威夷”。三亚是我国对外开放黄金海岸线上最南端的对外贸易重要口岸，是中国通向世界的门户之一，是海南最美丽的旅游胜地。"},
  "danzhou": {name:"儋州市",img:"dz",detail:"地处海南西北部，濒临北部湾，是海南西部的经济、交通、通信和文化中心，海南洋浦经济开发区处于其境内。儋州市荣获“国家园林城市”、“全国城市环境综合整治优秀城市”、“中国优秀旅游城市”等称号。"},
  "wuzhishan": {name:"五指山市",img:"wzs",detail:"是海南省直辖县级市，地处海南岛中南部腹地，是海南岛中部地区的中心城市和交通枢纽，也是海南省中部少数民族的聚居地。五指山是海南岛的象征，也是中国名山之一，被国际旅游组织列为A级旅游点。"},
  "qionghai": {name:"琼海市",img:"qh",detail:"位于海南省东部沿海，旅居世界的华侨、华人及港澳台同胞55万人，素有“文化之乡”“华侨之乡”“文明之乡”美誉，是充满传奇色彩的红色娘子军故乡、博鳌亚洲论坛永久会址所在地、著名的中国温泉之乡。"},
  "wenchang": {name:"文昌市",img:"wc",detail:"古称紫贝，为海南三大历史古邑之一，南闽南文化发源地，海南文昌航天发射中心所在地，是中国第四座航天城，被全球机构推选获评为“中国特色魅力城市”，是海南重点旅游城市，誉为“阳光东海岸上的明珠”。"},
  "wangning": {name:"万宁市",img:"wn",detail:"于海南岛东南部沿海，是世界长寿之乡，享有世界冲浪胜地、中国槟榔之乡等美誉。近年来，成功举办中非合作圆桌会议、国际冲浪赛等一系列重大会议和品牌体育赛事，城市美誉度和知名度得到显著提升。"},
  "dongfang": {name:"东方市",img:"df",detail:"地处海南省西南部，历史悠久，资源富饶，基础厚实。物华天宝，奇珍异禽。酸豆青梅，沉香花梨，珍奇林木数百种。中国-东盟自由贸易区的建设，使包括东方在内的北部湾地区正形成产业发展的集聚区域。"},
  "dingan": {name:"定安县",img:"da",detail:"位于海南岛的中部偏东北，海榆东线、中线公路贯通全境，县级公路286条，“五纵五横”公路网络，四通八达，辐射全省各地，交通方便快捷，具有无以伦比的区位优势，被誉为海口的后花园。"},
  "dunchang": {name:"屯昌县",img:"tc",detail:"位于海南岛中部偏北，地处五指山北麓，南渡江南岸。早在100多年前，屯昌就形成了男女老少习武的习俗，并延续至今。2015年，屯昌被国家体育总局武术运动管理中心命名为“全国武术之乡”。"},
  "cengmai": {name:"澄迈县",img:"cm",detail:"是世界长寿之乡，世界富晒福地，中国绿色名县。澄迈县按照“一都二中心三区四基地五镇”的产业发展战略，先后获得 “中国最美休闲度假胜地”、“十大文化特色旅游名县”等七十多项国家级以上殊荣。"},
  "lingao": {name:"临高县",img:"lg",detail:"于海南岛西北部，交通便利。临高风土人情独特，被评为“中国民间艺术之乡”，渔歌“哩哩美”和人偶戏被列为我国民间艺术的瑰宝。临高发展海水养殖条件优越，海洋捕捞业发达，是全省重要的渔业生产县。"},
  "baisha": {name:"白沙黎族自治县",img:"bs",detail:"有“山的世界、水的源头、林的海洋、云的故乡”的美誉。是海南生态核心功能区，南渡江、珠碧江、石碌河三大河流的发源地，民族文化浓郁独特，双面绣等8项民族文化被列入国家或省非物质文化遗产名录。"},
  "changjiang": {name:"昌江黎族自治县",img:"cj",detail:"位于海南的西北部，依山面海。海榆西线公路、环岛高速公路、粤海铁路贯穿全境，水利、电力、通讯等基础设施完善。生态环境好，土地肥沃，发展名特优水果、反季节瓜菜等热带高效农业具有得天独厚的条件。"},
  "ledong": {name:"乐东黎族自治县",img:"ld",detail:"乐东靠山临海，历史悠久，文化源远流长。交通区位优势明显，位于莺歌海镇的国电西南部电厂配套码头水工结构按照靠泊7万吨级散货船设计，目前有停泊5万吨级煤炭泊位。"},
  "lingshui": {name:"陵水黎族自治县",img:"ls",detail:"位于海南岛的东南部，2018年获批建设国家海洋经济发展示范区。陵水具有光辉的革命斗争历史和丰富的人文和自然旅游资源。全县共有旅游景点17处，其中南湾猴岛是全国唯一的中华?猴自然保护区。"},
  "baoting": {name:"保亭黎族苗族自治县",img:"bt",detail:"位于海南省南部内陆五指山南麓，拥有丰富的旅游资源，七仙岭国家温泉森林公园是海南省著名温泉旅游胜地，仙安石林热带喀斯特石林地貌气势雄伟，保亭县的三道湾、毛拉洞水库等都极具旅游开发价值。"},
  "qunzhong": {name:"琼中黎族苗族自治县",img:"qz",detail:"县境地处海南岛中部，五指山北麓，是海南生态核心区，具有“海南之心、三江之源、森林王国、绿橙之乡、黎苗家园”的美称。2019年11月，琼中黎族苗族自治县被命名为“四好农村路”全国示范县。"},
  "sansha": {name:"三沙市",img:"ss",detail:"是中国地理位置最南、总面积最大、陆地面积最小、人口最少的县市，是第二个以群岛建置的地级行政区。未来三沙市将大力扩展旅游项目，充分发挥南海“祖国渔仓”和“海上丝绸之路”的美誉。"},
}

1. 正确引用了echarts并初始化和设置option，但是地图没有显示出来

需要给用来渲染echarts的节点设置width和height

2. 海南省有很多岛屿，导致主体部分都挤在一起，无法在正常的区域里展示

echarts提供了demo，示例：https://echarts.apache.org/v4/examples/zh/editor.html?c=map-usa

registerMap提供了参数specialAreas，可以将地图中的部分区域缩放到合适的位置，使得整个地图的显示更加好看。
但是我在项目中这么用，并不起作用。。。目前还没找到原因，所以我换了种方式——删掉了三沙市的岛屿数据，用图片替代。

3. 三沙市用图片替代带来的后果就是在与其他市切换时，需要单独写处理逻辑

点击三沙市图片，更换市区数据，并替换成高亮状态下的三沙市图片。

这个比较容易解决，在图片上绑定click事件，更新图片选中状态isSS和市区数据cityInfo。
点击三沙市图片，海南地区原高亮区域取消。

echarts官方提供了action. downplay，用于取消高亮指定的数据图形。（但我又一次失败了，可能是没能正确理解他的使用方法）

我的解决方法是通过选中状态isSS重新设置option.series，注意setOption第二个参数notMerge为true，否则无法正确更新地图数据。

echarts官方对该参数的说明文档，为了方便后期查看，直接copy过来。
notMerge: boolean
- 可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。合并的规则，详见组件合并模式。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件。
replaceMerge: string | string[]
- 可选。用户可以在这里指定一个或多个组件，如：xAxis, series，这些指定的组件会进行 "replaceMerge"。如果用户想删除部分组件，也可使用 "replaceMerge"。详见组件合并模式。
组件合并模式
- 对于一种类型的组件（如：xAxis, series）：
  - 如果设置opts.notMerge为true，那么旧的组件会被完全移除，新的组件会根据option创建。
  - 如果设置opts.notMerge为false，或者没有设置 opts.notMerge：
    - 如果在opts.replaceMerge里指定组件类型，这类组件会进行替换合并。
    - 否则，会进行普通合并。
什么是普通合并和替换合并？

普通合并
- 对于一种类型的组件（如：xAxis, series），新来的 option 中的每个“组件描述”（如：{type: 'xAxis', id: 'xx', name: 'kk', …}）会被尽量合并到已存在的组件中。剩余的情况，会在组件列表尾部创建新的组件。整体规则细节如下：
  - 先依次对 option 中每个有声明 id 或者 name 的“组件描述”，寻找能匹配其 id 或者 name 的已有的组件，找到的话则合并。
  - 再依次对 option 中剩余的“组件描述”，寻找还未执行过前一条的已有组件，找到的话则合并。
  - 其他 option 中剩余的“组件描述”，用于在组件列表尾部创建新组件。
- 特点：
  - 永远不会删除已存在的组件。也就是说，只支持增加，或者更新组件。
  - 组件的索引（componentIndex）永远不会改变。
  - 如果 id 和 name 没有在 option 中被指定（这是经常出现的情况），组件会按照它在 option 中的顺序一一合并到已有组件中。这种设定比较符合直觉。
替换合并
- 对于一种类型的组件（如：xAxis, series），只有 option 中指定了 id 并且已有组件中有此 id 时，已有组件会和 option 相应组件描述进行合并。否则，已有组件都会删除，新组件会被根据 option 创建。细节规则如下：
  - 先依次对 option 中每个有声明 id 的“组件描述”，寻找能匹配其 id 或者 name 的已有的组件，找到的话则合并。
  - 删除其他没匹配到的已有组件。
  - 依次对 option 中剩余的“组件描述”，创建新组件，填入刚因删除而空出来的位置上，或者增加到末尾。
- 特点：
  - 与普通合并相比，支持了组件删除。
  - 已有组件的索引永远不会变。这是为了保证，option 或者 API 中的 index 引用（例如：xAxisIndex: 2）仍能正常一致得使用。
  - 整个处理过程结束后，可能存在一些“洞”，也就是说，在组件列表中的某些 index 上，并没有组件存在（被删除了）。但是这是可以被开发者预期和控制的。
删除组件

有两种方法能删除组件：
- 删除所有：使用 notMerge: true，则所有组件都被删除。
- 删除部分：使用 replaceMerge: […]，被指定的组件类型，会根据 replaceMerge 的规则：如果 id 匹配就合并（ merge ），否则旧组件被删除，新组件被创建。“部分删除” 有助于，在删除该删除的组件时，保留其他组件的状态（如高亮、动画、选中状态）。
普通合并例子：
```
// 已有组件：
{
   xAxis: [
       { id: 'm', interval: 5 },
       { id: 'n', name: 'nnn', interval: 6 }
       { id: 'q', interval: 7 }
   ]
}
// 新来的 option ：
chart.setOption({
   xAxis: [
       // id 没有指定。会寻找到第一个没有进行过合并的已有组件，进行合并。
       // 即合并到 `id: 'q'`。
       { interval: 77 },
       // id 没有指定。最终会创建新组件。
       { interval: 88 },
       // id 没有指定，但是 name 指定了。会被合并到已有的 `name: 'nnn'` 组件。
       { name: 'nnn', interval: 66 },
       // id 指定了，会被合并到已有的 `id: 'm'` 组件。
       { id: 'm', interval: 55 }
   ]
});
// 结果组件：
{
   xAxis: [
       { id: 'm', interval: 55 },
       { id: 'n', name: 'nnn', interval: 66 },
       { id: 'q', interval: 77 },
       { interval: 88 }
   ]
}
```
替换合并例子：
```
// 已有组件：
{
    xAxis: [
        { id: 'm', interval: 5, min: 1000 },
        { id: 'n', name: 'nnn', interval: 6, min: 1000 }
        { id: 'q', interval: 7, min: 1000 }
    ]
}
// 新来的 option :
chart.setOption({
    xAxis: [
        { interval: 111 },
        // id 已经指定了。因此会被合并进已有的组件 `id: 'q'`。
        { id: 'q', interval: 77 },
        // id 已经指定了。但是已有组件没有此 id 。
        { id: 't', interval: 222 },
        { interval: 333 }
    ]
}, { replaceMerge: 'xAxis' });
// 结果组件：
{
    xAxis: [
        // 原来的 id 为 'm' 的组件，被移除。
        // 替换为新的组件。新组件中，并没有原来的 `min: 1000` 了。
        { interval: 111 },
        // 原来的 id 为 'n' 的组件，被移除。
        // 替换为新的组件。新组件中，并没有原来的 `min: 1000` 了。
        { id: 't', interval: 222 },
        // 原来的组件没有被移除，而是和 option 中的组件描述进行了合并。
        // 所以 `min: 1000` 被保留了。
        { id: 'q', interval: 77, min: 1000 },
        // 新添加的组件。
        { interval: 333 }
    ]
}
```