Использование карт OpenLayers с SSL

Я использую карту OpenLayers с помощью размещенного JavaScript:

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

Но на моем клиенте установлен SSL, и когда я пытаюсь запустить страницу карты, он показывает:

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

Так что я попробовал https один, и оказалось, что у openlayers его нет

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

Затем я загружаю Openstreet js и размещаю его на клиентском сервере, но тогда все стили и связанные изображения теряются. Несмотря на то, что карта показывает, в консоли появляется множество предупреждений, и я боюсь, что это может быть отклонено в магазине игр или около того. Я разрабатываю гибридное приложение, которое также работает на сервере.

Предупреждения сейчас :

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*/ 

Я попытался с CDN с SSL и до сих пор та же проблема:

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

Я загрузил весь репозиторий GitHub для Openstreet, думая, что это решит проблему с изображениями и CSS.

https://github.com/openlayers/openlayers

Хотя вышесказанное решило проблемы с CSS , карта, однако, отображается при загрузке изображений с другого внешнего сайта tile.openstreet.com. Похоже, мне тоже нужно копаться в openstreet js .. :( ..

Важно : я использую backbone.js.

Примечание . Я прошел через проблемы базовой аутентификации OpenLayers 2.12 и http, и это мне не помогло. Я не имею никакого контроля над конфигурацией сервера. У меня просто есть доступ к папке, где мне нужно настроить веб-сайт, все остальное работает нормально, но этот SSL хлопотно.

Изменен реальный адрес сайта, чтобы Google не связывал его.

• OpenLayers.js: я бы порекомендовал вам скачать библиотеку и связать ее с вашим сервером приложений. Таким образом, вы можете иметь полный контроль над его URL и контентом.

• предупреждения «небезопасного содержания»: это случилось со мной тоже. В OpenLayers 2.13.1, когда вы создаете экземпляр OpenLayers.Layer.OSM, он настраивается по умолчанию для HTTP. Из документа OpenLayers.Layer.OSM :

url {String} Схема URL набора плиток. По умолчанию используется http: // [a | b | c] .tile.openstreetmap.org / $ {z} / $ {x} / $ {y} .png

Вместо этого я использовал явные значения для массива схемы URL, содержащей независимые от протокола URL

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);

• URL-адреса, не зависящие от протокола: если вы хотите, чтобы ваше приложение работало как по HTTP, так и по HTTPS, используйте URL-адреса, не зависящие от протокола: вместо http://server.com/resource используйте //server.com/resource : ваш браузер будет учитывать протокол, на котором он сейчас работает.

Официальные серверы плиток OSM не предоставляют никакого доступа через SSL. Они являются общими общественными благами и не должны использоваться приложениями с большим трафиком. Если вы все равно хотите их использовать, вы должны согласиться с сообщением «Некоторое содержимое не зашифровано» в браузерах.

Если вы хотите иметь полное шифрование, вы должны оплатить CDN коммерческой карты с помощью SSL:

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

Вам нужно переопределить формы Widget. Пример:

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
    }

и изменить класс администратора

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

Пример модели

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

Поле переопределения кода формирует виджеты для новых мультимедийных элементов. Это удаляет http-контент http://openlayers.org/api/2.13.1/OpenLayers.jsмедиа.