用于 Openstreetmaps 的 react-native-maps 中的暗模式

如何解决用于 Openstreetmaps 的 react-native-maps 中的暗模式

我已经按照此链接 https://www.igismap.com/switching-between-google-maps-and-openstreetmap-in-react-native/ 使用 react-native-maps 库实现了 OpenStreetMaps。我有使用 OpenStreetMaps 的特定要求，因此我使用了自定义平铺层。

我对使用深色模式主题感到震惊。当前代码如下：

import MapView,{
  PROVIDER_DEFAULT,MAP_TYPES,UrlTile,} from "react-native-maps";
import React,{ Component } from "react";
import { StyleSheet,Dimensions } from "react-native";

const styles = StyleSheet.create({
  container: {
    position: "absolute",top: 0,left: 0,right: 0,bottom: 0,justifyContent: "flex-end",alignItems: "center",},map: {
    position: "absolute",});

const mapDarkStyle = [
  {
    elementType: "geometry",stylers: [
      {
        color: "#212121",],{
    elementType: "labels.icon",stylers: [
      {
        visibility: "off",{
    elementType: "labels.text.fill",stylers: [
      {
        color: "#757575",{
    elementType: "labels.text.stroke",{
    featureType: "administrative",elementType: "geometry",{
    featureType: "administrative.country",elementType: "labels.text.fill",stylers: [
      {
        color: "#9e9e9e",{
    featureType: "administrative.land_parcel",{
    featureType: "administrative.locality",stylers: [
      {
        color: "#bdbdbd",{
    featureType: "poi",{
    featureType: "poi.park",stylers: [
      {
        color: "#181818",stylers: [
      {
        color: "#616161",elementType: "labels.text.stroke",stylers: [
      {
        color: "#1b1b1b",{
    featureType: "road",elementType: "geometry.fill",stylers: [
      {
        color: "#2c2c2c",stylers: [
      {
        color: "#8a8a8a",{
    featureType: "road.arterial",stylers: [
      {
        color: "#373737",{
    featureType: "road.highway",stylers: [
      {
        color: "#3c3c3c",{
    featureType: "road.highway.controlled_access",stylers: [
      {
        color: "#4e4e4e",{
    featureType: "road.local",{
    featureType: "transit",{
    featureType: "water",stylers: [
      {
        color: "#000000",stylers: [
      {
        color: "#3d3d3d",];

const { width,height } = Dimensions.get("window");

const ASPECT_RATIO = width / height;
const LATITUDE = 22.720555;
const LONGITUDE = 75.858633;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

class OpenStreetMap extends Component {
  // constructor() {
  //   super();
  // }

  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude: LATITUDE,longitude: LONGITUDE,latitudeDelta: LATITUDE_DELTA,longitudeDelta: LONGITUDE_DELTA,};
  }

  get mapType() {
    return this.props.provider === PROVIDER_DEFAULT
      ? MAP_TYPES.STANDARD
      : MAP_TYPES.STANDARD;
  }

  onRegionChange(region) {
    this.state.region.setValue(region);
  }

  render() {
    console.log("Current Maps......");
    return (
      <MapView
        style={styles.map}
        provider={null}
        // region={this.state.region}
        mapType={this.mapType}
        region={this.state.region}
        // onRegionChange={this.onRegionChange}

        customMapStyle={mapDarkStyle}
      >
        <UrlTile
          urlTemplate="http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
          // urlTemplate="https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png"
          maximumZ={50}
          flipY={false}
        />
      </MapView>
    );
  }
}

export default OpenStreetMap;

urlTemplate="http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg" 更改主题。

但是当我使用深色主题 URL 时，它确实会改变：urlTemplate="https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png"

深色主题参考：https://wiki.openstreetmap.org/wiki/Tile_servers

有人可以在此功能中取悦我吗？

当前 O/p :

解决方法

我使用了 https://tiles.stadiamaps.com/，但它在移动应用中不起作用。

我的解决方法是：

document.getElementById('map').style.filter = "invert (1) sepia (13%) saturate (37%) hue-rotate (130deg) brightness (95%) contrast (80%)";