echart 实现可以点击下钻的地图

codescanbox
封装成了一个类, 通过 getLoadMap 来获取对应的实例对象, 一个是单纯的地图, 一个是可以打点的地图;
getLoadMap 需要 3 个参数, echarts 实例, registerMap 注册地图的api, type 类型参数

var points = [{ value: [113.58,34.77], itemStyle: { color: '#c1bb1f' } },{ value: [113.89,34.06], itemStyle: { color: '#c1bb1f' } },]class BaseMap {constructor(echarts, registerMap) {this.echarts = echarts;this.registerMap = registerMap;}// 获取对应的json地图数据，然后向echarts注册该区域的地图，最后加载地图信息getMapJson(url) {return new Promise((resolve, reject) => {fetch(url, {mode: 'cors'}).then(response => response.json()).then(data => {if (data) {resolve(data)} else {reject('无法加载该地图');}}).catch(error => console.error(error));})}init(url, mapName, data) {this.getMapJson(url).then(json => {this.registerMap(mapName, json);this.echarts.setOption(this.getOption(data, mapName));})}getOption() {throw new Error('请在子类中重写该方法');}}class LoadMap extends BaseMap {constructor(echarts, registerMap) {super(echarts, registerMap);}// 获取 optiongetOption(data, name) {return {tooltip: {show: true,},visualMap: {type: 'continuous',text: ['', ''],showLabel: true,left: 0,right: 0,min: 0,max: 100,inRange: {color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096',]},splitNumber: 0},geo: {map: name,zoom: 1.1, //当前视角的缩放比例aspectScale: 0.86,layoutCenter: ["50%", "50%"], //地图位置layoutSize: '100%',itemStyle: {shadowColor: 'rgba(0,243,255,0.6)',shadowOffsetX: 0,shadowOffsetY: 15,opacity: 1,shadowBlur: 15,},emphasis: {areaColor: 'rgba(0,243,255,1)',},regions: [{name: '南海诸岛',itemStyle: {areaColor: 'rgb(0,243,255)',borderColor: 'rgb(0,243,255)',opacity: 0,label: {show: false,color: "#009cc9",}},label: {show: false,color: '#FFFFFF',fontSize: 12,},}],},series: [{type: 'map',mapType: name,aspectScale: 0.86,zoom: 1.1,layoutCenter: ["50%", "50%"], //地图位置layoutSize: '100%',// scaleLimit: { //滚轮缩放的极限控制//   min: 1,//   max: 2// },itemStyle: {areaColor: 'rgb(10,60,83)',borderColor: 'rgba(0,243,255,0.4)',borderWidth: 2,label: {show: true,}},label: {show: true,color: "#fff"},emphasis: {itemStyle: {areaColor: 'rgb(10,60,83)',}},data: data,}]}}
}class LoadScaMap extends BaseMap {constructor(echarts, registerMap) {super(echarts, registerMap);}// 获取 optiongetOption(data, name) {return {tooltip: {show: true,formatter: function (params) {if (params.data) return params.name + '：' + params.data['value']},},grid: {left: 0,right: 0,},visualMap: {type: 'continuous',text: ['', ''],showLabel: true,left: 0,right: 0,min: 0,max: 100,inRange: {color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096',]},splitNumber: 0},geo: {map: name,zoom: 1.1, //当前视角的缩放比例aspectScale: 0.86,layoutCenter: ["50%", "50%"], //地图位置layoutSize: '100%',itemStyle: {shadowColor: 'rgba(0,243,255,0.6)',shadowOffsetX: 0,shadowOffsetY: 15,opacity: 1,shadowBlur: 15,},emphasis: {areaColor: 'rgba(0,243,255,1)',},regions: [{name: '南海诸岛',itemStyle: {areaColor: 'rgb(0,243,255)',borderColor: 'rgb(0,243,255)',opacity: 0,label: {show: false,color: "#009cc9",}},label: {show: false,color: '#FFFFFF',fontSize: 12,},}],},series: [{type: 'map',mapType: name,aspectScale: 0.86,zoom: 1.1,layoutCenter: ["50%", "50%"], //地图位置layoutSize: '100%',// scaleLimit: { //滚轮缩放的极限控制//   min: 1,//   max: 2// },itemStyle: {areaColor: 'rgb(10,60,83)',borderColor: 'rgba(0,243,255,0.4)',borderWidth: 2,label: {show: true,}},label: {show: true,color: "#fff"},emphasis: {itemStyle: {areaColor: 'rgb(10,60,83)',}},data: data,},{type: 'effectScatter',coordinateSystem: 'geo',showEffectOn: 'render',zlevel: 1,rippleEffect: {period: 15,scale: 4,brushType: 'fill'},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'right',offset: [15, 0],color: '#1DE9B6',show: true},},itemStyle: {normal: {color: '#1DE9B6',shadowBlur: 10,shadowColor: '#333'}},symbolSize: 12,data: points},]}}}export default function getLoadMap(echarts, registerMap, type = 'normal') {if (type === 'normal') {return new LoadMap(echarts, registerMap)}return new LoadScaMap(echarts, registerMap)
}export const getUrl = (code) => {return `https://big-data-bucket.obs.cn-north-4.myhuaweicloud.com/Regional%20coordinates/${code}_full.json?AccessKeyId=CTUCZIKR90RF73BVW7OY&Expires=1688788032&x-obs-security-token=gQpjbi1ub3J0aC00iJgccHrJbj6wG82ls8veEGCvYKTFc3kDa1if8fWheSmfWdHcZjo7VoJ3X_rHhz3TLX2MR0MGVXvO4ebWYHO-GRZYT5aR6_gvm-7pcqIcf52r45yi7JYLBG9-b03xRgivf2MaPs21NwQX2ktpUnKAsqFDOYm0KE3cYQN_PAMYDrhdBthKlRGh7kYU7FfRH7T-PJsnWXIKTvqjzdn-u7dpT2nLHqUcMzZ0-9TsO9UxCI9gRebTMSw03HtDSZRGkDymzScbJ2vCJcuBa2nv3FMX0qiiEXt0AySKdL_bK46hPMacRKvOQ2Dvt2eQjTBlGLBeXcaKs_HO6_DBYNrHdO24XzTBDRa7U0B-yH2L6xNzK6cOvMP2NG9F4YwICgOGBO8ECV7iqg2I2LG5GH2M7sQFEjUf3xB0CXHHkDm4zmwDrTAQmEQ-NHI5sNlj12qmgkLqebG_q4aHRm2xQp6LkqLy1-cLXnDdOa6BECZayRINlrM3c5GkzOZ2_B44YyE8ftfB0mm8A_n9Xs5OFO1JyV3jRTko-JC8phXuM1Pu1hQ-1qqYlzBIp320zNL8OKhSskk2eNQfe_HhX-SHUR-eyOcAx2UJk_4CtGddC6oef1zpdFqNQgxfwfZood3O6BRHWa5-7MEqLBnL1UVAqy_0bHp30ZOvK3Lf6Lru9IjYC5QPQ9_LLAP5QB--pOR7tHfnAKVRM9EYgTHubXxGjxOUD4zwcizNR6eQxGjsm7EBbeePIwrPC1-hq6VcsmbTkESbFsS5-PL_hcCksS8NO57Z0WfME7xm-d5Oy0GgnxTY37QgyAUKup2vgxRopmxjRU-HTGoxvD9GNcsI9oEzKX_iAdyK3P0%3D&Signature=1GOsLjgpa7QLk/u4VbJf9d4kqoQ%3D`
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！