Leaflet: Плитка карты не загружается в ios webview

Созданный на 23 нояб. 2016 · 3Комментарии · Источник: Leaflet/Leaflet

Привет,

Я использую React Native.
Это мой файл map.html:

<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  </head>
  <body>
    <div id="map" style="height: 100%;">
    </div>
    <script>
        var osmUrl = 'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        osm = L.tileLayer(osmUrl, {
              maxZoom: 18,
              attribution: osmAttrib
            });
        var map = L.map('map').setView([19.04469, 72.9258], 12);
        map.addLayer(osm);
    </script>
  </body>
</html>

и я загружаю map.html в веб-просмотр:

import React, { Component } from 'react';
import {
  WebView
} from 'react-native';

export default class MapScreen extends Component {
  render() {
    return (
      <WebView style={{flex:1}} javaScriptEnabled={true} source={require('./map.html')}/>
    );
  }
}

Но плитка не загружается в симуляторе ios, но в эмуляторе Android все нормально.
Вот что я вижу в симуляторе ios:
simulator screen shot nov 23 2016 11 31 41 pm

Источник

arminghm

Самый полезный комментарий

Спасибо за ответ.

Я был из-за HTTP-запросов, и когда я отключил ATS (App Transport Security), он работает нормально, и плитки загружаются. Но, как вы знаете, отключение ATS - не решение.

Согласно ответу @ F1LT3R в проблеме Streaming Leaflet Tiles over HTTPS / SSL # 3186, мы можем использовать https для загрузки плиток и изменения osm на openstreetmap в URL-адресе плитки ( http://{s}.tile.osm.org/{z}/{x}/{y}.png -> https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png ).

arminghm 24 нояб. 2016

👍3

Все 3 Комментарий

Привет, эта проблема связана с React, WebView и симулятором iOS. Команда Leaflet не работает с этими инструментами и не поддерживает их, поэтому я боюсь, что мы не сможем вам помочь с этим.

На очень простом примере совершенно очевидно, что проблема не в самом Leaflet, а в том, как он взаимодействует с одним из других компонентов.

Мы открыты для внесения изменений в Leaflet, чтобы улучшить его работу с другими инструментами, но, к сожалению, у нас нет ресурсов для решения проблем в других фреймворках или инструментах.

Если вы можете предоставить неудачный пример, используя только Leaflet, JavaScript и HTML / CSS, мы, конечно, очень открыты для работы с этим.