Korzystanie z map OpenLayers z SSL

Korzystam z mapy OpenLayers przy użyciu hostowanego JavaScript:

<script src="http://openlayers.org/api/2.13.1/OpenLayers.js"></script> 

Ale mój klient ma zainstalowany protokół SSL i kiedy próbuję uruchomić stronę mapy, pokazuje:

(2)[blocked] The page at https://domain.com/rwd/ ran insecure content 
   from http://openlayers.org/api/2.13.1/OpenLayers.js.

Wypróbowałem więc https one i okazało się, że openlayers nie ma takiego

https://openlayers.org/api/2.13.1/OpenLayers.js

Następnie pobieram plik Openstreet js i hostuję go na serwerze klienta, ale wszystkie style i powiązane obrazy zostają utracone. Chociaż pokazuje mapę, w zasadzie pojawia się wiele ostrzeżeń w konsoli i obawiam się, że może to zostać odrzucone w sklepie z grami. Tworzę aplikację hybrydową, która również działa na serwerze.

Ostrzeżenia teraz :

The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://b.tile.openstreetmap.org/14/8743/5624.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://b.tile.openstreetmap.org/14/8742/5624.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8743/5623.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://b.tile.openstreetmap.org/14/8743/5625.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8744/5624.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://a.tile.openstreetmap.org/14/8742/5623.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8742/5625.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://a.tile.openstreetmap.org/14/8744/5623.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://a.tile.openstreetmap.org/14/8744/5625.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://a.tile.openstreetmap.org/14/8743/5622.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8742/5622.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8745/5624.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://b.tile.openstreetmap.org/14/8744/5622.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://b.tile.openstreetmap.org/14/8745/5623.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8745/5625.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8745/5622.png.

GET https://domain.com/rwd/js/lib/theme/default/style.css 404 (Not Found) 
/*This the corresponding stylesheet that is loaded via Openstreet.js*/ 

Próbowałem z cdn z SSL i wciąż ten sam problem:

https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js

Pobrałem całe repozytorium GitHub dla Openstreet, myśląc, że to rozwiąże problem z obrazem i CSS.

https://github.com/openlayers/openlayers

Chociaż powyższe rozwiązało problemy CSS , mapa jest jednak wyświetlana poprzez ładowanie obrazów z innej strony zewnętrznej tile.openstreet.com. Wygląda na to, że muszę też zagłębić się w openstreet js .. :( ..

Ważne : używam backbone.js.

Uwaga : Przeszedłem przez problemy z uwierzytelnianiem OpenLayers 2.12 i http i to mi nie pomogło. Nie mam żadnej kontroli nad konfiguracją serwera. Mam tylko dostęp do folderu, w którym muszę skonfigurować witrynę, a wszystko inne działa dobrze, ale ten SSL jest kłopotliwy.

Zmieniono prawdziwy adres strony internetowej, aby uniknąć łączenia go przez Google.

• OpenLayers.js: zaleciłbym pobranie biblioteki lib i połączenie jej z serwerem aplikacji. W ten sposób możesz mieć całkowitą kontrolę nad jego adresem URL i zawartością.

• ostrzeżenia o „niebezpiecznej treści”: to też mi się przydarzyło. W OpenLayers 2.13.1 po utworzeniu wystąpienia OpenLayers.Layer.OSM jest on domyślnie konfigurowany dla HTTP. Z dokumentu OpenLayers.Layer.OSM :

url {String} Schemat URL zestawu klocków. Domyślnie jest to http: // [a | b | c] .tile.openstreetmap.org / $ {z} / $ {x} / $ {y} .png

Zamiast tego użyłem jawnych wartości dla tablicy schematów URL, zawierających adresy URL niezależne od protokołu

layer = new OpenLayers.Layer.OSM(
    "OpenStreetMap", 
    // Official OSM tileset as protocol-independent URLs
    [
        '//a.tile.openstreetmap.org/${z}/${x}/${y}.png',
        '//b.tile.openstreetmap.org/${z}/${x}/${y}.png',
        '//c.tile.openstreetmap.org/${z}/${x}/${y}.png'
    ], 
    null);

• niezależne od protokołu adresy URL: jeśli chcesz, aby aplikacja działała zarówno na HTTP, jak i HTTPS, użyj niezależnych od protokołu adresów URL: zamiast http://server.com/resource , użyj //server.com/resource : Twoja przeglądarka weźmie pod uwagę protokół, na którym jest obecnie uruchomiony.

Oficjalne serwery kafelków OSM nie zapewniają dostępu przez SSL. Są to wspólne dobra publiczne i nie powinny być używane przez aplikacje o dużym natężeniu ruchu. Jeśli mimo to chcesz ich użyć, musisz być w porządku z komunikatem „niektóre treści nie są szyfrowane” w przeglądarkach.

Jeśli chcesz mieć pełne szyfrowanie, musisz zapłacić za CDN map komercyjnych za pomocą SSL:

• http://wiki.openstreetmap.org/wiki/Tiles
• http://wiki.openstreetmap.org/wiki/Commercial_OSM_Software_and_Services

Musisz zastąpić formularze Widget. Przykład:

from django.contrib import admin
from django.contrib.gis.db import models
from django.contrib.gis.forms.widgets import BaseGeometryWidget

class CustomOpenLayersWidget(BaseGeometryWidget):
    template_name = 'gis/openlayers.html'

    def __init__(self, attrs=None):
        super(CustomOpenLayersWidget, self).__init__(attrs)

    class Media:
        js = (
            'https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js',
            'gis/js/OLMapWidget.js',
        )


class CustomModelAdmin(admin.ModelAdmin):
    """Need to change default URL of OpenLayers"""
    formfield_overrides = {
        models.PointField: {"widget": CustomOpenLayersWidget},
        models.PointField: {"widget": CustomOpenLayersWidget},
        models.PolygonField: {"widget": CustomOpenLayersWidget},
        models.LineStringField: {"widget": CustomOpenLayersWidget},

        # Adding other models Fields if need
    }

i zmień klasę administratora

@admin.register(Position)
class PositionAdmin(CustomModelAdmin):
    pass

Przykład modelu

class Position(models.Model):
    point = models.PointField(blank=False)

Pole zastępowania kodu tworzy widżety do nowych mediów. Spowoduje to usunięcie treści HTTP http://openlayers.org/api/2.13.1/OpenLayers.jsz multimediów.