當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

echart 广州3d_ECharts3D地图(详细示例——附有具体注释)

發布時間：2023/12/15 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 echart 广州3d_ECharts3D地图(详细示例——附有具体注释) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

3D地圖圖表效果如下:

具體代碼如下：

銅仁市3D地圖(點擊地圖區域跳轉到相應頁面)

// 初始化圖表

var myChart = echarts.init(document.getElementById('main'));

// JSON文件(地圖數據)路徑

var uploadedDataURL = "json/522200.json";

// 顯示加載動畫效果,可以在加載數據前手動調用該接口顯示加載動畫，在數據加載完成后調用 hideLoading 隱藏加載動畫。

myChart.showLoading();

// 引入JSON文件

$.getJSON(uploadedDataURL, function(geoJson) {

// 注冊地圖名字(tongren)和數據(geoJson)

echarts.registerMap('tongren', geoJson);

// 隱藏動畫加載效果。

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', // 系列類型

map: 'tongren', // 地圖類型。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: [{// 可對單個地圖區域進行設置

//regionHeight: '',// 區域的高度，可以設置不同的高度用來表達數據的大小。當 GeoJSON 為建筑的數據時，也可以通過這個值表示簡直的高度。

itemStyle: {// 單個區域的樣式設置

color: '#00FF00',

opacity: 1,

borderWidth: 0.4,

borderColor: '#5F9EA0'

}, {

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: [{// 可對單個地圖區域進行設置

//regionHeight: '',// 區域的高度，可以設置不同的高度用來表達數據的大小。當 GeoJSON 為建筑的數據時，也可以通過這個值表示簡直的高度。

itemStyle: {// 單個區域的樣式設置

color: '#00FF00',

opacity: 1,

borderWidth: 0.4,

borderColor: '#5F9EA0'

}, {

itemStyle: {

color: '#EEEE00',

opacity: 1,

borderWidth: 0.4,

borderColor: '#5F9EA0'

}]

};

// 設置圖表實例的配置項以及數據，萬能接口，所有參數和數據的修改都可以通過setOption完成，ECharts 會合并新的參數和數據，然后刷新圖表。

myChart.setOption(option);

});

// 處理點擊事件并且跳轉到相應的百度搜索頁面

myChart.on('click', function (params) {

var subSystem = params.name;

var url = 'https://www.baidu.com/s?ie=UTF-8&wd=';

// 根據點擊地圖區域的名稱,跳轉到對應頁面

if(subSystem == '德江縣'){