Angular中echarts與百度地圖的結合使用(二)

阿新 • • 發佈：2019-01-17

調整部分：

(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自適應顯示地圖

引用百度地圖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  <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

Angular中echarts與百度地圖的結合使用(二)

相關推薦