我正在使用Leaflet(通过react-leaflet)开发应用程序.Leaflet直接操作DOM.react-leaflet库不会改变它,它只是为您提供了React组件,您可以使用这些组件以反应友好的方式控制Leaflet映射.

在这个应用程序中,我想使用自定义地图标记,这些标记是包含一些简单元素的div.在Leaflet中执行此操作的方法是将标记的icon属性设置为DivIcon,您可以在其中设置自定义HTML.您可以通过将DivIcon的html属性设置为包含HTML的字符串来设置内部HTML.就我而言,我希望从React组件呈现HTML.

为了做到这一点,似乎正确的方法是使用ReactDOMServer.renderToString()在地图标记内将我想要的Component渲染成一个字符串,然后我将其设置为htmlDivIcon 的属性:

MyMarker.js:

import React, { Component } from 'react'
import { renderToString } from 'react-dom/server'
import { Marker } from 'react-leaflet'
import { divIcon } from 'leaflet'

import MarkerContents from './MarkerContents'

export class MyMarker extends Component {
  render() {
    const markerContents = renderToString(<MarkerContents data={this.props.data} />)
    const myDivIcon = divIcon({
      className: 'my-marker',
      html: markerContents
    })

    return (
      <Marker
        position={this.props.position}
        icon={myDivIcon} />
    )
  }
} …

情况

我有一个React/Redux应用程序在地图上显示标记,并根据当前缩放级别的近距离将它们分组到群集中(类似于此示例 - 我的应用程序与此示例略有不同,因为地图上的群集将显示来自其子标记的特定数据,而不仅仅是儿童标记的总数).

我预计会经常添加新标记,应用程序会更新以实时显示新标记.

React组件结构如下所示:

<Map>
  <Cluster markerIds=[...] />
  ...
</Map>

因此,每次a)将新标记添加到地图时,地图会重新渲染相应的聚类,以及b)地图的缩放级别更改.

我正在尝试确定在Redux状态树中组织此数据的最佳方法.

选项1:简单方法

一种选择是保持状态树非常简单,并让UI根据需要处理所有集群逻辑:

{
  markers: {
    1: { name: 'Bob', location: [-40.08, 37.62] },
    2: { name: 'Steve', location: [51.08, -25.62] },
    ...
  }
}

如果我以这种方式组织状态,则UI必须遍历每个标记并在每次缩放级别更改时重新计算可见群集.有了大量的标记,这可能会导致大量的重新计算,我预计用户在使用此应用程序时会进行大量的放大和缩小.

选项2:为每个缩放级别存储群集组

另一种选择是将群集组织保持在每个缩放级别的状态树中(例如1到19):

{
  markers: {
    1: { name: 'Bob', location: [-40.08, 37.62] },
    2: { name: 'Steve', location: [51.08, -25.62] },
    ...
  },
  clustersByZoomLevel: {
    1: {
      clusters: [
        {
          clusterLocation: [22.59, -21.54],
          markers: [2, 11, …

免责声明:一般来说,我仍然是一些新的Flow和静态类型,所以我很可能会忽略这个问题容易/明显的东西.

假设我有一个名为的库my-library.该库向其用户公开单个模块,该模块index.js导入一些其他模块(moduleA.js和moduleB.js)供内部使用.

我希望将Flow与此库一起使用,既可用于内部开发,也可用于index.js.flow具有模块声明的文件,该模块声明适用于同时使用Flow的库用户.所以文件结构看起来像这样:

- index.js
- index.js.flow (contains the module declaration for library users)
- moduleA.js
- moduleA.js.flow (just exported type definitions, no module declaration)
- moduleB.js
- moduleB.js.flow (just exported type definitions, no module declaration)

问题是index.js.flow模块声明需要使用来自moduleA.js.flow和的类型moduleB.js.flow.(我原因moduleA.js.flow而moduleB.js.flow不是直接在.js文件中定义类型的原因是.js文件中的类型定义将被Babel剥离,我希望它们仍然存在于库用户的某个地方).

我知道以下内容不会与导入的外部JS进行类型检查my-module:

index.js.flow(这不起作用)

import type { SomeType } from './moduleA'

declare module 'my-module' {
  declare function exports(): {
    someMethod: () => …