antd charts实现地图下钻

一直好奇为什么百度几乎看不到，使用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标签就可以解决，地图下钻就是这么简单

antd charts实现地图下钻相关推荐

echarts地图下钻与回钻
最近在项目实际业务中为了更清晰的展示各省市的数据,使用echarts实现了地图的下钻和回钻.里面加了实际业务,所以代码有些冗余. import * as echarts from 'echarts' ...
vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
vue-echarts-v3——浙江省地图下钻（eg:浙江省-嘉兴市-嘉善县）
vue-echarts-v3和echarts的地图下钻配置项其实是一样的,本身就vue-echarts-v3而言,它只是echarts在vue的使用中,打包成了一个组件. 浙江省地图下钻需要geoJs ...
D3.js中国地图下钻
使用d3.js实现中国地图及中国地图下钻到省市区在可视化开发中,地图是很重要的一个环节,很多时候需要展现的不仅是国家地图,还需要能从国家进入到省市,看到区这样的下钻过程,今天我们就来实现这个效果. ...
echarts省市区id（区域编码）实现地图下钻点击（data赋值自定义属性值，geojson信息获取）
致新的一年:不知不觉已经是2023年,祝新的一年大展宏图(兔),前途(兔)似锦,今年梦想实现! 正文: 接触echarts也有很长一段时间了,最近有个很常见的需求,实现省市区下钻,高亮一些有数据的区域 ...
5分钟使用Echarts轻松实现地图下钻
在数据可视化中,地图是很重要的一个环节,很多时候需要展现的不仅是国家地图,还需要能从国家进入到省市.这个逐级进入的过程就是我们今天说的地图下钻. 地图下钻看起来很屌.很高大上,但是仔细琢磨一下,技术实 ...
Echarts实现省级到市级地图下钻
在echarts社区里copy项目时,有符合需求的地图但是没有地图下钻,没办法看了看有地图下钻的项目想了一个比较简单的思路. (这里不再赘述如何创建基本地图实例) 1.首先把对应城市的下级地区geoJ ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
Echarts制作态势图、热点图、轨迹图，使用百度底图，地图下钻
记录最近使用echarts制作地图的过程及部分代码: 其中在网络上借鉴了不少优秀的源码,在此感谢他们的开源精神. 先看效果: (一)态势图.热点图.轨迹图及全屏功能全屏效果: (二)改普通地图为百度 ...

antd charts实现地图下钻

antd charts实现地图下钻相关推荐

最新文章

热门文章