Leaflet工作笔记-GIS地图上构造echarts的3D图
生活随笔
收集整理的這篇文章主要介紹了
Leaflet工作笔记-GIS地图上构造echarts的3D图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這里要實現的是這樣的效果：
在地圖上有一個柱子，3D的，直接顯示，而不是使用什么label或者點擊，在界面上顯示。
原理如下：
1.使用leaflet的marker標簽，插入一個html；
2.在這個html中設置css，將其background-color設置為transparent；并設置ID
3.把echarts直接初始化到剛剛那個ID上面
源碼如下：
<!DOCTYPE html> <html> <head><title>Quick Start - Leaflet</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /><link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/><script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script><script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script><script src="https://www.echartsjs.com/examples/vendors/echarts-gl/echarts-gl.js"></script></head> <body><div id="mapid" style="width: 600px; height: 400px;"></div> <script>var mymap = L.map('mapid').setView([51.505, -0.09], 13);L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {maxZoom: 18,attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +'Imagery ? <a href="https://www.mapbox.com/">Mapbox</a>',id: 'mapbox/streets-v11'}).addTo(mymap);//第一個 原始echartvar cMark1=L.marker([51.505, -0.09], {icon:L.divIcon({className:'leaflet-echart-icon',iconSize:[160,160],html:'<div id="echart1" style="width:160px;height:160px;position:relative;background-color:transparent;"></div>'})}).addTo(mymap);var myChart = echarts.init(document.getElementById('echart1'));let hours = [ '1a', '2a', '3a', '4a', '5a'];let days = ['Saturday'];let option = {xAxis3D: {type: 'category',data: hours},yAxis3D: {type: 'category',data: days},zAxis3D: {type: 'value'},grid3D: {viewControl: {// autoRotate: true},light: {main: {shadow: true,quality: 'ultra',intensity: 1.5}}},tooltip: {},legend: {data: ['一檔', '二檔','三檔','四檔','五檔']},series: [{type: 'bar3D',name: "一檔",data: [[0, 2, 20], [1, 2, 2], [2, 2, 2], [3, 2, 2], [4, 2, 2]],stack: 'stack',shading: 'lambert',emphasis: {label: {show: true}}},{type: 'bar3D',name: "二檔",data: [[0, 2, 2], [1, 2, 20], [2, 2, 2], [3, 2, 2], [4, 2, 2]],stack: 'stack',shading: 'lambert',emphasis: {label: {show: false}}}]}myChart.setOption(option);//第二個 去網格及坐標var cMark2=L.marker([51.505, -0.06], {icon:L.divIcon({className:'leaflet-echart-icon',iconSize:[160,160],html:'<div id="echart2" style="width:160px;height:160px;position:relative;background-color:transparent;"></div>'})}).addTo(mymap);var myChart2 = echarts.init(document.getElementById('echart2'));let hours2 = [ '1a', '2a', '3a', '4a', '5a'];let days2 = ['Saturday'];let option2 = {xAxis3D: {type: 'category',data: hours2,},yAxis3D: {type: 'category',data: days2,},zAxis3D: {type: 'value',},grid3D: {show: false,viewControl: {// autoRotate: true},light: {main: {shadow: true,quality: 'ultra',intensity: 1.5}}},legend: {data: ['一檔', '二檔','三檔','四檔','五檔']},series: [{type: 'bar3D',name: "一檔",data: [[0, 2, 20], [1, 2, 2], [2, 2, 2], [3, 2, 2], [4, 2, 2]],stack: 'stack',shading: 'lambert',emphasis: {label: {show: false}}},{type: 'bar3D',name: "二檔",data: [[0, 2, 2], [1, 2, 20], [2, 2, 2], [3, 2, 2], [4, 2, 2]],stack: 'stack',shading: 'lambert',emphasis: {label: {show: false}}}]}myChart2.setOption(option2);//第三個 去除網格以及去頭部var cMark3=L.marker([51.505, -0.03], {icon:L.divIcon({className:'leaflet-echart-icon',iconSize:[160,160],html:'<div id="echart3" style="width:160px;height:160px;position:relative;background-color:transparent;"></div>'})}).addTo(mymap);var myChart3 = echarts.init(document.getElementById('echart3'));let hours3 = [ '1a', '2a', '3a', '4a', '5a'];let days3 = ['Saturday'];let option3 = {xAxis3D: {type: 'category',data: hours3,},yAxis3D: {type: 'category',data: days3,},zAxis3D: {type: 'value',},grid3D: {show: false,viewControl: {// autoRotate: true},light: {main: {shadow: true,quality: 'ultra',intensity: 1.5}}},legend: {data: ['一檔', '二檔','三檔','四檔','五檔']},series: [{type: 'bar3D',data: [[0, 2, 20], [1, 2, 2], [2, 2, 2], [3, 2, 2], [4, 2, 2]],stack: 'stack',shading: 'lambert',emphasis: {label: {show: false}}},{type: 'bar3D',data: [[0, 2, 2], [1, 2, 20], [2, 2, 2], [3, 2, 2], [4, 2, 2]],stack: 'stack',shading: 'lambert',emphasis: {label: {show: false}}}]}myChart3.setOption(option3);</script></body> </html>注意，目前是2020年2月10日 09:53:28，這個是瘟疫橫行的時候，墻也高了很多，如果echarts加載不出來
替換這個cdn就可以了。
?
總結
以上是生活随笔為你收集整理的Leaflet工作笔记-GIS地图上构造echarts的3D图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Qt文档阅读笔记-官方2D Painti
- 下一篇： yml的基本语法，以及java读取yml