企业网站定制开发流程,网站建设图片属性设置,什么是网站交互,创建网站和主页一.地图立体效果
方法1:两层地图叠加 实现原理:geo数组中放入两个地图对象,通过修改zlevel属性以及top,left,right,bottom形成视觉差
配置项参考如下代码:
geo: [{zlevel: 2,top: 96,map: map,itemStyle: {color: #091A51ee,opacity: 1,borderWidth: 2,borderColor: #16BAFA…一.地图立体效果
方法1:两层地图叠加 实现原理:geo数组中放入两个地图对象,通过修改zlevel属性以及top,left,right,bottom形成视觉差
配置项参考如下代码:
geo: [{zlevel: 2,top: 96,map: map,itemStyle: {color: #091A51ee,opacity: 1,borderWidth: 2,borderColor: #16BAFA},label: {show: true,position: top,color: #fff,fontSize: 14,lineHeight: 16,fontWeight: bold,textShadowColor: #073BDA, // 阴影颜色textShadowBlur: 10, // 阴影模糊程度textShadowOffsetX: 0, // 阴影横向偏移textShadowOffsetY: 4, // 阴影纵向偏移formatter: function({ name }) {return ${name}}},emphasis: {disabled: true, //是否可以被选中label: {show: true,color: #fff,fontSize: 18,textShadowColor: ,textShadowBlur: 0, // 阴影模糊程度textShadowOffsetX: 0, // 阴影横向偏移textShadowOffsetY: 0 // 阴影纵向偏移},itemStyle: {color: #01A8F1}}},{zlevel: 1,map: map,itemStyle: {color: #17418B,opacity: 1,borderWidth: 2,borderColor: #17418B},label: {show: false},emphasis: {disabled: false, // 是否可以被选中itemStyle: {color: #01A8F1}}}]
方法二:通过echarts-gl实现3d效果 1.需要引入echarts-gl.js文件或者npm下载
2.此方法地图省份的点击事件不生效!!!
3.省份名称需要通过下面代码才能显示出来
formatter: function ({ name }) { return ${name} }
配置项完整代码如下:
geo3D: {map: map,roam: true,shading: color,boxHeight: 100,regionHeight: 8,itemStyle: {color: #163C99,opacity: 0.4,borderWidth: 1,borderColor: #0EF6FA},emphasis: {disabled: true, //是否可以被选中label: {//移入时的高亮文本show: true,color: #000, //显示字体颜色变淡fontSize: 18 //显示字体变大}},label: {show: true,position: top,color: #fff,fontSize: 14,lineHeight: 16,formatter: function ({ name }) {return ${name}}},light: {//光照阴影main: {color: #032372, //光照颜色intensity: 0.1, //光照强度 //shadowQuality: high, //阴影亮度shadow: true, //是否显示阴影shadowQuality: medium, //阴影质量 ultra //阴影亮度alpha: 80,beta: 0,ambientCubemap: 0.5},ambient: {intensity: 1,color: #133995 //光照颜色}},viewControl: {beta: 0, //x轴旋转alpha: 75, //Y轴旋转panMouseButton: center, //平移操作使用的鼠标按键rotateMouseButton: left, //旋转操作使用的鼠标按键rotateSensitivity: 0, //禁止旋转地图//下面的四个参数 可以实现禁止缩放地图projection: orthographic,orthographicSize: 110,maxOrthographicSize: 110,minOrthographicSize: 110}}//如果要选中/激活高亮某个省份
function setProvince(e) {let option mapChartInstance.getOption()option.geo3D[0].regions [{name: e,itemStyle: {color: #0cf4f9,opacity: 1}}]mapChartInstance.setOption(option)}
二.地图点击事件
//this.mapChart替换成对应的echarts实例
this.mapChart.on(click, (e) {this.setProvince(e.name)
})
三.自定义tooltip 实现原理:
tooltip和地图的div容器宽高一致,tooltip中要自定义显示的内容相对于tooltip定位,然后通过echarts提供的convertToPixel()方法计算出自定义显示内容的相对位置 html
div classtop_contentdiv classmap_chart idmap_chart/divdiv classmap-tooltipdiv classin u-flex-col u-row-center :stylecurMapDatadiv{{ current_province.name }}/divdiv classu-m-t-15span{{ total }}/span 家合作企业/div/div/div
/div
js
const properties mapJson.features.find(item item.properties.name.includes(name)).properties
const cp properties.cp || properties.center
this.curMapData this.showTooltipAtCoords(cp)showTooltipAtCoords(cp) { // 经纬度转换position位置const lng cp[0]const lat cp[1]const point this.mapChart.convertToPixel(geo, [lng, lat])const left ${point[0]}px // 设置位置const top ${point[1] - 90}px // 设置位置return left:${left} ;top:${top}
},
