Vue Echarts製作自定義3D地圖
引用插件版本： “echarts”: “^4.1.0”,“echarts-gl”: “^1.1.1”
上代碼：注意xicheng.json爲自定義map文件
<style scoped>
h2{
text-align: center;
padding: 30px;
font-size: 18px;
}
#chart_example{
width: 100%;
height: 600px;
/* border: 1px solid red; */
margin: 0 auto;
}
</style>
<template>
<div>
<h2>3D示意圖</h2>
<div id="chart_example">
</div>
</div>
</template>
<script>
import echarts from 'echarts'
import echartsgl from 'echarts-gl'
var cywc_zyq = require('../../static/xicheng.json') //引入geojson文件
export default {
data() {
return {}
},
mounted() {
let this_ = this;
let myChart = echarts.init(document.getElementById('chart_example'));
// 註冊地圖名字(tongren)和數據(geoJson)
echarts.registerMap('xicheng',cywc_zyq,{});
// 隱藏動畫加載效果。
myChart.hideLoading();
// 圖表配置項
var option = {
title : { // 標題
top : '5%',
text : '自定義3D地圖',
subtext : '',
x : 'center',
textStyle : {
color : '#ccc'
}
},
tooltip : { // 提示框
trigger : 'item',
formatter : function(params) {
return params.name;
}
},
series: [{
type: 'map3D', // 系列類型
name: 'map3D', // 系列名稱
map: 'xicheng', // 地圖類型。echarts-gl 中使用的地圖類型同 geo 組件相同(ECharts 中提供了兩種格式的地圖數據，一種是可以直接 script 標籤引入的 js 文件，引入後會自動註冊地圖名字和數據。還有一種是 JSON 文件，需要通過 AJAX 異步加載後手動註冊。)
// 環境貼圖，支持純顏色值，漸變色，全景貼圖的 url。默認爲 'auto'，在配置有 light.ambientCubemap.texture 的時候會使用該紋理作爲環境貼圖。否則則不顯示環境貼圖。
environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 配置爲垂直漸變的背景
offset: 0, color: '#00aaff' // 天空顏色
}, {
offset: 0.7, color: '#998866' // 地面顏色
}, {
offset: 1, color: '#998866' // 地面顏色
}], false),
label: { // 標籤的相關設置
show: true, // (地圖上的城市名稱)是否顯示標籤 [ default: false ]
//distance: 50, // 標籤距離圖形的距離，在三維的散點圖中這個距離是屏幕空間的像素值，其它圖中這個距離是相對的三維距離
//formatter:, // 標籤內容格式器
textStyle: { // 標籤的字體樣式
color: '#000', // 地圖初始化區域字體顏色
fontSize: 8, // 字體大小
opacity: 1, // 字體透明度
backgroundColor: 'rgba(0,23,11,0)' // 字體背景色
},
},
itemStyle: { // 三維地理座標系組件 中三維圖形的視覺屬性，包括顏色，透明度，描邊等。
color: 'rgba(95,158,160,0.5)', // 地圖板塊的顏色
opacity: 1, // 圖形的不透明度 [ default: 1 ]
borderWidth: 0.5, // (地圖板塊間的分隔線)圖形描邊的寬度。加上描邊後可以更清晰的區分每個區域 [ default: 0 ]
borderColor: '#000' // 圖形描邊的顏色。[ default: #333 ]
},
emphasis: { // 鼠標 hover 高亮時圖形和標籤的樣式 (當鼠標放上去時 label和itemStyle 的樣式)
label: { // label高亮時的配置
show: true,
textStyle: {
color: '#fff', // 高亮時標籤顏色變爲 白色
fontSize: 15, // 高亮時標籤字體 變大
}
},
itemStyle: { // itemStyle高亮時的配置
areaColor: '#66ffff', // 高亮時地圖板塊顏色改變
}
},
groundPlane: { // 地面可以讓整個組件有個“擺放”的地方，從而使整個場景看起來更真實，更有模型感。
show: false, // 是否顯示地面。[ default: false ]
color: '#aaa' // 地面顏色。[ default: '#aaa' ]
},
regions: [{ // 可對單個地圖區域進行設置
name: '二區', // 所對應的地圖區域的名稱
//regionHeight: '', // 區域的高度，可以設置不同的高度用來表達數據的大小。當 GeoJSON 爲建築的數據時，也可以通過這個值表示簡直的高度。
itemStyle: { // 單個區域的樣式設置
color: '#00FF00',
opacity: 1,
borderWidth: 0.4,
borderColor: '#5F9EA0'
},
}, {
name: '一區',
itemStyle: {
color: '#EEEE00',
opacity: 1,
borderWidth: 0.4,
borderColor: '#5F9EA0'
},
}],
//shading: 'lambert', // 三維地理座標系組件中三維圖形的着色效果，echarts-gl 中支持下面三種着色方式:
// 'color' 只顯示顏色，不受光照等其它因素的影響。
// 'lambert' 通過經典的 lambert 着色表現光照帶來的明暗。
// 'realistic' 真實感渲染，配合 light.ambientCubemap 和 postEffect 使用可以讓展示的畫面效果和質感有質的提升。ECharts GL 中使用了基於物理的渲染（PBR） 來表現真實感材質。
// realisticMaterial: {} // 真實感材質相關的配置項，在 shading 爲'realistic'時有效。
// lambertMaterial: {} // lambert 材質相關的配置項，在 shading 爲'lambert'時有效。
// colorMaterial: {} // color 材質相關的配置項，在 shading 爲'color'時有效。
light: { // 光照相關的設置。在 shading 爲 'color' 的時候無效。 光照的設置會影響到組件以及組件所在座標系上的所有圖表。合理的光照設置能夠讓整個場景的明暗變得更豐富，更有層次。
main: { // 場景主光源的設置，在 globe 組件中就是太陽光。
color: '#fff', //主光源的顏色。[ default: #fff ]
intensity: 1.2, //主光源的強度。[ default: 1 ]
shadow: false, //主光源是否投射陰影。默認關閉。 開啓陰影可以給場景帶來更真實和有層次的光照效果。但是同時也會增加程序的運行開銷。
//shadowQuality: 'high', // 陰影的質量。可選'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
alpha: 55, // 主光源繞 x 軸，即上下旋轉的角度。配合 beta 控制光源的方向。[ default: 40 ]
beta: 10 // 主光源繞 y 軸，即左右旋轉的角度。[ default: 40 ]
},
ambient: { // 全局的環境光設置。
color: '#fff', // 環境光的顏色。[ default: #fff ]
intensity: 0.5 // 環境光的強度。[ default: 0.2 ]
}
},
viewControl: { // 用於鼠標的旋轉，縮放等視角控制。
projection: 'perspective', // 投影方式，默認爲透視投影'perspective'，也支持設置爲正交投影'orthographic'。
autoRotate: false, // 是否開啓視角繞物體的自動旋轉查看。[ default: false ]
autoRotateDirection: 'cw', // 物體自傳的方向。默認是 'cw' 也就是從上往下看是順時針方向，也可以取 'ccw'，既從上往下看爲逆時針方向。
autoRotateSpeed: 10, // 物體自傳的速度。單位爲角度 / 秒，默認爲10 ，也就是36秒轉一圈。
autoRotateAfterStill: 3, // 在鼠標靜止操作後恢復自動旋轉的時間間隔。在開啓 autoRotate 後有效。[ default: 3 ]
damping: 0, // 鼠標進行旋轉，縮放等操作時的遲滯因子，在大於等於 1 的時候鼠標在停止操作後，視角仍會因爲一定的慣性繼續運動（旋轉和縮放）。[ default: 0.8 ]
rotateSensitivity: 1, // 旋轉操作的靈敏度，值越大越靈敏。支持使用數組分別設置橫向和縱向的旋轉靈敏度。默認爲1, 設置爲0後無法旋轉。 rotateSensitivity: [1, 0]——只能橫向旋轉； rotateSensitivity: [0, 1]——只能縱向旋轉。
zoomSensitivity: 1, // 縮放操作的靈敏度，值越大越靈敏。默認爲1,設置爲0後無法縮放。
panSensitivity: 1, // 平移操作的靈敏度，值越大越靈敏。默認爲1,設置爲0後無法平移。支持使用數組分別設置橫向和縱向的平移靈敏度
panMouseButton: 'left', // 平移操作使用的鼠標按鍵，支持：'left' 鼠標左鍵（默認）;'middle' 鼠標中鍵 ;'right' 鼠標右鍵(注意：如果設置爲鼠標右鍵則會阻止默認的右鍵菜單。)
rotateMouseButton: 'left', // 旋轉操作使用的鼠標按鍵，支持：'left' 鼠標左鍵;'middle' 鼠標中鍵（默認）;'right' 鼠標右鍵(注意：如果設置爲鼠標右鍵則會阻止默認的右鍵菜單。)
distance: 200, // [ default: 100 ] 默認視角距離主體的距離，對於 grid3D 和 geo3D 等其它組件來說是距離中心原點的距離,對於 globe 來說是距離地球表面的距離。在 projection 爲'perspective'的時候有效。
minDistance: 40, // [ default: 40 ] 視角通過鼠標控制能拉近到主體的最小距離。在 projection 爲'perspective'的時候有效。
maxDistance: 400, // [ default: 400 ] 視角通過鼠標控制能拉遠到主體的最大距離。在 projection 爲'perspective'的時候有效。
alpha: 40, // 視角繞 x 軸，即上下旋轉的角度。配合 beta 可以控制視角的方向。[ default: 40 ]
beta: 15, // 視角繞 y 軸，即左右旋轉的角度。[ default: 0 ]
minAlpha: -360, // 上下旋轉的最小 alpha 值。即視角能旋轉到達最上面的角度。[ default: 5 ]
maxAlpha: 360, // 上下旋轉的最大 alpha 值。即視角能旋轉到達最下面的角度。[ default: 90 ]
minBeta: -360, // 左右旋轉的最小 beta 值。即視角能旋轉到達最左的角度。[ default: -80 ]
maxBeta: 360, // 左右旋轉的最大 beta 值。即視角能旋轉到達最右的角度。[ default: 80 ]
center: [0,0,0], // 視角中心點，旋轉也會圍繞這個中心點旋轉，默認爲[0,0,0]。
animation: true, // 是否開啓動畫。[ default: true ]
animationDurationUpdate: 1000, // 過渡動畫的時長。[ default: 1000 ]
animationEasingUpdate: 'cubicInOut' // 過渡動畫的緩動效果。[ default: cubicInOut ]
},
data: [ // 可對單個地圖區域進行設置
{name: '第一區', // 所對應的地圖區域的名稱
value: 17000,
regionHeight: '20', // 區域的高度，可以設置不同的高度用來表達數據的大小。當 GeoJSON 爲建築的數據時，也可以通過這個值表示簡直的高度。
itemStyle: { // 單個區域的樣式設置
color: '#EEEE00',
opacity: 1,
borderWidth: 0.4,
borderColor: '#5F9EA0'
},
},
{name: '第二區',
value: 1000,
regionHeight: '100',
itemStyle: { // 單個區域的樣式設置
color: '#00FF00',
opacity: 1,
borderWidth: 0.4,
borderColor: '#5F9EA0'
},
},
{name: '第三區', value: 5000},
{name: '第四區', value: 20000},
{name: '第五區', value: 25000},
{name: '第六區', value: 30000},
{name: '第七區', value: 18000},
{name: '第八區', value: 2300},
{name: '三作業區', value: 20000},
{name: '預留', value: 16000},
{name: '', value: 28000}
]
}]
};
// 設置圖表實例的配置項以及數據，萬能接口，所有參數和數據的修改都可以通過setOption完成，ECharts 會合並新的參數和數據，然後刷新圖表。
myChart.setOption(option);
// myChart.setOption(option);
myChart.on('click', function (param) {
console.info('點擊' + JSON.stringify(param.data) ) // 柱狀圖上的數值並不會彈出
// this.openMessage() // 這個方法也沒執行
//可根據 param.data.name 進行判斷 跳轉 第七區
})
//建議加上以下這一行代碼，不加的效果圖如下（當瀏覽器窗口縮小的時候）。超過了div的界限（紅色邊框）
window.addEventListener('resize',function() {myChart.resize()});
},
methods: {},
watch: {},
created() {
}
}
</script>
效果圖：可以旋轉查看
``
效果圖：可以旋轉查看
一點，地圖塊名稱未顯示。待調試 ··
繪製自定義地圖地址：http://geojson.io
參考鏈接：https://www.cnblogs.com/telwanggs/p/11056515.html
https://www.jianshu.com/p/7337c2f56876?from=groupmessage&isappinstalled=0