Echarts散點結合百度地圖使用方法

時間 2020-05-31

標籤 echarts 結合百度地圖使用方法简体版

原文原文鏈接

　　因項目需求，須要作一個經銷商在區域內的分佈狀況，須要用Echarts散點圖配合百度地圖的實景圖來達到效果，看了下百度地圖文檔，未找到相關於Echarts的相關擴展，Echarts這很容易的找到了應用的放大。css

　　下面是Echarts關於如何使用的介紹（固然是貼圖啦）　html

　　主要核心文件是Echarts.js/bmap.js/百度地圖的祕鑰及key碼。我用了jQ，不喜歡的小夥伴也能夠有源生。jquery

　　話很少說：直接奉上源碼，方便急需的小夥伴。git

　　htmlgithub

 1 <html>
 2 
 3 <head>
 4   <meta charset="utf-8">
 5   <script src="http://api.map.baidu.com/api?v=2.0&ak=您的key值"></script>
 6   <script src="./jquery.min.js"></script>
 7   <script src="./echarts.js"></script>
 8   <script src="./bmap.js"></script>
 9   <style type="text/css">
10  body {
11  margin: 0;
12     }
13 
14  #main {
15  height: 100%;
16     }
17 
18     /*去除百度地圖LOGO */
19 
20  #main .BMap_cpyCtrl{
21  display: none;
22     }
23 
24  #main .anchorBL{
25  display: none;
26     }
27   </style>
28 </head>
29 
30 <body>
31   <div id="main"></div>
32 <!-- 案例的js代碼 -->
33   <script src="./example.js"></script>
34 </body>
35 
36 </html>

js部分（example.js）:api

var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ tooltip: { trigger: 'item', formatter: function (params) { var res = ''; res += params.data.name + '<br/>'; res += "我就：" + params.data.options.obj1 + '<br/>'; return res } }, legend: { bottom: 10, data: ['合做社', '涉農企業'], backgroundColor: '#fff' }, bmap: { center: [117.208714, 37.325947], zoom: 7, roam: true, }, series: [{ name: '合做社', type: 'scatter', coordinateSystem: 'bmap', zlevel: 9, z: 9, data: [{ name: '12313123', options: { obj1: '哈哈' }, value: [117.208714, 37.325947, 1] }] }, { name: '涉農企業', type: 'scatter', coordinateSystem: 'bmap', zlevel: 9, z: 9, data: [{ name: '3435535', options: { obj1: '啦啦啦' }, value: [117.328714, 37.325947, 1] }] } ] }); // 得到百度地圖實例對象
var bmap = myChart.getModel().getComponent('bmap').getBMap(); //地圖圖層切換控件
bmap.addControl(new BMap.MapTypeControl()); // 設置中心點及縮放級別
bmap.centerAndZoom(new BMap.Point(117.208714, 37.325947), 10); // 開啓滾輪縮放
bmap.enableScrollWheelZoom(); //設置地圖默認圖層（實景）
bmap.setMapType(BMAP_HYBRID_MAP);//BMAP_NORMAL_MAP(展現普通街道視圖)/BMAP_PERSPECTIVE_MAP(展現透視圖像視圖)/BMAP_SATELLITE_MAP(展現衛星視圖)/BMAP_HYBRID_MAP(展現衛星和路網的混合視圖) //縮放大小限制
bmap.setMinZoom(8); bmap.setMaxZoom(12); // 行政區劃展現
function getBoundary(data) { var bdary = new BMap.Boundary(); // 這裏填寫要展現的行政區劃
  bdary.get(data, function (rs) { //獲取行政區域 
    var count = rs.boundaries.length; //行政區域的點有多少個
    if (count === 0) { alert('未能獲取當前輸入行政區域'); return; } var pointArray = []; for (var i = 0; i < count; i++) { var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //創建多邊形覆蓋物
      bmap.addOverlay(ply); //添加覆蓋物
      pointArray = pointArray.concat(ply.getPath()); } bmap.setViewport(pointArray); //調整視野 
 }); } getBoundary("商河縣"); // 這裏傳參可同時渲染多個省市的行政區劃 // getBoundary("臨邑縣");