Angular中echarts與百度地圖的結合使用(二)
調整部分:
(1)解決拖拽地圖後echarts與地圖分層現象;
(2)通過echarts的事件觸發替換百度地圖的標記事件觸發。
程式碼如下:
import { Component, OnInit } from '@angular/core'; declare var BMap, echarts: any; declare var BMAP_ANCHOR_TOP_LEFT: any; @Component({ selector: 'app-echarts-topo', templateUrl: './echarts-topo.component.html', styleUrls: ['./echarts-topo.component.scss'] }) export class EchartsTopoComponent implements OnInit { // 模擬標記資料 buildData = [ { 'long': 116.404177, 'lat': 39.909652, 'address': '天安門廣場' }, { 'long': 116.407851, 'lat': 39.91408, 'address': '天安門東' }, { 'long': 116.39805, 'lat': 39.913776, 'address': '天安門西' } ]; // 模擬遷徙效果資料-效果圖一 echartsDatas = [ { fromName: '北京', toName: '廣州', coords: [[116.404, 39.915], [113.5107, 23.2196]] }, { fromName: '北京', toName: '印度', coords: [[116.404, 39.915], [80.158246, 22.870061]] }, { fromName: '北京', toName: '巴基斯坦', coords: [[116.404, 39.915], [68.121138, 29.763922]] } ]; // 模擬遷徙效果資料-效果圖二 echartsDatas1 = [ { fromName: '天安門', toName: '首都機場', coords: [[116.404, 39.915], [116.611579, 40.086312]] }, { fromName: '天安門', toName: '南苑機場', coords: [[116.404, 39.915], [116.400712, 39.790456]] } ]; myChart; map; changeFlag; constructor() { } ngOnInit() { this.myChart = echarts.init(document.getElementById('main')); this.myChart.setOption(this.setOptions([70.473184, 24.041486], 4, this.setSeries(this.echartsDatas, [])), true); this.map = this.myChart.getModel().getComponent('bmap').getBMap(); this.setMap(this.map); // echarts中事件的處理。 // 更多請參考 https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-7o3u28yh.html this.myChart.on('click', (params) => { if (params.componentType === 'series') { if (params.seriesType === 'effectScatter') { // 點選散點圖事件 const markerPoint = new BMap.Point(params.value[0], params.value[1]); this.map.centerAndZoom(markerPoint, this.changeFlag); } else if (params.seriesType === 'scatter') { } } }); } setSeries(echartsData, buildData) { const series = []; if (echartsData.length > 0) { echartsData.map(function (Item) { series.push( { name: Item.fromName + '>>>' + Item.toName, type: 'lines', coordinateSystem: 'bmap', zlevel: 1, animation: false, effect: { show: true, period: 6, trailLength: 0.7, symbolSize: 3, color: '#fff' }, lineStyle: { normal: { width: 0, curveness: 0.2 } }, data: echartsData }, { type: 'lines', coordinateSystem: 'bmap', zlevel: 2, effect: { show: true, period: 6, trailLength: 0, symbol: 'arrow', symbolSize: 10 }, lineStyle: { normal: { color: '#C82C2B', width: 1, opacity: 0.4, curveness: 0.2 } }, data: echartsData }, { name: Item.fromName, type: 'effectScatter', coordinateSystem: 'bmap', zlevel: 2, rippleEffect: { brushType: 'stroke' }, tooltip: { formatter: function (params) { const res = params.name; return res; }, }, label: { normal: { show: true, position: 'right', formatter: '{b}' } }, symbolSize: 30, showEffectOn: 'render', itemStyle: { normal: { color: '#C82C2B' } }, data: [{ name: Item.fromName, value: Item.coords[0] }] }, { type: 'effectScatter', coordinateSystem: 'bmap', zlevel: 2, rippleEffect: { brushType: 'stroke' }, tooltip: { formatter: function (params) { const res = params.name; return res; }, }, label: { normal: { show: true, position: 'right', formatter: '{b}' } }, symbolSize: 15, itemStyle: { normal: { color: '#C82C2B' } }, data: echartsData.map(function (dataItem) { return { name: dataItem.toName, value: dataItem.coords[1] }; }) }); }); } if (buildData.length > 0) { series.push( { type: 'scatter', coordinateSystem: 'bmap', symbolSize: 20, data: buildData.map(function (dataItem) { return { name: dataItem.address, value: [dataItem.long, dataItem.lat] }; }), tooltip: { formatter: function (params) { const res = params.name; return res; }, }, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { borderColor: '#fff', color: '#ebe62b', } } }); } return series; } setOptions(center, zoom, series) { const option = { tooltip : { trigger: 'item' }, bmap: { center: center, zoom: zoom, roam: true, mapStyle: { 'styleJson': [ { 'featureType': 'water', 'elementType': 'all', 'stylers': { 'color': '#103446' } }, { 'featureType': 'land', 'elementType': 'geometry', 'stylers': { 'color': '#1E2D1E' } }, { 'featureType': 'highway', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'arterial', 'elementType': 'geometry.fill', 'stylers': { 'color': '#1E2D1E' } }, { 'featureType': 'arterial', 'elementType': 'geometry.stroke', 'stylers': { 'color': '#0b3d51' } }, { 'featureType': 'local', 'elementType': 'geometry', 'stylers': { 'color': '#1E2D1E' } }, { 'featureType': 'railway', 'elementType': 'geometry.fill', 'stylers': { 'color': '#1E2D1E' } }, { 'featureType': 'railway', 'elementType': 'geometry.stroke', 'stylers': { 'color': '#08304b' } }, { 'featureType': 'subway', 'elementType': 'geometry', 'stylers': { 'lightness': -70 } }, { 'featureType': 'building', 'elementType': 'geometry.fill', 'stylers': { 'color': '#1E2D1E' } }, { 'featureType': 'all', 'elementType': 'labels.text.fill', 'stylers': { 'color': '#857f7f' } }, { 'featureType': 'all', 'elementType': 'labels.text.stroke', 'stylers': { 'color': '#1E2D1E' } }, { 'featureType': 'building', 'elementType': 'geometry', 'stylers': { 'color': '#1E2D1E' } }, { 'featureType': 'green', 'elementType': 'geometry', 'stylers': { 'color': '#0d2d1a' } }, { 'featureType': 'boundary', 'elementType': 'all', 'stylers': { 'color': '#3e6c60' } }, { 'featureType': 'manmade', 'elementType': 'all', 'stylers': { 'color': '#1E2D1E' } } ] } }, animation: false, // 解決拖拽地圖後,echarts效果亂跑現象 series: series }; return option; } // 設定地圖 setMap(map) { setInterval(function() { map.closeInfoWindow(); }, 1); map.enableScrollWheelZoom(true); // 城市切換 map.addControl(new BMap.CityListControl({ anchor: BMAP_ANCHOR_TOP_LEFT, })); map.addEventListener('zoomend', () => { // 監聽地圖縮放 this.funcAddMapMaker(map); }); this.funcAddMapMaker(map); } funcAddMapMaker (map) { const flag = map.getZoom(); const centerLoc = [map.getCenter().lng, map.getCenter().lat]; if ( flag < 11 ) { this.myChart.setOption(this.setOptions(centerLoc, flag, this.setSeries(this.echartsDatas, []))); this.changeFlag = 12; } else if (flag >= 11 && flag < 16 ) { this.myChart.setOption(this.setOptions(centerLoc, flag, this.setSeries(this.echartsDatas1, []))); this.changeFlag = 17; } else { this.myChart.setOption(this.setOptions(centerLoc, flag, this.setSeries([], this.buildData))); } } }
相關推薦
Angular中echarts與百度地圖的結合使用(二)
調整部分:(1)解決拖拽地圖後echarts與地圖分層現象;(2)通過echarts的事件觸發替換百度地圖的標記事件觸發。程式碼如下:import { Component, OnInit } from '@angular/core'; declare var BMap, ec
百度地圖結合ECharts實現複雜覆蓋物(Overlay)
先來看效果圖 一 前置知識 官方Overlay-覆蓋物的抽象基類 方法 返回值 描述 initialize(map: Map) HTMLElement 抽象方法,用於初始化覆蓋物,當呼叫map.addOverlay時,API將呼叫此方法。自定義覆蓋物時需要實現此方法。自定義覆蓋物時需要將
Android百度地圖(二)結合方向傳感器我們自己定位哪裏走
troy 真機 pretty 刪除文件 RR tap 大神 素材 near Android百度地圖(二)結合方向傳感器我們自己定位哪裏走 本文代碼在http://b
Android:禁止viewpager左右滑動,去除viewpager切換時動畫,解決viewpager與百度地圖滑動衝突
Android自定義viewpager,禁止viewpager左右滑動,去除viewpager切換時動畫,解決viewpager與百度地圖滑動衝突 public class CustomViewPager extends ViewPager { private boolean e
ViewPager與百度地圖衝突的純淨解決方案
有這樣一個需求場景,要用百度地圖,且要放在Fragment中,百度地圖左右拖動就會和ViewPager的滑動事件衝突,這類似兩可拖動控制元件的衝突,網上的方法大致如下: 1、父View繼承ViewPager,重寫方法,如: public class CustomViewP
ViewPager與百度地圖的滑動衝突
public class ViewPagerCompat extends ViewPager { public ViewPagerCompat(Context context) {
swift 百度地圖載入與百度地圖電子圍欄載入
最近在寫百度地圖電子圍欄載入,研究原始碼,也花了一些時間。1、百度電子圍欄整體思路 1)使用者創造實體,賦予監控許可權 2)對該實體創造電子圍欄,有服務端和本地端兩種方式,先創造實體,上傳到的伺服器中。在對實體創造電子圍欄,伺服器端的有多邊形,圓形,本地端的只有圓
百度地圖API二:根據標註點坐標範圍計算顯示縮放級別zoom自適應顯示地圖
max zoom 天地圖 功能 center 經緯 通過 極值 template 原文:百度地圖API二:根據標註點坐標範圍計算顯示縮放級別zoom自適應顯示地圖 版權聲明:本文為博主原創文章,轉載請註明出處。 https://blo
引用百度地圖api二次載入地圖錯位
所做的網頁需要有百度地圖的功能。 於是引用了百度地圖,但是在初始化地圖的時候遇到了一個問題。 初始化的地圖中心點不正確。所標記的定位如果是第一次載入的話,定位是正確的。 但如果沒有清快取就進行第二次載入的話,這個定位一開始雖然是在地圖的最中間,但是由於初始定位不正確,一開始標記的定位也不
百度地圖SDK(二)——簡單地圖和定位demo
MainActivity程式碼如下:package com.example.administrator; import android.content.Intent; import android.os.Bundle; import android.support.v7.ap
Vue專案實戰引入百度地圖(二)
一、在 http://lbsyun.baidu.com/ 申請 祕鑰 二、在index.html檔案中引入 <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=Fh9X4h
第三方SDK:百度地圖(二)定位 + 鷹眼軌跡
#1 基礎地圖 + 基礎定位# 可以看到地圖的介面。 如圖: Menu: <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app
百度地圖與echarts結合
可以直接引入打包好的擴充套件檔案和百度地圖的 jssdk <!--引入百度地圖的jssdk,這裡需要使用你在百度地圖開發者平臺申請的 ak--> <script src="http://api.map.baidu.com/api?v=2.0&am
百度地圖和高德地圖結合在web中的使用(二)
百度地圖在web中的使用(二) 背景:在做一個關於地理位置欄位時,初始位置使用百度地圖獲取時失敗,獲取的位置資訊不準確,奈何產品說友商好使的啊,F12看後是採用的高德,所以在這採用高德地圖獲取初始位置,其他的還是用百度地圖 註冊高德,建立例項,獲取key值 引入js 高德地圖獲取獲取當前
百度地圖標註及結合ECharts圖譜資料視覺化
本示例中根據企業位置經緯度,在頁面右側百度地圖中標註企業名稱。同時頁面左側ECharts圖譜餅狀圖用於統計企業行業與註冊資本。當右側百度地圖縮放拖拽,左側ECharts圖譜根據右側地圖上出現的企業動態變化。詳細過程如下兩圖所示: 本示例
百度地圖與HT for Web結合的GIS網路拓撲應用
在《HT for Web整合OpenLayers實現GIS地圖應用》篇中介紹了HT for Web與OpenLayers的整合,不少朋友反應國內用得比較多的還是百度地圖,雖然HT整合百度地圖原理與OpenLayers一致,但不同GIS引擎客戶端結合程式碼細節還是有不少差異
react專案結合echarts,百度地圖實現熱力圖
一.最近在一個react專案(antd pro)中需要展示一個熱力地圖。需求是: 1.熱力地圖可縮放; 2.滑鼠點選可以展示該點地理座標,及熱力值。 3.初始化時候自適應展示所有的熱力點。 4.展示熱力標尺。 二.在實現的過程中出現了不少的問題. 引入地圖出現問題1.縮放地圖的時候中心點會漂移。
在混合app開發過程中使用百度地圖api的出現坐標偏差的解決
百度 api call cordova overlay forum gpo ext ddr 在項目中使用ngCordova的$cordovaGeolocation模塊獲取當前位置經緯度,當展示在百度地圖中時發現有誤差(我的測試誤差為1.7公裏左右),查資料發現百度地圖經緯度
js中實現高德地圖坐標經緯度轉百度地圖坐標
math.sqrt pan poi 結果 mat blog 筆記 百度 說明 1 function tobdMap(x, y) { 2 var x_pi = 3.14159265358979324 * 3000.0 / 180.0; 3
vue中實現百度地圖拖拽地圖定位功能
.com 元素 偏移量 locals 進行 函數 nco 查看 page 效果如果所示,拖動地圖。中間圖標不動,並且自動獲取地圖當前中心點的經緯度。然後就可以用經緯度做其他的操作了。。。首先查看了百度地圖的api。能實現這個功能最貼近的就是marker。marker