如何解决使用 openSstreetMap Url 磁贴但仍然在 react-native-maps 中获得空地图
我已经按照此链接 https://github.com/react-native-maps/react-native-maps 使用 react-native-maps 库实现了 OpenStreetMaps。我有使用 OpenStreetMaps 而不是渲染 Google 磁贴的特定要求，并且想要修改 Google 不允许的功能中的地图，因此我使用了自定义磁贴层。
分析：
<UrlTile urlTemplate="http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg" /> works perfectly fine and renders watercolor map provider.
但是当我使用 Openstreetmap urltemplate 时它不会改变
<UrlTile urlTemplate="http://c.tile.openstreetmap.org/{z}/{x}/{y}.png" />
我也提到了这个链接 https://github.com/react-native-maps/react-native-maps/issues/1631 有一个解决方案可以使 mapType="none"。即使这对我来说似乎也不起作用。
预期的 O/p： 我需要显示 OpenStreetMap 图块而不是 Google 地图
当前 O/p： 显示 Google 磁贴
代码： Map.js
import React,{ useEffect } from "react";
import { TextInput,View,Dimensions } from "react-native";
import MapView,{
PROVIDER_GOOGLE,UrlTile,Marker,Polygon,} from "react-native-maps";
import { mapDarkStyle,styles } from "./mapstyle";
import { parcelleArray } from "./mapCoordinates";
const { width,height } = Dimensions.get("window");
const ASPECT_RATIO = width / height;
const LATITUDE = 43.8796;
const LONGITUDE = 1.8345;
const LATITUDE_DELTA = 0.01864195044303443;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const initialMapState = {
region: {
latitude: LATITUDE,longitude: LONGITUDE,latitudeDelta: LATITUDE_DELTA,longitudeDelta: LONGITUDE_DELTA,},};
export const mapStandardStyle = [
{
elementType: "labels.icon",stylers: [
{
visibility: "off",],];
class OpenStreetMap extends React.Component {
render() {
return (
<View style={styles.container}>
<MapView
style={styles.container}
provider={null}
mapType={"none"}
region={initialMapState.region}
initialRegion={initialMapState.region}
customMapStyle={mapDarkStyle}
>
<UrlTile
// urlTemplate="http://a.tile.openstreetmap/.de/tiles/osmde/{z}/{x}/{y}.png"
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"
// urlTemplate="http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg"
maximumZ={19}
flipY={false}
/>
{parcelleArray.map((item,index) => {
return (
<Polygon
key={1}
coordinates={item}
strokeColor="#fff"
fillColor="rgba(255,255,0.5)"
strokeWidth={1}
/>
);
})}
<Marker
coordinate={{
latitude: 43.8781,longitude: 1.8346,}}
title={"Parcelle3"}
pinColor={"red"}
></Marker>
<Marker
coordinate={{
latitude: 43.8809,longitude: 1.8375,}}
title={"Parcelle1"}
pinColor={"blue"}
></Marker>
<Marker
coordinate={{
latitude: 43.8786,longitude: 1.8322,}}
title={"Parcelle2"}
pinColor={"blue"}
></Marker>
</MapView>
</View>
);
}
}
export default OpenStreetMap;
mapstyle.js
import { StyleSheet,Platform } from "react-native";
export const mapDarkStyle = [
{
elementType: "geometry",stylers: [
{
color: "#212121",{
elementType: "labels.icon",{
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",];
export const styles = StyleSheet.create({
map: {
flex: 1,container: {
position: "absolute",top: 0,left: 0,right: 0,bottom: -25,justifyContent: "flex-end",alignItems: "center",// map: {
// position: "absolute",// top: 0,// left: 0,// right: 0,// bottom: 0,// },searchBox: {
// position: "absolute",marginTop: Platform.OS === "ios" ? 40 : 20,flexDirection: "row",backgroundColor: "#fff",width: "90%",alignSelf: "center",borderRadius: 5,padding: 10,shadowColor: "#ccc",elevation: 20,textContent: {
flex: 2,cardtitle: {
fontSize: 12,// marginTop: 5,fontWeight: "bold",cardDescription: {
fontSize: 12,color: "#444",markerWrap: {
alignItems: "center",justifyContent: "center",width: 50,height: 50,marker: {
width: 30,height: 30,button: {
alignItems: "center",marginTop: 5,signIn: {
width: "100%",padding: 5,borderRadius: 3,textSign: {
fontSize: 14,});
mapCoordinates.js
export const parcelle1 = [
{
latitude: 43.8785,longitude: 1.8336,{
latitude: 43.8788,{
latitude: 43.8773,longitude: 1.8365,{
latitude: 43.8769,longitude: 1.8348,];
export const parcelle2 = [
{
latitude: 43.8784,longitude: 1.8331,{
latitude: 43.8795,longitude: 1.8324,{
latitude: 43.8786,longitude: 1.8311,{
latitude: 43.8777,longitude: 1.8319,];
export const parcelle3 = [
{
latitude: 43.88,longitude: 1.8371,{
latitude: 43.8806,longitude: 1.8387,{
latitude: 43.8808,longitude: 1.8382,{
latitude: 43.8818,longitude: 1.8378,longitude: 1.8363,];
export const parcelleArray = [
[
{
latitude: 43.8785,{
latitude: 43.8788,{
latitude: 43.8773,{
latitude: 43.8769,[
{
latitude: 43.8784,{
latitude: 43.8795,{
latitude: 43.8786,{
latitude: 43.8777,[
{
latitude: 43.88,{
latitude: 43.8806,{
latitude: 43.8808,{
latitude: 43.8818,];
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。