JavaScriptとTencent Mapsを利用して地図ヒートマップ表示機能を実装

JavaScript と Tencent Maps を使用してマップ ヒート マップ表示機能を実装する

マップ ヒート マップは、データをカラフルに表示する方法であり、表現することができます。データの根底にあるパターンと分布を直観的に特定します。 JavaScript と Tencent Maps を使用すると、この機能を簡単に実装できますので、この記事では、これら 2 つのツールを使用してマップ ヒート マップを作成する方法を紹介します。

1. Tencent Map API の基本概要

Tencent Map は、Web ページに地図を埋め込み、さまざまな操作を実行できる一連の API を提供します。この記事では主に Tencent Maps の JavaScript API を使用します。 Tencent Map API を使用するには、まず Tencent Map 開発プラットフォームで開発者アカウントを作成して開発者キーを取得し、API ライブラリを参照して使用を開始する必要があります。以下は、API ライブラリを参照するコード例です。

<script src="//map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

YOUR_KEY は開発者キーです。

2. ヒート マップのデータ準備

ヒート マップを作成するには、まずデータを準備する必要があります。データ形式は、以下に示すように、経度、緯度、重みを含む配列です。 ##

var heatmapData = [
  {lng:116.191031, lat:39.988585, count:10},
  {lng:116.389275, lat:39.925818, count:20},
  {lng:116.287444, lat:39.810742, count:30},
  // more data points...
];

マップ コンテナーの作成

<div id="container"></div>

ログイン後にコピー

マップ オブジェクトの初期化

var map = new qq.maps.Map(document.getElementById("container"), {
  center: new qq.maps.LatLng(39.916527,116.397128),
  zoom: 13
});

ログイン後にコピー

ヒート マップ オブジェクトの作成

var heatmap = new qq.maps.visualization.HeatmapLayer({
  map: map,
  dissipating: true,
  radius: 20,
  opacity: 0.8,
  gradient: qq.maps.visualization.HeatmapLayer.getGradient([
    "rgba(0, 0, 255, 0)",
    "rgba(0, 255, 255, 1)",
    "rgba(0, 255, 0, 1)",
    "rgba(255, 255, 0, 1)",
    "rgba(255, 0, 0, 1)"
  ]),
  data: heatmapData
});

ログイン後にコピー

ヒート マップの表示

heatmap.setMap(map);

ログイン後にコピー

  
  
  
  <script src="//map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>



  <div id="container"></div>
  <script>
    var heatmapData = [
      {lng:116.191031, lat:39.988585, count:10},
      {lng:116.389275, lat:39.925818, count:20},
      {lng:116.287444, lat:39.810742, count:30},
      // more data points...
    ];
    
    var map = new qq.maps.Map(document.getElementById("container"), {
      center: new qq.maps.LatLng(39.916527,116.397128),
      zoom: 13
    });

    var heatmap = new qq.maps.visualization.HeatmapLayer({
      map: map,
      dissipating: true,
      radius: 20,
      opacity: 0.8,
      gradient: qq.maps.visualization.HeatmapLayer.getGradient([
        "rgba(0, 0, 255, 0)",
        "rgba(0, 255, 255, 1)",
        "rgba(0, 255, 0, 1)",
        "rgba(255, 255, 0, 1)",
        "rgba(255, 0, 0, 1)"
      ]),
      data: heatmapData
    });

    heatmap.setMap(map);
  </script>

以上がJavaScriptとTencent Mapsを利用して地図ヒートマップ表示機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。