網路相關的一些概念區分

阿新 • • 發佈：2022-11-29

ECharts3D地圖(詳細示例——附有具體註釋)

3D地圖圖表效果如下:

程式碼：

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <title>銅仁市3D地圖(點選地圖區域跳轉到相應頁面)</title>
        
        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <script src="js/echarts4.0.js"></script>
        <script src="js/echarts-gl.js"></script>
</head>
<body>
    <!-- 3D地圖容器 -->
    <div id="main" style="width: 100%; height: 800px;"></div>
    
    <script>    
        // 
 初始化圖表    
        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',              // 系列型別
                        name: '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: [{                // 可對單個地圖區域進行設定
                            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: '玉屏侗族自治縣',        // 所對應的地圖區域的名稱
                            //regionHeight: '',            // 區域的高度，可以設定不同的高度用來表達資料的大小。當 GeoJSON 為建築的資料時，也可以通過這個值表示簡直的高度。
                            itemStyle: {                // 單個區域的樣式設定
                                color: '#00FF00',
                                opacity: 1,
                                borderWidth: 0.4,
                                borderColor: '#5F9EA0'
                            },
                        }, {
                            name: '碧江區',
                            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 == '德江縣'){
                window.open(url.concat(subSystem));
            }else if(subSystem == '思南縣'){
                window.open(url.concat(subSystem));
            }else if(subSystem == '江口縣'){
                window.open(url.concat(subSystem));
            }else if(subSystem == '沿河土家自治縣'){
                window.open(url.concat(subSystem));
            }else if(subSystem == '萬山區'){
                window.open(url.concat(subSystem));
            }else if(subSystem == '碧江區'){
                window.open(url.concat(subSystem));
            }else if(subSystem == '石阡縣'){
                window.open(url.concat(subSystem));
            }else if(subSystem == '玉屏侗族自治縣'){
                window.open(url.concat(subSystem));
            }else if(subSystem == '松桃苗族自治縣'){
                window.open(url.concat(subSystem));
            }else if(subSystem == '印江土家族苗族自治縣'){
                window.open(url.concat(subSystem));
            }
            /*alert(params.name); */
        });
    </script>
</body>
</html>

想要使用Echarts的3D地圖，除了需要 echarts.js 之外，還需要 echarts-gl.js （WebGL 的擴充套件包，提供了豐富的三維視覺化元件以及常規圖表的效能增強），以及相關的 json檔案（3D地圖資料檔案）。

echarts.js 和 echarts-gl.js 下載連結: http://echarts.baidu.com/download.html

至於3D地圖資料檔案可根據需要自行百度，只是練習的話可參考：https://blog.csdn.net/gray_key/article/details/80197527

原文連結：https://blog.csdn.net/GRAY_KEY/article/details/81295961

網路相關的一些概念區分

閘道器，網橋，路由器，交換機兩臺主機之間想要完成通訊，就需要建立通路。首先要明確一個概念：完成通訊不一定非要通過網際網路。

網路相關基本概念

@目錄1. 客戶端與伺服器2. URL地址3. 分析網頁的開啟過程 1. 客戶端與伺服器網站應用程式主要分為兩大部分：客戶端和伺服器端。

【tensorflow】神經網路的一些基本概念和設計過程

當今人工智慧主流方向 —— 連線主義，即仿腦神經元連線，實現感性思維，如神經網路。

TCP一些概念（彙總自網路）

tcp總結根據https://blog.csdn.net/u013256816/article/details/84001583總結作為一個程式設計師要是連tcp都不知道還敲什麼程式碼，嗯，說的就是我。鑑於此，在此總結一下tcp中一些重要的點

iOS | 面試知識整理 - 網路相關 (七)

前言: 最近公司專案不怎麼忙,閒暇時間把iOS 在面試中可能會遇到的問題整理了一番,一部分題目是自己面試遇到的,一部分題目則是網上收錄的,方便自己鞏固複習,也分享給大家! 知識點比較多,比較雜,這裡做了分類,下面是分

計算機網路相關知識

【OSI參考模組】 7 應用層協議：Telnet、SSH、HTTP、SMTP、POP、SSL/TLS、FTP、MIME、HTML、SNMP、MIB、SIP、RTP

網路相關的學習和命令總結

工作兩年後，發現sheel指令碼用的挺多，一直感覺自己用的還可以，後來才發現很多地方自己不夠清楚，特寫下這篇部落格對用到的地方進行總結。

Linux中的網路相關命令

1.網絡卡配置檔案 #網絡卡配置檔案[root@lxy ~]# cat/etc/sysconfig/network-scripts/ifcfg-eth0TYPE=Ethernet#網路型別 BOOTPROTO=none#ip地址獲取方式dhcp動態靜態 staticnone NAME=eth0#網絡卡名DEVICE=eth0#裝置

網路相關

1.TCP/IP的三次握手和四次揮手三次握手: 第一次握手：客戶端向服務端傳送SYN碼資料包，表示客戶端要求和服務端建立連線；

TCP和UDP的一些概念

OSI七層模型 HTTP位於應用層，TCP和UDP位於傳輸層，IP位於網路層。 TCP和UDP的區別

網路相關複習

目錄網路整理：https://github.com/frank-lam/fullstack-tutorial/blob/master/notes/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C.md

Java虛擬機器調優（二）-一些概念(續)

背景： java虛擬機器的東西，一直想分享下，弄了半天，太過理論了，也寫不出太多特別的東西，看已經有朋友分享的很好了，還整理成了一個系統，就轉載下，希望對朋友們有用，歡迎關注老王公眾號【軟體老王】，關注不迷

Nginx相關的概念、反向代理、負載均衡、動靜分離

文章目錄一、Nginx簡介1、什麼是nginx？2、nginx做為HTTP伺服器,有以下幾項基本特性

Java虛擬機器調優（一）- 一些概念

背景： java虛擬機器的東西，一直想分享下，弄了半天，太過理論了，也寫不出太多特別的東西，看已經有朋友分享的很好了，還整理成了一個系統，就轉載下，希望對朋友們有用，歡迎關注老王公眾號【軟體老王】

Linux初學之——網路的基本概念

網路的基礎知識：網路的概念網路是由節點和連線構成，表示諸多物件及其相互聯絡。在數學上，網路是一種圖，一般認為專指加權圖。網路除了數學定義外，還有具體的物理含義，即網路是從某種相同型別的實際

網路相關知識整理

原文連結：https://www.cnblogs.com/superhin/p/12616452.html 網路模型 1、OSI有哪幾層,分別包含哪些協議?

Java 多執行緒（四）執行緒間的通訊jdk1.5中Lock,Condition----各種鎖的相關詳細概念

一.java.util.concurrent.locks包下常用的類　　下面我們就來探討一下Java.util.concurrent.locks包中常用的類和介面。

一計算機與網路安全的概念

1.1 電腦保安的概念 1.1.1 電腦保安最核心的三個關鍵目標(CIA)：保密性(Confidentiality)--①資料保密性（確保隱私或祕密不向非授權者洩密或使用）；

[網路程式設計]mqtt概念&資料包

目錄前言1. MQTT 簡介2. MQTT 通訊模型2.1 MQTT 協議2.2 MQTT 協議中的訂閱&主題&會話2.3 MQTT 協議中的方法3. MQTT 協議資料包結構3.1 固定報頭3.2 可變報頭3.3 有效載荷參考

虛擬化及雲原生的一些概念

一、虛擬化　　虛擬化是一種資源管理技術，是將計算機的各種實體資源（CPU、網路、記憶體、磁碟等）予以抽象和轉換後呈現出來，打破實體間不可切割的障礙。在實際的生產環境中，虛擬化主要解決高效能的物理硬體產能

網路相關的一些概念區分

ECharts3D地圖(詳細示例——附有具體註釋)

3D地圖圖表效果如下:

程式碼：

相關推薦