自己維護vue專案的路由跳轉歷史記錄

阿新 • • 發佈：2022-12-01

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

自己維護vue專案的路由跳轉歷史記錄

問題：公司開發一個商城，總是遇到回退到上頁面時會有很多邏輯處理，由於每個頁面都要寫回退的方法，所以總會漏掉一些判斷，導致出現很多類似的bug。

Vue專案頁面跳轉時瀏覽器視窗上方顯示進度條功能

在vue專案中，為了減少首屏載入的時間，通常會開啟路由的懶載入。路由懶載入配合gizp確實能幫助我們大大的加快首屏的載入時間。

解決vue+router路由跳轉不起作用的一項原因

如下所示： Vue.use(Router) export default new Router({ mode:\'history\',routes: [ { path: \'/\',component: Login },{ path: \'/login\',{ path: \'/register\',component: Register},{path: \'/*\',compone

vue相同路由跳轉強制重新整理該路由元件操作

想必大家在平時開發的時候可能遇到這種需求，在開啟該選單頁面的情況下，再次點選選單需要重新整理該元件（銷燬再建立）。而vue自身如果路由不變的情況下是不會這樣做的，那麼只能使用一些騷操作了。

vue中路由跳轉不計入history的操作

我就廢話不多說了，大家還是直接看程式碼吧~ <van-field label=\"選擇部門\" :value=\"arr.DepartMentName\"

vue使用路由跳轉頁面

vue中通過路由進行頁面跳轉一.使用標籤實現路由開啟 (宣告式導航)： router-link標籤會自動渲染成a標籤，該元件的屬性有：

vue中路由跳轉的方式有哪些你知道嗎

目錄第一種方式：router-link （宣告式路由）第二種方式：router.push(式路由)第三種方式：this.$router.push() (函式裡面呼叫)第四種方式：this.$router.replace() (用法同上,push)參考：總結第一種方式：router-li

Vue實現路由跳轉的幾種方式

1.this. \\(router.push( ) 跳轉到指定的URL，在history棧中新增一個記錄，點選後退會返回上一個頁面。

VUE專案打包後路由跳轉失敗解決方案（頁面跳轉空白）

技術標籤：vue 在打包好的專案資料夾內新增資料夾 WEB-INF 然後在WEB-INF資料夾內新增 web.xml檔案

「實踐篇」解決微前端 single-spa 專案中 Vue 和 React 路由跳轉問題

前言本文介紹的是在做微前端 single-spa 專案過程中，遇到的 Vue 子應用和 React 子應用互相跳轉路由時遇到的問題。

vue路由跳轉傳遞引數的方式總結

日常業務中，路由跳轉的同時傳遞引數是比較常見的，傳參的方式有三種： 1）通過動態路由方式

vue路由跳轉的方式

vue路由跳轉有四種方式 router-link this.$router.push() (函式裡面呼叫) this.$router.replace() (用法同push)

ant-vue之導航跳轉（非點選導航事件）動態監聽路由變化

在做導航時，vue-ant 導航點選事件框架互動是根據selected=[\'navitem\']來進行的繫結的selected每次點選更改navitem值即可，但是如果出現手動輸入路徑和在其它頁面點選返回，路徑變了，導航的事件和預設是不會發生

解決Vue使用bus匯流排時,第一次路由跳轉時資料沒成功傳遞問題

bus匯流排是vue中路由跳轉傳遞資料的常用方法，適用於傳遞資料不多的情況，但是在使用的過程中發現，bus匯流排在第一次路由跳轉的時候總是不能夠成功傳遞需要傳遞的資料。檢查bus的配置以及呼叫方法，均沒有出錯，錯

Vue中的路由以及預設路由跳轉

main.js import Vue from \'vue\'; import App from \'./App.vue\'; import VueRouter from \'vue-router\'; Vue.use(VueRouter);

vue 路由跳轉未匹配相應路由後，出現空白頁面，指向404頁面

1、比如我是寫在根目錄的： 2、點選跳轉到沒許可權的路由(因為沒許可權，該路由找不到，顯示空白頁)：

vue 路由跳轉

vue 路由跳轉 vue中路由跳轉宣告式：<router-link :to=\"{name:\'index\'}}\">或者<router-link to=\'/index\'>

vue href跳轉_前端開發需要了解的「路由跳轉原理」

技術標籤：vue href跳轉來自公眾號：前端下午茶連結：目前前端三傑 Angular、React、Vue 都推介單頁面應用 SPA 開發模式，在路由切換時替換 DOM Tree 中最小修改的部分 DOM，來減少原先因為多頁應用的頁

vue中路由以及動態路由跳轉

技術標籤：前端Vue 路由跳轉第一種： <router-link to=\'需要跳轉到的頁面的路徑‘>

nginx 跳轉vue重新整理報錯_vue路由跳轉常見報錯

技術標籤：nginx 跳轉vue重新整理報錯 vue路由跳轉錯誤：Error: Redirected when going from "/login" to "/index" via a navigation guard.

自己維護vue專案的路由跳轉歷史記錄

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

3D地圖圖表效果如下:

程式碼：

相關推薦