SSL과 함께 OpenLayers 맵 사용

호스팅 JavaScript를 사용하여 OpenLayers 맵을 사용하고 있습니다.

<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 one을 시도했지만 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*/ 

SSL을 사용하여 cdn으로 시도했지만 여전히 동일한 문제가 있습니다.

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

Openstreet를 위해 전체 GitHub 저장소를 다운로드하면 이미지 및 CSS 문제가 해결됩니다.

https://github.com/openlayers/openlayers

위 의 CSS 문제를 해결 했지만 다른 외부 사이트에서 이미지를로드하여지도가 표시됩니다 tile.openstreet.com. openstreet js도 파야 할 것 같습니다 .. :( ..

중요 : backbone.js를 사용하고 있습니다.

참고 : OpenLayers 2.12 및 http 기본 인증 문제를 겪었 지만 도움이되지 않았습니다. 서버 구성을 제어 할 수 없습니다. 웹 사이트를 설정 해야하는 폴더에 액세스 할 수 있지만 다른 모든 것이 잘 작동하지만이 SSL은 번거 롭습니다.

Google이 링크하지 않도록 실제 웹 사이트 주소를 변경했습니다.

• OpenLayers.js : lib를 다운로드하여 애플리케이션 서버에 연결하는 것이 좋습니다. 이 방법으로 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을 통한 액세스를 제공하지 않습니다. 공유 상품이며 공유 량이 많은 앱에서는 사용해서는 안됩니다 . 어쨌든 사용하려면 브라우저에서 "일부 내용이 암호화되지 않았습니다"라는 메시지가 표시되어야합니다.

완전한 암호화를 원할 경우 SSL을 사용하여 상용 맵 CDN을 지불해야합니다.

• 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://openlayers.org/api/2.13.1/OpenLayers.js미디어의 http 컨텐츠 를 제거 합니다.