个人中心
gpt4 book ai didi

javascript - React-leaflet 如何动态改变矩形颜色？

转载 作者：行者123 更新时间：2023-11-30 19:51:39 24 4
gpt4 key购买 nike

渲染完 Map 后，我创建了一系列 API 调用，并根据结果构造了 Rectangles。然后，我根据用户希望看到的比例更改 Rectangle 的颜色。使用 vanilla js 这很容易，因为我只保留对所有 Rectangles 的引用并更新颜色属性。但是使用 react-leaflet 我看不到做同样事情的方法。

HTML(此处为传单 CSS)

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />

    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <!-- Fullscreen plugin CSS-->
    <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' crossorigin="anonymous" />
  </head>
  <body>

  <div id='app'></div>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 </body>

</html>

索引.js

import React from 'react';
import ReactDom from 'react-dom';
import App from './components/App';

const appContainer = document.getElementById('app');

ReactDom.render(<App />, appContainer);

App.js(对于这个演示来说有点不必要，但我稍后会添加更多)

import React from 'react';
import MapController from './MapController';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
  }

 render() {
    return (
      <MapController />
    );
  }
}

export default App;

MapController.js - 添加功能的 Map 组件包装器

import React from 'react';
import {
  Map, ImageOverlay,
} from 'react-leaflet';
import { CRS } from 'leaflet';
import '../lib/leaflet-fullscreen';

  componentDidMount() {
    //After the map renders, start calling the API to create triangles
    this.createColorCodedPriceOverlays();
  }


  async createColorCodedPriceOverlays() {
      const pageSize = 100;
      let startingIndex = 0;
      const apiCalls = [];

      // Need to get the first batch to determine how many listings exist
      // getListings will update the Map on state and return a promise that
      // resolves to the total number of records that exist
      const total = await this.getListings(startingIndex);

      // Create the calls needed to get all parcels for sale
      while (startingIndex <= total) {
      startingIndex += pageSize;
      apiCalls.push(this.getListings(startingIndex));
 }

      Promise.all(apiCalls);
  }

  //Call api and create batch of Rectangles from the results
  async getListings(startingIndex) {
    const response = await fetch('www.foobarApi.io/batchx');
    const json = await response.json();
    const { parcels, total } = json.data;
    let price = (parcels[0] && parcels[0].publication) ?parcels[0].publication.price : undefined;
    const parcelRectangles = [];
    let rect;
    let i = 0;

    parcels.forEach((parcel) => {
    price = parcel.publication.price;

    //Create the <Rectangle
    //Simplified, usually dynamically set color
    rect = (<Rectangle bounds={[[0,0],[100,100]]} color="white" />)


    parcelRectangles.push(rect);
    i += 1;
  });

//Set the generated Rectangles on the State so I can get them later
this.setState((prevState) => {
  const allParcels = prevState.parcels ? [...prevState.parcels, ...parcelRectangles] : parcelRectangles;
  const totalParcelsRetrieved = prevState.totalParcelsRetrieved + parcelRectangles.length;

  return { parcels: allParcels, totalParcelsRetrieved };
});

return total;
  }

onValueChange(event) {
/ **
*  So now the user changed some values and I want to alter
* the color property of the <Rectangles> I have stored in
* the state. But I don't have anyway of doing this.
*/
}

render() {
    return (
        <div className="container-fluid">
            <div className="row map-row">
               <Map
                 center={[0, 0]}
                 zoom={3}
                 crs={L.CRS.Simple}
                 minZoom={1}
                 maxZoom={10}
                 bounds={[[-150.5, -150.5], [150.5, 150.5]]}
                 maxBounds={[[-150.5, -150.5], [150.5, 150.5]]}
                 maxBoundsViscosity={2.0}
                 fullscreenControl
                 attributionControl={false}
                 style={{ height: '100%', width: '100%' }}
            >
           //Stored Rectangles on the state to try and update them later
              {this.state.parcels}
              </Map>
              <UserControlsComponent onValueChange={this.onValueChange.bind(this)}/>
            </div>
        </div>
    );
}

最佳答案

与其保留对矩形实例的引用，我建议通过状态管理矩形属性。让我们假设矩形数组的初始数据表示为以下格式:

[
    {
      name: "Rectangle 1",
      color: "white",
      bounds: [[10., 0.0], [20.0, 15.0]]
    },
    //...
]

下面的组件用于渲染矩形列表:

const RectangleList = ({ data }) => {
  return (
    <span>
      {data.map((item, i) => {
        return <Rectangle key={i} bounds={item.bounds} color={item.color} />;
      })}
    </span>
  );
}

下面的例子演示了如何根据外部事件修改矩形颜色:

class MapExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: items
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(){
    const items = [...this.state.items];
    items[0].color = "red";
    this.setState({ items: items });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Change color</button>
        <Map center={this.props.center} zoom={this.props.zoom}>
          <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
          <RectangleList data={items} />
        </Map>
      </div>
    );
  }
}

Here is a demo供大家引用

关于javascript - React-leaflet 如何动态改变矩形颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54412980/

24 4 0
文章推荐： c# - 如何锁定一个窗口到另一个？ [窗体]
文章推荐： c - CodeBlocks 中的 Free 函数非常慢
文章推荐： 当 makefile 调用 GCC 时，C 程序不会在没有警告的情况下编译 - 否则可以工作
文章推荐： c# - 直接使用 LINQ 修改值？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com