echartsmap地图在react项⽬中的使⽤需求
展⽰海南省地图，点击市⾼亮展⽰，并在右侧展⽰对应市的相关数据。
准备⼯作
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);
myChart &&
myChart.setOption({
title: {
show: false,
},
tooltip: {
show: false,
trigger: "item",
},
toolbox: {
show: false,
},
visualMap: {
show: false,
},
});
// 点击地图上市，进⾏⾼亮区域和相应数据切换
<("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: {
// 设置选中市区的颜⾊和边框
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;
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;
pany-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\\D C|K|Q¤kfGL@PD F AHGFMFENEJGNODK@OCE@AFAHEXGJEL@BEFAD@BC@MFGD@DAL_CKAEN@D@BBNKF@BEFEDGFCFICMAEJGDUBGAEKIAEHQJAXFN@DC      "encodeOffsets": [
[112750, 20508]
]
},
"properties": {
"cp": [110.43119, 19.900071],
"name": "海⼝市",
"childNum": 1
}
}, {
"id": "460200",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@F DFFAF@DZRRD@B@LLTFDFFABJDLALPRDHADBHHLBJABCD@RdD@XM
HDJHDBFFLDDLRE@ABCDDBABFRDREBDF@DDLDDADEJAFCFKDCTCVL@BEFBDJBBHFFAHBVCPCDEBAF@JCJBPBFDBDH@HB      "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@HCHFLADE        ["@@MEGBID@FDHRJNBP@dEjIHGBCACICGIC@KBCBI@]JCBAFM@GA"]
[
[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@      "encodeOffsets": [
[112153, 19488]
]
},
"properties": {
"cp": [109.516662, 18.776921],
"name": "五指⼭市",
"childNum": 1
}
}, {
"id": "469002",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@o·}W yo c G cQÉF UBKFCHANC@CBIEE@GFSWIQKEE@GFQTOJQ@OKHaKOOKaAQGMGOG[S[KmMWCACC@@EBCAGBGAAACE@@CCAIAM@IEE@EAA@CHC@CCG@CKII[MMDQASIYEIHMTAFADADILECG      "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@NAD        ["@@@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@sH A[AEGCOAŁcI@KBQTY@W sW]Q d WBK@KBEDAJC@QBEGMEGIKCEFIJEBOZCBKAG@CBYVGNEB]@KCC@IFGHGNARMJI^@HEV@RDJBFEX@HDL@N`JBNAF@D      "encodeOffsets": [
[113266, 19543]
]
},
"properties": {
"cp": [110.388793, 18.796216],
"name": "万宁市",
"childNum": 1
}
"coordinates": ["@@BEE[SESBQEMOKGGIACAmAEKKSBSACCAECAKDM@KDMBKFGEQAECKOAEIKIDQBC@CEEAKBOHQCEBYBwOUIIGSKQQmQ_YccM@]DKAKKGFILOPKDOG{@ICUM G CTI\\ejqrapI^A^@TDTL^pp\\ZDFHTMäA      "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@      "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}GIDODG      "encodeOffsets": [
[112781, 20030]
]
},
"properties": {
"cp": [110.032773, 19.362916],
"name": "屯昌县",
"childNum": 1
}
react tooptip组件
}, {
"id": "469023",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@nwLIAGAMLAJKHBPCDBBDDAB@BGBICEDKGACA@EDGAAAAKYBEFAHADDHE@AKBEA@CJCBIA@CHIFADCBBEAAEAACG@ADCBA@CG@IFINKJ@FG@CMEECEIBELCHGAU@CDE@EQBGCE@@ABIDC      "encodeOffsets": [
[112750, 20508]
]
},
"properties": {
"cp": [110.007147, 19.737095],
"name": "澄迈县",
"childNum": 1
}
}, {
"id": "469024",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@X|V L R~p^\\NJND P^@^NTRJDNDP@TCN@dHL@NCTK^cZUNCXAPBLDZRNFNDR@LALG\\Kd£JQZEAK@]GUKMEAADGB@DCDGACBERKOIBKALOBGCEEAGIRCPQHANBDADIJ@LCA[EAKACI@EVEDK@CICEE      "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@DCBC      "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@IDGAMCKDEBGDEAIDCB      "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@IBEFADCDOAU      "encodeOffsets": [
[112031, 19071]
]
},
"properties": {
"cp": [109.105444, 18.64758],
"name": "乐东黎族⾃治县",
"childNum": 1
}
}, {
"id": "469028",
"type": "Feature",

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。