Mapbox のヒート マップ実装チュートリアル

ヒート マップは、maobox のテーマ マップの一種で、ポイントの色と重みを使用して、ポイントとその周囲のインジケーターをレンダリングします。この記事では、maobox を使用してヒート マップ機能を実装する方法を説明します。

 例として、全国の有名なお茶の産地トップ 10 の温度指標を使用して、上の図のような効果を作成してみましょう。

まず、関連するポイント データが必要です。
 

var tentea = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {
        name: "西湖龙井",
        dis: "杭州市西湖区",
        temp: 19.21,
        rank: 2,
      },
      geometry: {
        type: "Point",
        coordinates: [120.07637104262216, 30.110987373108287],
      },
    },
    {
      type: "Feature",
      properties: {
        name: "安溪铁观音",
        dis: "泉州市安溪县",
        temp: 19.03,
        rank: 3,
      },
      geometry: {
        type: "Point",
        coordinates: [117.93324898736677, 24.798769462568657],
      },
    }