Menggunakan peta OpenLayers dengan SSL

Saya menggunakan peta OpenLayers dengan menggunakan JavaScript yang di-host:

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

Tetapi klien saya telah menginstal SSL dan ketika saya mencoba menjalankan halaman peta saya itu menunjukkan:

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

Jadi saya mencoba https satu dan ternyata openlayers tidak memilikinya

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

Kemudian saya mengunduh Openstreet js dan di-host di server klien, tetapi kemudian semua gaya dan gambar terkait hilang. Meskipun tidak menunjukkan peta, pada dasarnya banyak peringatan muncul di konsol dan saya khawatir ini akan ditolak di play store atau lebih. Saya sedang mengembangkan aplikasi hybrid yang berjalan di server juga.

Peringatan sekarang :

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

Saya mencoba dengan cdn dengan SSL dan masalah yang masih sama:

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

Saya mengunduh seluruh repo GitHub untuk Openstreet berpikir ini akan menyelesaikan masalah gambar dan CSS.

https://github.com/openlayers/openlayers

Sementara hal di atas menyelesaikan masalah CSS , peta ditunjukkan dengan memuat gambar dari situs eksternal lain tile.openstreet.com. Sepertinya saya harus menggali openstreet js juga .. :( ..

Penting : Saya menggunakan backbone.js.

Catatan : Saya telah melalui OpenLayers 2.12 dan http otentikasi dasar dan itu tidak membantu saya. Saya tidak punya kendali atas konfigurasi server. Saya hanya memiliki akses ke folder di mana saya perlu mengatur situs web dan semua yang lain berfungsi dengan baik, tetapi SSL ini merepotkan.

Mengubah alamat situs web asli untuk menghindari tautannya Google.

• OpenLayers.js: saya akan merekomendasikan Anda untuk mengunduh lib dan menautkannya ke server aplikasi Anda. Dengan cara ini Anda dapat memiliki kontrol total atas URL dan kontennya.

• peringatan "konten tidak aman": itu terjadi pada saya juga. Di OpenLayers 2.13.1, ketika Anda membuat Instantiate sebuah OpenLayers.Layer.OSM, itu dikonfigurasi secara default untuk HTTP. Dari OpenLayers.Layer.OSM doc :

url {String} Skema URL tileset. Default ke http: // [a | b | c] .tile.openstreetmap.org / $ {z} / $ {x} / $ {y} .png

Alih-alih itu, saya menggunakan nilai eksplisit untuk array skema URL, yang berisi URL protokol-independen

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 independen protokol: jika Anda ingin aplikasi Anda berjalan di HTTP dan HTTPS, gunakan URL independen protokol: alih-alih http://server.com/resource , gunakan //server.com/resource : browser Anda akan mempertimbangkan protokol saat ini sedang berjalan.

Server ubin OSM resmi tidak menyediakan akses apa pun melalui SSL. Mereka adalah barang publik yang dibagikan dan tidak boleh digunakan oleh aplikasi dengan lalu lintas padat. Jika Anda tetap ingin menggunakannya, Anda harus setuju dengan pesan "sebagian konten tidak dienkripsi" di browser.

Jika Anda ingin memiliki enkripsi penuh, Anda perlu membayar CDN peta komersial dengan SSL:

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

Anda perlu mengganti formulir Widget. Contoh:

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
    }

dan ubah kelas admin

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

Contoh model

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

Bidang kode menimpa membentuk widget ke itens media baru. Ini menghapus konten http http://openlayers.org/api/2.13.1/OpenLayers.jsdari media.