如何在程序中添加 React 地图组件

MESCIUS 的 Wijmo FlexMap 是一个功能丰富的库，它使 Web 开发人员能够毫不费力地创建令人惊叹的交互式地图。在本博客中，我们将深入探讨 Wijmo FlexMap 的功能，特别是 ScatterMapLayer 组件的功能。我们的目标是创建一张引人入胜的世界地图，将机场位置可视化，展示 FlexMap 如何在 react 应用程序中将地理数据转化为引人注目的视觉效果。

FlexMap 在地图创建方面的简便性和灵活性使其脱颖而出，是寻求将地图无缝集成到应用程序中的开发人员的理想选择。让我们探讨一下 FlexMap 为什么能改变游戏规则。

直观的应用程序接口设计

FlexMap拥有直观的api设计，可简化地图绘制过程。开发人员可以毫不费力地配置图层、自定义样式并轻松处理数据绑定。

地理背景的 GeoMapLayer

FlexMap 中的 GeoMapLayer 为地理背景提供了坚实的基础。通过整合该层，我们建立了世界地图的画布，确保了国家表示的准确性和精确性。

在添加该层之前，您需要 geoJSON 数据。有很多方法可以获得这些数据；例如，您可以查看 "自然地球 "并下载他们的文件。获得数据后，将其保存为应用程序中的 .json 文件。

您的 geoJSON 数据应该是这样的：

{
  "type": "FeatureCollection",
  "name": "ne_110m_admin_0_countries",
  "crs": {
    "type": "name",
    "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" }
  },
  "features": [
    {
      "type": "Feature",
      "properties": {
        "featurecla": "Admin-0 country",
...

可视化数据的 ScatterMapLayer

散点图层（scatterMapLayer）功能可让我们通过动态可视化数据点为地图注入活力。在本例中，我们将利用 ScatterMapLayer 来展示全球各地的机场位置。

使用 ScatterMapLayer 构建 React 世界地图

现在，让我们深入了解使用 FlexMap 构建 React 应用程序的过程，重点是使用 ScatterMapLayer 和机场位置数据。如果您想参考博客代码，请点击此处。

设置项目

首先使用创建 React 应用程序（Create React App）设置一个新的 React 项目：

npx create-react-app flexmap-demo

设置完成后，安装 Wijmo FlexMap：

npm install @grapecity/wijmo.react.all

创建 FlexMap。在 src 文件夹中创建 WorldMap.js 组件。插入以下代码：

import React from "react";
import {
  FlexMap,
  GeoMapLayer,
  ScatterMapLayer,
} from "@grapecity/wijmo.react.chart.map";

const WorldMap = ({ data }) => {
  return (
    <FlexMap itemsSource={[]}>
    </FlexMap>
  );
};

export default WorldMap;

添加 geoJSON 和 GeoMapLayer。itemsSource 属性将把 geoJSON 数据绑定到 geoMapLayer：

import earth from "./data/natural-earth-vector.json";

const WorldMap = ({ data }) => {
  return (
    <FlexMap itemsSource={[]}>
      <GeoMapLayer itemsSource={earth} />
    </FlexMap>
  );
};

添加 scatterMapLayer：

const WorldMap = ({ data }) => {
  return (
    <FlexMap itemsSource={[]}>
      <GeoMapLayer itemsSource={earth} />
      <ScatterMapLayer itemsSource={data} binding="coordinates" />
    </FlexMap>
  );
};

在 src/App.js 中将 WorldMap 组件和机场数据整合到主程序中：

import React from "react";
import WorldMap from "./WorldMap";
import airports from "./data/airports.json";
import "@grapecity/wijmo.styles/wijmo.css";

function App() {

  return (
    <div className="App">
      <h1>FlexMap Demo</h1>
      <WorldMap data={airports} />
    </div>
  );
}

export default App;

运行 React 应用程序

npm start

当您访问 http://localhost:3000 时，您应该能看到这样一幅栩栩如生的地图。

总结

总之，Wijmo FlexMap 的多功能性和 ScatterMapLayer 的动态功能提升并简化了开发人员的制图体验。

事实证明，无论是可视化机场位置还是其他地理数据，FlexMap 都是在应用程序中创建引人入胜、信息丰富的地图不可或缺的工具。利用 FlexMap 的强大功能，您可以毫不费力地将数据转化为引人注目的可视化效果。

链接: https://www.fly63.com/article/detial/12667