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の1つを試しました、そしてそれはopenlayersが1を持っていないことがわかりました

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

次に、Openstreet jsをダウンロードしてクライアントサーバーでホストしましたが、すべてのスタイルと関連画像が失われました。地図は表示されますが、基本的にはコンソールに多数の警告ポップアップが表示され、Playストアなどで拒否される可能性があります。私もサーバー上で実行されるハイブリッドアプリケーションを開発しています。

警告：

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

OpentreetのGitHubリポジトリ全体をダウンロードしました。これで画像とCSSの問題は解決すると思います。

https://github.com/openlayers/openlayers

上記でCSSの問題は解決しましたが、マップは別の外部サイトから画像をロードすることで表示されますtile.openstreet.com。私もopenstreet jsを掘り下げる必要があるようです.. :( ..

重要：backbone.jsを使用しています。

注：OpenLayers 2.12とhttp基本認証の問題を経験しましたが、それでも役に立ちませんでした。サーバー構成を制御できません。他のすべてが正常に機能するようにWebサイトをセットアップする必要があるフォルダーにアクセスできますが、このSSLは面倒です。

Googleがリンクしないように実際のウェブサイトのアドレスを変更しました。

• OpenLayers.js：libをダウンロードしてアプリケーションサーバーにリンクすることをお勧めします。このようにして、URLとコンテンツを完全に制御できます。

• 「安全でないコンテンツ」の警告：私にも起こりました。OpenLayers 2.13.1では、OpenLayers.Layer.OSMをインスタンス化すると、デフォルトでHTTP用に構成されます。OpenLayers.Layer.OSM docから：

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コンテンツが削除されます。