echarts+HTML 繪制3d地圖，加載散點+散點點擊事件

首先，確保了解如何本地引入ECharts庫。

html 文件中引入本地 echarts.min.js 和?echarts-gl.min.js。

可以通過官網下載或npm安裝，但這里直接下載JS文件更簡單。需要引入?echarts.js?和 echarts-gl.js，因為3D地圖需要GL模塊。

接下來是HTML結構。需要一個容器div，設置寬度和高度，比如100%寬度和800px高度。然后初始化ECharts實例。

地圖數據方面，ECharts支持GeoJSON格式。用戶需要準備地圖的JSON文件，比如銅仁市的522200.json。使用?fetch?加載JSON文件，然后注冊地圖，echarts.registerMap('tongren', geoJson)。

最后，提醒注意事項，比如地圖JSON文件的獲取方式，可以使用?DataV.GeoAtlas?工具生成，或者從ECharts官網下載。確保JSON文件路徑正確，避免404錯誤。

以下是一個完整的本地引入ECharts實現3D地圖的示例，包含詳細注釋和可運行代碼：

代碼中的圖片需要換成你自己本地的；

hebei.json 文件，可以創建一個 hebei.json，在瀏覽器打開?https://geo.datav.aliyun.com/areas_v3/bound/130000_full.json，將其中的內容復制到?hebei.json 文件中。

<%@page pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/echarts.min.js"></script><script src="./js/echarts-gl.min.js"></script><style lang="scss" scoped>body {margin: 0;overflow-x: hidden;box-sizing: border-box;}.bottom-view {width: 1000px;height: 800px;}</style>
</head><body>
<div class="bottom-view"><div id="mapChart" style="width: 100%; height: 100%;"></div>
</div><script>// 3d地圖// 初始化圖表// 定義全局變量存儲JSON數據const scatterData = [{relationid: "1",title: "安慶電廠",name: "安慶電廠",projectType: "火電",lng: 118.175393,lat: 39.635113,value: [118.175393, 39.635113],},{relationid: "2",title: "黃山電廠",name: "黃山電廠",projectType: "光伏發電",lng: 117.939152,lat: 40.976204,value: [117.939152, 40.976204],},{relationid: "3",title: "",name: "",projectType: "光伏發電",lng: 110.939152,lat: 110.976204,value: [110.939152, 110.976204],},];const mapChartImglist = ['./mis/jmis/resources/business/images/hbportal/thermalpower.png','./mis/jmis/resources/business/images/hbportal/pvpower.png','./mis/jmis/resources/business/images/hbportal/hydropower.png']// 定義全局變量存儲JSON數據let hebei;// 使用fetch加載JSON文件fetch('./json/hebei.json')  // 確保路徑正確.then(response => response.json()).then(data => {hebei = data;console.log('數據加載完成:', hebei);// 在這里調用需要JSON數據的方法useJsonData();}).catch(error => {console.error('加載JSON文件失敗:', error);});function useJsonData() {echarts.registerMap("hebei", hebei);const chartMapChartDom = document.getElementById('mapChart');const myMapChart = echarts.init(chartMapChartDom);let seriesList = [];let mapChartdata = scatterData.map((item, index) => {return {name: item.title,value: [item.lng, item.lat, 0],id: item.relationid,label: {show: true,position: "bottom",distance: -57,formatter(params) {return "   ";},textStyle: {// color: "transparent",color: "#ff0000",padding: [5, 5],backgroundColor: {image:item.projectType == "火電"? mapChartImglist[0]: item.projectType == "光伏發電"? mapChartImglist[1]: mapChartImglist[2],},},},emphasis: {label: {show: true,position: "bottom",distance: -57,formatter(params) {return "   ";},textStyle: {// color: "transparent",color: "#ff0000",padding: [5, 5],backgroundColor: {image:item.projectType == "火電"? mapChartImglist[0]: item.projectType == "光伏發電"? mapChartImglist[1]: mapChartImglist[2],},radius: "100%",},},},};});seriesList.push({name: "自定義圖標",type: "scatter3D",coordinateSystem: "geo3D",data: mapChartdata,symbol: "",symbolSize: [0, 50],zlevel: 6,itemStyle: {color: "red",borderColor: "transparent",borderWidth: 15,},});console.log("看看seriesList是什么", seriesList)// 配置項myMapChart.setOption({// backgroundColor: '#03213D',animation: false,tooltip: {trigger: "axis",},geo3D: {map: "hebei",show: true,regionHeight: 5, // 地圖厚度top: -60,itemStyle: {// 三維地理坐標系組件 中三維圖形的視覺屬性，包括顏色，透明度，描邊等。color: "rgba(49, 111, 128,.7)", // 地圖板塊的顏色// color: 'rgba(95,158,160,0.5)', // TODO地圖板塊的顏色opacity: 1, // 圖形的不透明度 [ default: 1 ]borderWidth: 1, // (地圖板塊間的分隔線)圖形描邊的寬度。加上描邊后可以更清晰的區分每個區域   [ default: 0 ]borderColor: "rgba(147, 235, 248,.6)", // 圖形描邊的顏色。[ default: #333 ]// borderColor: '#000' // TODO圖形描邊的顏色。[ default: #333 ]},label: {// 標簽的相關設置show: false, // (地圖上的城市名稱)是否顯示標簽 [ default: false ]// distance: 50,               // 標簽距離圖形的距離，在三維的散點圖中這個距離是屏幕空間的像素值，其它圖中這個距離是相對的三維距離// formatter:,               // 標簽內容格式器textStyle: {// 標簽的字體樣式color: "#fff", // 地圖初始化區域字體顏色fontSize: 14, // 字體大小opacity: 1, // 字體透明度backgroundColor: "rgba(0,23,11,0)", // 字體背景色},},emphasis: {// 鼠標 hover 高亮時圖形和標簽的樣式 (當鼠標放上去時  label和itemStyle 的樣式)label: {// TODO label高亮時的配置show: false,// textStyle: {//   color: '#fff', // 高亮時標簽顏色變為 白色//   fontSize: 15 // 高亮時標簽字體 變大// }},itemStyle: {// TODO itemStyle高亮時的配置color: "#115a5a", // 高亮時地圖板塊顏色改變// color: '#66ffff' // 高亮時地圖板塊顏色改變},},groundPlane: {// 地面可以讓整個組件有個“擺放”的地方，從而使整個場景看起來更真實，更有模型感。show: false, // 是否顯示地面。[ default: false ]color: "#aaa", // 地面顏色。[ default: '#aaa' ]},shading: "color", // 三維地理坐標系組件中三維圖形的著色效果，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: 130, // [ default: 100 ] 默認視角距離主體的距離，對于 grid3D 和 geo3D 等其它組件來說是距離中心原點的距離,對于 globe 來說是距離地球表面的距離。在 projection 為'perspective'的時候有效。// distance: 200, // [ default: 100 ] 默認視角距離主體的距離，對于 grid3D 和 geo3D 等其它組件來說是距離中心原點的距離,對于 globe 來說是距離地球表面的距離。在 projection 為'perspective'的時候有效。minDistance: 40, // [ default: 40 ] 視角通過鼠標控制能拉近到主體的最小距離。在 projection 為'perspective'的時候有效。maxDistance: 400, // [ default: 400 ] 視角通過鼠標控制能拉遠到主體的最大距離。在 projection 為'perspective'的時候有效。alpha: 60, // 視角繞 x 軸，即上下旋轉的角度。配合 beta 可以控制視角的方向。[ default: 40 ]beta: 0, // 視角繞 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 ]},},series: seriesList,});myMapChart.on("click", (res) => {if (res.seriesType === "scatter3D") {console.log("點擊到了", res);// 在這里處理點擊事件}});}
</script>
</body></html>