當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2023/12/15 编程问答 17 豆豆

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

3D地圖圖表效果如下:

具體代碼如下：

銅仁市3D地圖(點(diǎn)擊地圖區(qū)域跳轉(zhuǎn)到相應(yīng)頁(yè)面)

// 初始化圖表

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

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

var uploadedDataURL = "json/522200.json";

// 顯示加載動(dòng)畫(huà)效果,可以在加載數(shù)據(jù)前手動(dòng)調(diào)用該接口顯示加載動(dòng)畫(huà)，在數(shù)據(jù)加載完成后調(diào)用 hideLoading 隱藏加載動(dòng)畫(huà)。

myChart.showLoading();

// 引入JSON文件

$.getJSON(uploadedDataURL, function(geoJson) {

// 注冊(cè)地圖名字(tongren)和數(shù)據(jù)(geoJson)

echarts.registerMap('tongren', geoJson);

// 隱藏動(dòng)畫(huà)加載效果。

myChart.hideLoading();

// 圖表配置項(xiàng)

var option = {

title : {// 標(biāo)題

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 中提供了兩種格式的地圖數(shù)據(jù)，一種是可以直接 script 標(biāo)簽引入的 js 文件，引入后會(huì)自動(dòng)注冊(cè)地圖名字和數(shù)據(jù)。還有一種是 JSON 文件，需要通過(guò) AJAX 異步加載后手動(dòng)注冊(cè)。)

// 環(huán)境貼圖，支持純顏色值，漸變色，全景貼圖的 url。默認(rèn)為 'auto'，在配置有 light.ambientCubemap.texture 的時(shí)候會(huì)使用該紋理作為環(huán)境貼圖。否則則不顯示環(huán)境貼圖。

environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 配置為垂直漸變的背景

offset: 0, color: '#00aaff' // 天空顏色

}, {

offset: 0.7, color: '#998866' // 地面顏色

}, {

offset: 1, color: '#998866' // 地面顏色

}], false),

label: { // 標(biāo)簽的相關(guān)設(shè)置

show: true, // (地圖上的城市名稱)是否顯示標(biāo)簽 [ default: false ]

//distance: 50, // 標(biāo)簽距離圖形的距離，在三維的散點(diǎn)圖中這個(gè)距離是屏幕空間的像素值，其它圖中這個(gè)距離是相對(duì)的三維距離

//formatter:, // 標(biāo)簽內(nèi)容格式器

textStyle: { // 標(biāo)簽的字體樣式

color: '#000', // 地圖初始化區(qū)域字體顏色

fontSize: 8, // 字體大小

opacity: 1, // 字體透明度

backgroundColor: 'rgba(0,23,11,0)' // 字體背景色

itemStyle: { // 三維地理坐標(biāo)系組件中三維圖形的視覺(jué)屬性，包括顏色，透明度，描邊等。

color: 'rgba(95,158,160,0.5)', // 地圖板塊的顏色

opacity: 1, // 圖形的不透明度 [ default: 1 ]

borderWidth: 0.5, // (地圖板塊間的分隔線)圖形描邊的寬度。加上描邊后可以更清晰的區(qū)分每個(gè)區(qū)域 [ default: 0 ]

borderColor: '#000' // 圖形描邊的顏色。[ default: #333 ]

emphasis: { // 鼠標(biāo) hover 高亮?xí)r圖形和標(biāo)簽的樣式 (當(dāng)鼠標(biāo)放上去時(shí) label和itemStyle 的樣式)

label: { // label高亮?xí)r的配置

show: true,

textStyle: {

color: '#fff', // 高亮?xí)r標(biāo)簽顏色變?yōu)?白色

fontSize: 15, // 高亮?xí)r標(biāo)簽字體變大

}

itemStyle: { // itemStyle高亮?xí)r的配置

areaColor: '#66ffff', // 高亮?xí)r地圖板塊顏色改變

}

groundPlane: {// 地面可以讓整個(gè)組件有個(gè)“擺放”的地方，從而使整個(gè)場(chǎng)景看起來(lái)更真實(shí)，更有模型感。

show: false,// 是否顯示地面。[ default: false ]

color: '#aaa'// 地面顏色。[ default: '#aaa' ]

regions: [{// 可對(duì)單個(gè)地圖區(qū)域進(jìn)行設(shè)置

//regionHeight: '',// 區(qū)域的高度，可以設(shè)置不同的高度用來(lái)表達(dá)數(shù)據(jù)的大小。當(dāng) GeoJSON 為建筑的數(shù)據(jù)時(shí)，也可以通過(guò)這個(gè)值表示簡(jiǎn)直的高度。

itemStyle: {// 單個(gè)區(qū)域的樣式設(shè)置

color: '#00FF00',

opacity: 1,

borderWidth: 0.4,

borderColor: '#5F9EA0'

}, {

itemStyle: {

color: '#EEEE00',

opacity: 1,

borderWidth: 0.4,

borderColor: '#5F9EA0'

}],

//shading: 'lambert', // 三維地理坐標(biāo)系組件中三維圖形的著色效果，echarts-gl 中支持下面三種著色方式:

// 'color' 只顯示顏色，不受光照等其它因素的影響。

// 'lambert' 通過(guò)經(jīng)典的 lambert 著色表現(xiàn)光照帶來(lái)的明暗。

// 'realistic' 真實(shí)感渲染，配合 light.ambientCubemap 和 postEffect 使用可以讓展示的畫(huà)面效果和質(zhì)感有質(zhì)的提升。ECharts GL 中使用了基于物理的渲染(PBR) 來(lái)表現(xiàn)真實(shí)感材質(zhì)。

// realisticMaterial: {} // 真實(shí)感材質(zhì)相關(guān)的配置項(xiàng)，在 shading 為'realistic'時(shí)有效。

// lambertMaterial: {} // lambert 材質(zhì)相關(guān)的配置項(xiàng)，在 shading 為'lambert'時(shí)有效。

// colorMaterial: {} // color 材質(zhì)相關(guān)的配置項(xiàng)，在 shading 為'color'時(shí)有效。

light: { // 光照相關(guān)的設(shè)置。在 shading 為 'color' 的時(shí)候無(wú)效。光照的設(shè)置會(huì)影響到組件以及組件所在坐標(biāo)系上的所有圖表。合理的光照設(shè)置能夠讓整個(gè)場(chǎng)景的明暗變得更豐富，更有層次。

main: { // 場(chǎng)景主光源的設(shè)置，在 globe 組件中就是太陽(yáng)光。

color: '#fff', //主光源的顏色。[ default: #fff ]

intensity: 1.2, //主光源的強(qiáng)度。[ default: 1 ]

shadow: false, //主光源是否投射陰影。默認(rèn)關(guān)閉。開(kāi)啟陰影可以給場(chǎng)景帶來(lái)更真實(shí)和有層次的光照效果。但是同時(shí)也會(huì)增加程序的運(yùn)行開(kāi)銷。

//shadowQuality: 'high', // 陰影的質(zhì)量。可選'low', 'medium', 'high', 'ultra' [ default: 'medium' ]

alpha: 55, // 主光源繞 x 軸，即上下旋轉(zhuǎn)的角度。配合 beta 控制光源的方向。[ default: 40 ]

beta: 10 // 主光源繞 y 軸，即左右旋轉(zhuǎn)的角度。[ default: 40 ]

ambient: { // 全局的環(huán)境光設(shè)置。

color: '#fff', // 環(huán)境光的顏色。[ default: #fff ]

intensity: 0.5 // 環(huán)境光的強(qiáng)度。[ default: 0.2 ]

}

viewControl: {// 用于鼠標(biāo)的旋轉(zhuǎn)，縮放等視角控制。

projection: 'perspective',// 投影方式，默認(rèn)為透視投影'perspective'，也支持設(shè)置為正交投影'orthographic'。

autoRotate: false,// 是否開(kāi)啟視角繞物體的自動(dòng)旋轉(zhuǎn)查看。[ default: false ]

autoRotateDirection: 'cw',// 物體自傳的方向。默認(rèn)是 'cw' 也就是從上往下看是順時(shí)針?lè)较?#xff0c;也可以取 'ccw'，既從上往下看為逆時(shí)針?lè)较颉?/p>

autoRotateSpeed: 10,// 物體自傳的速度。單位為角度 / 秒，默認(rèn)為10 ，也就是36秒轉(zhuǎn)一圈。

autoRotateAfterStill: 3,// 在鼠標(biāo)靜止操作后恢復(fù)自動(dòng)旋轉(zhuǎn)的時(shí)間間隔。在開(kāi)啟 autoRotate 后有效。[ default: 3 ]

damping: 0,// 鼠標(biāo)進(jìn)行旋轉(zhuǎn)，縮放等操作時(shí)的遲滯因子，在大于等于 1 的時(shí)候鼠標(biāo)在停止操作后，視角仍會(huì)因?yàn)橐欢ǖ膽T性繼續(xù)運(yùn)動(dòng)(旋轉(zhuǎn)和縮放)。[ default: 0.8 ]

rotateSensitivity: 1,// 旋轉(zhuǎn)操作的靈敏度，值越大越靈敏。支持使用數(shù)組分別設(shè)置橫向和縱向的旋轉(zhuǎn)靈敏度。默認(rèn)為1, 設(shè)置為0后無(wú)法旋轉(zhuǎn)。rotateSensitivity: [1, 0]——只能橫向旋轉(zhuǎn)； rotateSensitivity: [0, 1]——只能縱向旋轉(zhuǎn)。

zoomSensitivity: 1,// 縮放操作的靈敏度，值越大越靈敏。默認(rèn)為1,設(shè)置為0后無(wú)法縮放。

panSensitivity: 1,// 平移操作的靈敏度，值越大越靈敏。默認(rèn)為1,設(shè)置為0后無(wú)法平移。支持使用數(shù)組分別設(shè)置橫向和縱向的平移靈敏度

panMouseButton: 'left',// 平移操作使用的鼠標(biāo)按鍵，支持：'left' 鼠標(biāo)左鍵(默認(rèn));'middle' 鼠標(biāo)中鍵 ;'right' 鼠標(biāo)右鍵(注意：如果設(shè)置為鼠標(biāo)右鍵則會(huì)阻止默認(rèn)的右鍵菜單。)

rotateMouseButton: 'left',// 旋轉(zhuǎn)操作使用的鼠標(biāo)按鍵，支持：'left' 鼠標(biāo)左鍵;'middle' 鼠標(biāo)中鍵(默認(rèn));'right' 鼠標(biāo)右鍵(注意：如果設(shè)置為鼠標(biāo)右鍵則會(huì)阻止默認(rèn)的右鍵菜單。)

distance: 200,// [ default: 100 ] 默認(rèn)視角距離主體的距離，對(duì)于 grid3D 和 geo3D 等其它組件來(lái)說(shuō)是距離中心原點(diǎn)的距離,對(duì)于 globe 來(lái)說(shuō)是距離地球表面的距離。在 projection 為'perspective'的時(shí)候有效。

minDistance: 40,// [ default: 40 ] 視角通過(guò)鼠標(biāo)控制能拉近到主體的最小距離。在 projection 為'perspective'的時(shí)候有效。

maxDistance: 400,// [ default: 400 ] 視角通過(guò)鼠標(biāo)控制能拉遠(yuǎn)到主體的最大距離。在 projection 為'perspective'的時(shí)候有效。

alpha: 40, // 視角繞 x 軸，即上下旋轉(zhuǎn)的角度。配合 beta 可以控制視角的方向。[ default: 40 ]

beta: 15,// 視角繞 y 軸，即左右旋轉(zhuǎn)的角度。[ default: 0 ]

minAlpha: -360,// 上下旋轉(zhuǎn)的最小 alpha 值。即視角能旋轉(zhuǎn)到達(dá)最上面的角度。[ default: 5 ]

maxAlpha: 360,// 上下旋轉(zhuǎn)的最大 alpha 值。即視角能旋轉(zhuǎn)到達(dá)最下面的角度。[ default: 90 ]

minBeta: -360,// 左右旋轉(zhuǎn)的最小 beta 值。即視角能旋轉(zhuǎn)到達(dá)最左的角度。[ default: -80 ]

maxBeta: 360,// 左右旋轉(zhuǎn)的最大 beta 值。即視角能旋轉(zhuǎn)到達(dá)最右的角度。[ default: 80 ]

center: [0,0,0],// 視角中心點(diǎn)，旋轉(zhuǎn)也會(huì)圍繞這個(gè)中心點(diǎn)旋轉(zhuǎn)，默認(rèn)為[0,0,0]。

animation: true,// 是否開(kāi)啟動(dòng)畫(huà)。[ default: true ]

animationDurationUpdate: 1000,// 過(guò)渡動(dòng)畫(huà)的時(shí)長(zhǎng)。[ default: 1000 ]

animationEasingUpdate: 'cubicInOut'// 過(guò)渡動(dòng)畫(huà)的緩動(dòng)效果。[ default: cubicInOut ]

data: [{// 可對(duì)單個(gè)地圖區(qū)域進(jìn)行設(shè)置

itemStyle: {// 單個(gè)區(qū)域的樣式設(shè)置

color: '#00FF00',

opacity: 1,

borderWidth: 0.4,

borderColor: '#5F9EA0'

}, {

itemStyle: {

color: '#EEEE00',

opacity: 1,

borderWidth: 0.4,

borderColor: '#5F9EA0'

}]

};

// 設(shè)置圖表實(shí)例的配置項(xiàng)以及數(shù)據(jù)，萬(wàn)能接口，所有參數(shù)和數(shù)據(jù)的修改都可以通過(guò)setOption完成，ECharts 會(huì)合并新的參數(shù)和數(shù)據(jù)，然后刷新圖表。

myChart.setOption(option);

});

// 處理點(diǎn)擊事件并且跳轉(zhuǎn)到相應(yīng)的百度搜索頁(yè)面

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

var subSystem = params.name;

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

// 根據(jù)點(diǎn)擊地圖區(qū)域的名稱,跳轉(zhuǎn)到對(duì)應(yīng)頁(yè)面

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