一直好奇为什么百度几乎看不到,使用antd封装的charts做的地图下钻,后来发现可能是太简单了大家都不屑写,那我写,我是小白啥也不懂
地图组件:
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { AreaMap } from '@ant-design/maps';
import styles from '../../../../public.less';
import { Button, Radio } from 'antd';
const GovMap = () => {
const [data, setData] = useState({ type: 'FeatureCollection', features: [] });
const [province, setProvince] = useState("");
const [district, setDistrict] = useState("");
const [parentCode, setParentCode] = useState("");
useEffect(() => {
// 加meta标签解决跳转第三方接口报错403,referrer请求头问题
const addMeta = () => {
//在head标签插入meta标签,解决在生产环境链接失效问题
const metaTag = document.getElementsByTagName('meta');
let isHasTag = true;
for (let i = 0; i < metaTag.length; i++) { //避免重复插入meta标签
const httpEquiv = metaTag[i].httpEquiv;
if (httpEquiv == 'Content-Security-Policy') {
isHasTag = false;
}
}
if (isHasTag) {
const headItem = document.head;
let oMeta = document.createElement('meta');
oMeta.setAttribute('name','referrer');
oMeta.setAttribute('content','never');
headItem.appendChild(oMeta);
}
}
addMeta();
fetch("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json", {
method: "GET",
}).then(res => res.json()).then(json => {
setData(json);
console.log("地区json", json);
});
}, []);
const color = ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'];
const config = {
map: {
type: 'mapbox',
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
},
source: {
data: data,
// joinBy: {
// sourceField: 'regionCode',
// geoField: 'regionCode',
// },
parser: {
type: 'geojson',
},
},
// viewLevel: {
// level: 'country',
// adcode: 100000,
// granularity: 'city',
// },
autoFit: true,
color: {
// 元素映射关联的字段
field: 'childrenNum',
value: color,
scale: {
type: 'quantize',
},
},
style: {
opacity: 1,
stroke: '#ccc',
lineWidth: 0.6,
lineOpacity: 1,
},
label: {
visible: true,
field: 'name',
style: {
fill: '#000',
opacity: 0.8,
fontSize: 10,
stroke: '#fff',
strokeWidth: 1.5,
textAllowOverlap: false,
padding: [5, 5],
},
},
state: {
active: {
stroke: 'black',
lineWidth: 1,
},
},
// 悬浮在地图上的数据
// tooltip: false,
// tooltip: {
// items: ['name', 'size'],
// },
zoom: false,
// 左下角小列表
legend: false,
};
const onInto = (chart) => {
chart.on('areaLayer:click', (params) => {
const { feature = {} } = params;
const { properties = {} } = feature;
const { name, level, parent = {} } = properties;
setParentCode(parent.adcode);
level == 'province' && setProvince(params.feature.properties.name);
level == 'city' && setDistrict(params.feature.properties.name);
const id = params.feature.properties.adcode;
fetch(`https://geo.datav.aliyun.com/areas_v3/bound/${id}_full.json`, {
method: "GET",
headers: {
referer: 'never'
}
}).then(res => res.json()).then(json => {
setData(json);
console.log("地区json", json);
});
});
chart.on('areaLayer:mousemove', (params) => {
// console.log("鼠标滑动",params);
})
}
const onChina = () => {
fetch("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json", {
method: "GET",
}).then(res => res.json()).then(json => {
setData(json);
setProvince("");
setDistrict("");
console.log("地区json", json);
});
}
const onProvince = () => {
if (district !== "") {
parentCode && fetch(` https://geo.datav.aliyun.com/areas_v3/bound/${parentCode}_full.json`, {
method: "GET",
}).then(res => res.json()).then(json => {
setData(json);
setDistrict("");
console.log("地区json", json);
});
}
}
return (
<>
<div className={styles['govmap-map-wrapper']}>
<div className={styles['govmap-map-area']}>
{/* <div><Button>全国</Button></div> */}
<div><Radio checked='true' onClick={onChina}>全国</Radio></div>
<div>{province && <Radio checked='true' onClick={onProvince}>{province}</Radio>}</div>
<div>{district && <Radio checked='true'>{district}</Radio>}</div>
</div>
<div className={styles['govmap-map-map']}>
<AreaMap {...config} onReady={onInto} />
</div>
</div>
</>
);
};
export default GovMap;
我在里面加了一段其他大佬写的增加meta标签的代码,主要原因是部署到服务器时显示403,也就是说产生跨域问题了,因为这个接口是第三方接口,请求时会产生一个referrer的请求头,所以直接403获取不到,加个meta标签就可以解决,地图下钻就是这么简单