Echarts 地图开发中需要实现地图阴影；

下图是一个失败的demo,真正需要的是为整个地图添加边框阴影而不是为每个区域添加

1.最简单的实现方法，用geo实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>地图样式</title><script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script><script src="../echarts.min.js"></script><style>*{padding: 0;margin: 0;}.container{width: 100%;height: 100vh;background: #000036;}#map_container{width: 100%;height: 100%;}</style>
</head>
<body>
<div class="container"><div id="map_container"></div>
</div>
<script>/** GEO实现阴影与边框*/$(function () {var data_obj = {'1000000': {'map_data_all': [{id: "110000", value: 2395274, name: "\u5317\u4eac\u5e02", "level": "1"}, {id: "120000",value: 1087242,name: "\u5929\u6d25\u5e02","level": "1"}, {id: "130000", value: 2405260, name: "\u6cb3\u5317\u7701", "level": "1"}, {id: "140000",value: 1160702,name: "\u5c71\u897f\u7701","level": "1"}, {id: "150000", value: 836075, name: "\u5185\u8499\u53e4\u81ea\u6cbb\u533a", "level": "1"}, {id: "210000",value: 2158982,name: "\u8fbd\u5b81\u7701","level": "1"}, {id: "220000", value: 995060, name: "\u5409\u6797\u7701", "level": "1"}, {id: "230000",value: 982917,name: "\u9ed1\u9f99\u6c5f\u7701","level": "1"}, {id: "310000", value: 3783735, name: "\u4e0a\u6d77\u5e02", "level": "1"}, {id: "320000",value: 6089455,name: "\u6c5f\u82cf\u7701","level": "1"}, {id: "330000", value: 4289162, name: "\u6d59\u6c5f\u7701", "level": "1"}, {id: "340000",value: 2145624,name: "\u5b89\u5fbd\u7701","level": "1"}, {id: "350000", value: 2007123, name: "\u798f\u5efa\u7701", "level": "1"}, {id: "360000",value: 1330358,name: "\u6c5f\u897f\u7701","level": "1"}, {id: "370000", value: 4959744, name: "\u5c71\u4e1c\u7701", "level": "1"}, {id: "410000",value: 2780641,name: "\u6cb3\u5357\u7701","level": "1"}, {id: "420000", value: 2237163, name: "\u6e56\u5317\u7701", "level": "1"}, {id: "430000",value: 1664850,name: "\u6e56\u5357\u7701","level": "1"}, {id: "440000", value: 7836737, name: "\u5e7f\u4e1c\u7701", "level": "1"}, {id: "450000",value: 1344085,name: "\u5e7f\u897f\u58ee\u65cf\u81ea\u6cbb\u533a","level": "1"}, {id: "460000", value: 522202, name: "\u6d77\u5357\u7701", "level": "1"}, {id: "500000", value: 1396810, name: "\u91cd\u5e86\u5e02", "level": "1"}, {id: "510000",value: 2740271,name: "\u56db\u5ddd\u7701","level": "1"}, {id: "520000", value: 1040494, name: "\u8d35\u5dde\u7701", "level": "1"}, {id: "530000",value: 1215803,name: "\u4e91\u5357\u7701","level": "1"}, {id: "540000", value: 99404, name: "\u897f\u85cf\u81ea\u6cbb\u533a", "level": "1"}, {id: "610000",value: 1504225,name: "\u9655\u897f\u7701","level": "1"}, {id: "620000", value: 786220, name: "\u7518\u8083\u7701", "level": "1"}, {id: "630000", value: 180966, name: "\u9752\u6d77\u7701", "level": "1"}, {id: "640000",value: 298887,name: "\u5b81\u590f\u56de\u65cf\u81ea\u6cbb\u533a","level": "1"}, {id: "650000", value: 760534, name: "\u65b0\u7586\u7ef4\u543e\u5c14\u81ea\u6cbb\u533a", "level": "1"}, {id: "710000",value: 0,name: "\u53f0\u6e7e\u7701","level": "1"}, {id: "810000", value: 0, name: "\u9999\u6e2f\u7279\u522b\u884c\u653f\u533a", "level": "1"}, {id: "820000",value: 0,name: "\u6fb3\u95e8\u7279\u522b\u884c\u653f\u533a","level": "1"}],},'110000': {'map_data_all': [{name: "朝阳区", value: 498208, id: 220104},{name: "海淀区", value: 395226, id: 110108},{name: "丰台区", value: 234487, id: 110106},{name: "通州区", value: 114415, id: 320612},{name: "昌平区", value: 105656, id: 110114},{name: "东城区", value: 103707, id: 110101},{name: "西城区", value: 101420, id: 110102},{name: "大兴区", value: 85330, id: 110115},{name: "房山区", value: 68722, id: 110111},{name: "怀柔区", value: 63215, id: 110116},{name: "顺义区", value: 59300, id: 110113},{name: "密云区", value: 55098, id: 110228},{name: "平谷区", value: 50744, id: 110117},{name: "石景山区", value: 50115, id: 110107},{name: "门头沟区", value: 36631, id: 110109},{name: "延庆区", value: 17687, id: 110229}],}};// 四分位function count(data) {var data = data.slice(0);var markData = data.sort(function (a, b) {return a - b;}),n = markData.length;var index3,//较小四分位数//中位数（二分位）Q3 = 0;  //较大四分位数var num3 = (3 * n + 1) / 4,index3 = parseInt(num3);if (n >= 2) {//公式：a[3]+(a[4]-a[3])*小数位Q3 = parseFloat(markData[index3 - 1]) + parseFloat((markData[index3] - markData[index3 - 1]) * (num3 - index3));} else if (n == 1) {Q3 = parseFloat(markData[0]);}console.log(Q3)return {Q3: Q3.toFixed(2),max: n == 0 ? 0 : markData[n - 1]}}var my_charts = echarts.init(document.getElementById('map_container'));function drow_map(maptype,data){$.getJSON('./ChinaJson/'+maptype+'.js', function (geoJson) {var mapdata3 = [];for (var key in data[maptype].map_data_all) {var onedata = data[maptype].map_data_all[key];var val = onedata['value'];if (!val) {val = ""} else {// val=val.replace(/^[1-9]\d*/i,'')}mapdata3.push(val);}my_charts.hideLoading();echarts.registerMap(maptype, geoJson);my_charts.setOption(option = {title: {subtext: '全国企业分布',},tooltip: {trigger: 'item',formatter: function (params) {console.log(params)if ($.isArray(params.value)) {// return ''return params.name + ' : ' + params.value[params.value.length-1];//鼠标放上去显示value} else {return params.name + ' : ' + params.value;//鼠标放上去显示value}},textStyle: {color: '#fff'}},visualMap: {min: 0,max: parseFloat(count(mapdata3).Q3),text: ['高', '低'],realtime: false,calculable: true,inRange: {// color: ['#0098EB', 'rgba(6,61,235,1)', '#0000AC'],color: ['#16edff', '#a665f9', '#6865f9'],},textStyle: {color: '#fff'}},geo: {map: maptype,itemStyle: {normal: {borderColor: '#9757cf',borderWidth: 6,shadowColor: '#4a088b',shadowOffsetX: '15',shadowOffsetY: '30',color: {type: 'linear-gradient',x: 0,y: 30,x2: 7,y2: 0,colorStops: [{offset: 0,color: '#4a088b' // 0% 处的颜色}, {offset: 1,color: '#6908bf' // 50% 处的颜色}],global: true // 缺省为 false},},emphasis: {areaColor: '#070F4F'}},zlevel: 2},series: [{type: 'map',map: maptype,tooltip: {show: false},label: {normal: {show: false,textStyle: {color: '#fff',fontSize: 14,textBorderWidth: 1,textBorderColor: '#000000',textShadowColor: '#000',textShadowBlur: 2,}},emphasis: {show: false,textStyle: {color: '#fff',fontSize: 14,textBorderWidth: 1,textShadowColor: '#2732ff',textShadowBlur: false,}}},roam: true,itemStyle: {normal: {borderColor: '#D2FFFF',borderWidth: 1.5,},emphasis: {areaColor: 'rgb(111,81,248)'}},zlevel: 4,data: data[maptype].map_data_all}]});});}drow_map('1000000', data_obj)});</script>
</body>
</html>

实现效果：

下图就是上图的分解

2.我想要实现的最终效果是可以加阴影加边框，还能下钻三级（直接用geo就有点难了）

下面是加阴影后的一个效果图

将全国所有地区合并，就是一个图了，可以任意叠加地图，为每个地图添加边框阴影

最终实现类似这样的效果

Echarts全国地图区域合并------去掉海南子区域及南海诸岛相关推荐

Echarts 南海诸岛简图显示位置调整
最近需要echart同时显示海南岛和南海诸岛,开始想寻找南海诸岛的数据,经过查找,这种简图数据是没有的(china.js地图数据一一找过了),下图是echarts的一些示例,没有满足我们的要求 ...
关于echarts中，南海诸岛不显示的问题
最近vue项目需求,需要制作一个大区的中国地图,在使用 node_modules\echarts\lib\coord\geo\fix\nanhai.js 在判断中加入自己地图的名字就行. if (ma ...
echarts全国地图资源，省份名称居中
echarts 全国地图资源 echarts全国地图资源全国地图山东黑龙江吉林辽宁北京天津河北河南山西陕西内蒙古安徽江苏上海浙江福建台湾广东香港澳门广西江 ...
Layuiadmin+Echarts全国地图数据分布
Layuiadmin+Echarts全国地图数据分布 *样式要引用layui的css js Html代码 <div class="layui-col-sm8">< ...
echarts全国地图只显示南海诸岛问题
在使用百度开源的可视化工具echarts时,用到中国地图,参照官方文档用此段代码 value = [155, 10, 66, 78, 33, 80, 190, 53, 49.6]attr = [&qu ...
vue中引用echarts全国地图
<template><div><div ref="mapInfo" style="width:750px; height: 540px&qu ...
echarts 中国地图点击进入相应省份海南省里的南海诸岛换成诸岛简图
DataV.GeoAtlas地理小工具系列在这里下载了中国以及各省的json文件,但是下面海南那块国家海岸线里有很多岛我不想要,明明已经有个南海诸岛的框了,在那占位置不好看,这时就要改变下Chin ...
echarts 中国地图(带南海诸岛) 及各省份地图json文件
各省份.区域的地图json文件可以去 http://datav.aliyun.com/tools/atlas 找,能下载. 中国地图(带南海诸岛) 上代码 <template><di ...
Echarts 地图隐藏右下角 “南海诸岛” 的方法
1.需求: Echarts 地图右下角 "南海诸岛" 在项目中有点多余,需要隐藏 2.查询 Echarts 官网配置项,发现修改属性 "geo.regions" ...

Echarts全国地图区域合并------去掉海南子区域及南海诸岛

Echarts 地图开发中需要实现地图阴影；

Echarts全国地图区域合并------去掉海南子区域及南海诸岛相关推荐

最新文章

热门文章