中国地图3D立体效果

具体思路：
geo叠加3层，zlevel是重叠的优先级

<template><div class="map"><div class="charts" ref="chartsBox"></div><div class="e-label"><p class="e-label-title">项目图例</p><p>区域公司<img src="../../../assets/index/project.png" alt=""></p><p>光伏产业<img src="../../../assets/overview/sun.png" alt=""></p></div></div>
</template>

<script>
import resize from '@/components/mixins/resize'
import '../../../../node_modules/echarts/map/js/china.js'
import { getMapData } from '@/api/overview.js'
export default {mixins: [resize],props: {search: Object},watch: {search: {deep: true,handler() {this.initData()}}},data() {return {back: false,chart: null,pinRegois: {'台湾': 'taiwan','黑龙江': 'heilongjiang','内蒙古': 'neimenggu',"吉林": 'jilin','北京': 'beijing',"辽宁": 'liaoning',"河北": 'hebei',"天津": 'tianjin',"山西": 'shanxi',"陕西": 'shanxi1',"甘肃": 'gansu',"宁夏": 'ningxia',"青海": 'qinghai',"新疆": 'xinjiang',"西藏": 'xizang',"四川": 'sichuan',"重庆": 'chongqing',"山东": 'shandong',"河南": 'henan',"江苏": 'jiangsu',"安徽": 'anhui',"湖北": 'hubei',"浙江": 'zhejiang',"福建": 'fujian',"江西": 'jiangxi',"湖南": 'hunan',"贵州": 'guizhou',"云南": 'yunnan',"广东": 'guangdong',"广西": 'guangxi',"海南": 'hainan','上海': 'shanghai','香港': 'xianggang','澳门': 'aomen','南海诸岛': 'nanhai'},mapIcon: {area: 'path://M185.37,75.51A8.07,8.07,0,0,0,178.84,70l-50.19-7.29L106.2,17.22a8.09,8.09,0,0,0-14.51,0L69.24,62.71,19,70a8.09,8.09,0,0,0-4.48,13.8l36.32,35.41-8.57,50a8.08,8.08,0,0,0,11.74,8.53L99,154.12l44.89,23.61a8.09,8.09,0,0,0,11.74-8.53l-8.57-50L183.33,83.8A8.07,8.07,0,0,0,185.37,75.51Z',province: 'path://M90.831,232.96l.02,1.782H93.5l-.275-1.782Zm5.845,1.782-.58-1.782H93.7l.334,1.782Zm.884,2.709-.747-2.288H94.1l.422,2.288Zm-3.075,3.636L94,238.005H90.9l.039,3.083Zm-.56-3.636-.363-2.288h-2.7l.029,2.288Zm-6.778-2.709.324-1.782h-2.1l-.285.012-.108.3-.481,1.469Zm3.2-1.782h-2.4l-.275,1.782H90.32Zm-.029,2.2H87.609l-.354,2.288h3.026Zm-.039,2.842H87.167l-.481,3.083h3.546Zm-3.212-2.842H84.357l-.737,2.288h3.026Zm-4.637,5.924h3.546l.57-3.083H83.434Zm16.307,0-1-3.083h-3.1l.56,3.083Zm-6.307,7.646H88.867l.639-7.646h2.289Z',plates: 'path://M90.831,232.96l.02,1.782H93.5l-.275-1.782Zm5.845,1.782-.58-1.782H93.7l.334,1.782Zm.884,2.709-.747-2.288H94.1l.422,2.288Zm-3.075,3.636L94,238.005H90.9l.039,3.083Zm-.56-3.636-.363-2.288h-2.7l.029,2.288Zm-6.778-2.709.324-1.782h-2.1l-.285.012-.108.3-.481,1.469Zm3.2-1.782h-2.4l-.275,1.782H90.32Zm-.029,2.2H87.609l-.354,2.288h3.026Zm-.039,2.842H87.167l-.481,3.083h3.546Zm-3.212-2.842H84.357l-.737,2.288h3.026Zm-4.637,5.924h3.546l.57-3.083H83.434Zm16.307,0-1-3.083h-3.1l.56,3.083Zm-6.307,7.646H88.867l.639-7.646h2.289Z',},iconColor: {area: ["#ffea00", '区域公司'],province: ["#01F3F7", '光伏产业'],plates: ["#01F3F7", '光伏产业']},mapJson: null,provinceCode: 'china'}},mounted() {this.initData()},methods: {initData() {getMapData(this.search).then(res => {if (res.code == 200) {this.mapData = res.data;if (this.search.province == '') {this.provinceCode = 'china'}this.initChart();}})},initChart() {this.mapJson = this.provinceCode == 'china' ? require(`../../../../node_modules/echarts/map/json/china.json`) : require(`../../../../node_modules/echarts/map/json/province/${this.provinceCode}.json`);this.chart = this.$echarts.init(this.$refs.chartsBox);this.$echarts.registerMap('map', this.mapJson);var option = {//   backgroundColor: "black",geo: this.geoFn(),series: this.seriesFn(),tooltip: {trigger: 'item',},animation: false};this.chart.setOption(option, true);this.chart.off('click');this.chart.on('click', this.provinceMapClick);this.chart.on('georoam', (params) => { //放大缩小var optionTmp = this.chart.getOption();if (params.zoom != null && params.zoom != undefined) {optionTmp.geo[0].zoom = optionTmp.geo[2].zoom;optionTmp.geo[1].zoom = optionTmp.geo[2].zoom;optionTmp.geo[0].center = optionTmp.geo[2].center;optionTmp.geo[1].center = optionTmp.geo[2].center;} else {optionTmp.geo[0].center = optionTmp.geo[2].center;optionTmp.geo[1].center = optionTmp.geo[2].center;}// this.chart.dispatchAction({//   type: 'restore'// })this.chart.setOption(optionTmp);});},geoFn() {const geo = [// 高亮虚影层，描绘白色轮廓{map: 'map',roam: true, // 是否允许缩放silent: false,// layoutCenter: ["50%", "50%"],  //地图位置// layoutSize: this.provinceCode == 'china' ? '120%' : '100%',zoom: this.provinceCode == 'china' ? '1.15' : '1',itemStyle: {normal: {borderColor: 'rgba(255,255, 255,1)',borderWidth: 3,shadowColor: 'rgba(255,255, 255,1)',shadowOffsetY: 0,shadowBlur: 5,},},zlevel: -1,},// 底部重影层，蓝色偏移形成立体感{map: 'map',roam: true, // 是否允许缩放silent: false,// layoutCenter: ["50%", "50%"],  //地图位置// layoutSize: this.provinceCode == 'china' ? '120%' : '100%',zoom: this.provinceCode == 'china' ? '1.15' : '1',itemStyle: {normal: {shadowColor: "#00BAFF",shadowOffsetX: 0,shadowOffsetY: 13,opacity: 0.8,},emphasis: {areaColor: "#00BAFF",},},zlevel: -2,},// 真实层{map: this.provinceCode == 'china' ? 'china' : 'map',zoom: this.provinceCode == 'china' ? '1.15' : '1',// layoutCenter: ["50%", "50%"],  //地图位置// layoutSize: this.provinceCode == 'china' ? '120%' : '100%',roam: true, //是否开启平游或缩放silent: false,label: {show: true,color: "#FFFFFF",fontSize: 10,},itemStyle: {normal: {areaColor: "#011C33",borderColor: "#007480",borderWidth: 1,},emphasis: {areaColor: "#108dc7",borderColor: "#108dc7",label: {show: true,color: "#fff",},},},// data: data,zlevel: 0,},]return geo;},seriesFn() {let series = [];let paramArr = [];if (this.mapData.plates) {paramArr = ['area', 'plates']} else {paramArr = ['area', 'province']}if(this.search.areaCode == '' && this.search.province != ''){paramArr = paramArr.slice(1)}paramArr.forEach(paramItem => {this.mapData[paramItem].forEach(item => {let data = this.convertData(item);series.push({type: 'scatter',coordinateSystem: 'geo',symbol: this.mapIcon[paramItem],itemStyle: {normal: {color: this.iconColor[paramItem][0]}},symbolSize: 14,tooltip: {show: true,transitionDuration: 0,axisPointer: {type: 'cross',crossStyle: {color: '#999'}},backgroundColor: 'rgba(0, 60, 93, .9)',formatter(e) {if (paramItem == 'area') {var html = `<div class="overview-tooltip"><p>${e.name}</p>`;html +=`<div><span class>装机容量</span><span>${item.capacity}万KW</span></div>`;html +=`<div><span>机组台数</span><span>${item.installedUnits}台</span></div>`} else if (paramItem == 'province') {var html = `<div class="overview-tooltip"><p>${item.province}光伏产业</p>`;} else {var html = `<div class="overview-tooltip"><p>${item.orgShortName}光伏产业</p>`;}html += `</div>`;return html;}},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,zlevel: 1,data: data,})});})return series;},convertData(data) {let res = [];res.push({name: data.areaShortName,value: data.value,province: data.province});return res;},provinceMapClick(params) {if (params.seriesType == "scatter" && params.data.province) {let data = params.data;this.provinceCode = this.pinRegois[data.province]this.$emit('getProvince', params.data.province)}},}}
</script>

<style lang="scss" scoped>
.map {position: relative;height: calc(100% - 48px);width: 100%;.e-label {position: absolute;left: 20px;bottom: 20px;width: 160px;padding: 10px;background-color: #021729;border-radius: 10px;opacity: 0.8;font-size: 12px;}.e-label p {margin: 0;line-height: 22px;}.e-label .e-label-title {margin-bottom: 5px;font-size: 14px;}.e-label p img {float: right;}
}
.charts {height: 100%;width: 100%;background: url('../../../assets/overview/map-bg.png') no-repeat center;background-size: 100% 100%;
}
</style>
<style lang='scss'>
.overview-tooltip > p {min-width: 200px;margin-bottom: 10px;padding: 5px 0;font-size: 16px;font-weight: bold;text-align: center;background: url('../../../assets/overview/detail-bg.png') no-repeat center;
}.overview-tooltip > div {overflow: hidden;padding: 4px 10px;font-size: 14px;span {&:last-child {margin-left: 30px;}}
}
</style>

中国地图3D立体效果相关推荐

JS 实现3D立体效果的首页轮播图（瞬间让你的网站高大上，逼格满满）
还是那句话,废话少说,直接上源代码:http://download.csdn.net/detail/cometwo/9387901 <html> <head> <titl ...
echarts map 地图做出立体效果
echarts map 地图做出立体效果最近做项目,需要用到立体地图,但是立体地图上还需要很多其他效果,所以用了 map 平面地图做出了立体效果. 想知道怎么弄的,扣1,欢迎来交流.
用计算机做出牙膏盒立体效果制作,使用Nuke进行2D转3D立体世界详解案例教程（二）：制作3D立体效果...
三.Nuke 3D Stereography Production 模型制作完成后,接下来可以将其导入Nuke,并开始制作3D立体效果. 3.1导入场景模型 ※步骤1 启动Nuke软件,新建一个项目文 ...
百度地图的立体效果来实现
百度映射用于使用二维映射图之前.如今,百度地图找到支持立体效果.为了实现立体效果只需要添加以下两个示例代码可: map.setMapType(BMAP_PERSPECTIVE_MAP); // ...
echarts——实现3D地图+3D柱状图效果——粗糙代码记录——技能提升
最近看到同事在弄下面的这个图,这个图是从网上看到的,是某个网站的收费项目: 收费模板:￥29.9元购买,且必须是高级版+尊享版才能够购买这个... 死贵!!! 所以,最后的决定是通过echarts中的 ...
百度地图--3D棱柱效果---省边界数据抽取---Boundary、Point、Prism
3D棱柱效果上代码 var map = new BMapGL.Map("allmap");var point = new BMapGL.Point(116.404, 39.925 ...
android立体3D效果_PS教程：铝膜气球字制作的完整教程，3D立体效果字体的制作...
这一篇主要是用PS做一种3D立体字体效果,铝膜气球字体,当然学会之后,举一反三,可以做成其他图案的铝膜气球效果. 铝膜气球在目前的各种庆典,婚庆,庆贺宴席上,用的比较普遍:这个字体效果,后期可以用于室 ...
【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
Alternativa3D也可以！3D立体效果（需要红蓝眼镜）
看flare3D之黄河星球demo,提起我的兴趣.故我就用我较熟悉之Alternativa3D实现一下.就用这个方法实现了.贴代码瞧瞧 package {import alternativa.engi ...
echarts中国地图3D各个城市标点demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <m ...

中国地图3D立体效果

中国地图3D立体效果

中国地图3D立体效果相关推荐

最新文章

热门文章