การใช้แผนที่ 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 และโฮสต์ในไคลเอนต์เซิร์ฟเวอร์ แต่สไตล์และรูปภาพที่เกี่ยวข้องทั้งหมดจะหายไป แม้ว่ามันจะแสดงแผนที่โดยทั่วไปมีคำเตือนมากมายปรากฏขึ้นในคอนโซลและฉันเกรงว่าสิ่งนี้อาจถูกปฏิเสธได้ที่ play store หรือมากกว่านั้น ฉันกำลังพัฒนาแอพพลิเคชั่นไฮบริดที่ทำงานบนเซิร์ฟเวอร์เช่นกัน

คำเตือนตอนนี้ :

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 repo ทั้งหมดสำหรับ Openstreet คิดว่านี่จะช่วยแก้ปัญหาภาพและ CSS ได้

https://github.com/openlayers/openlayers

ในขณะที่ข้างต้นแก้ปัญหาแบบ CSS , แผนที่ tile.openstreet.comแต่ก็แสดงให้เห็นโดยการโหลดภาพออกจากเว็บไซต์ภายนอกอีก ดูเหมือนว่าฉันต้องขุดใน openstreet js เช่นกัน .. :( ..

สำคัญ : ฉันใช้ backbone.js

หมายเหตุ : ฉันได้ผ่านOpenLayers 2.12 และ http การตรวจสอบสิทธิ์พื้นฐาน woesและที่ไม่ได้ช่วยฉัน ฉันไม่สามารถควบคุมการกำหนดค่าเซิร์ฟเวอร์ได้ ฉันเพิ่งเข้าถึงโฟลเดอร์ที่ฉันต้องการตั้งค่าเว็บไซต์ทุกอย่างทำงานได้ดี แต่ SSL นี้มีปัญหา

เปลี่ยนที่อยู่เว็บไซต์จริงเพื่อหลีกเลี่ยงการเชื่อมโยงกับ Google

• OpenLayers.js: ฉันอยากจะแนะนำให้คุณดาวน์โหลด lib และลิงค์ไปยังแอพพลิเคชันเซิร์ฟเวอร์ของคุณ วิธีนี้คุณสามารถควบคุม URL และเนื้อหาทั้งหมดได้

• คำเตือน "เนื้อหาที่ไม่ปลอดภัย": นั่นก็เกิดขึ้นกับฉันเช่นกัน ใน OpenLayers 2.13.1 เมื่อคุณยกตัวอย่าง OpenLayers.Layer.OSM จะมีการกำหนดค่าตามค่าเริ่มต้นสำหรับ HTTP จากOpenLayers.Layer.OSM doc :

url {String} ชุดรูปแบบ URL ของ tileset เริ่มต้นที่ 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ของสื่อ