在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，结果证明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*/ 

我尝试使用带有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。

重要提示：我正在使用bone.js。

注意：我经历了OpenLayers 2.12和http基本身份验证问题，但这对我没有帮助。我对服务器配置没有任何控制。我只需要访问一个文件夹，即可在该文件夹中设置网站，其他所有内容都可以正常运行，但是此SSL很麻烦。

更改了真实的网站地址，以避免Google链接它。

• OpenLayers.js：我建议您下载该库并将其链接到您的应用程序服务器。这样，您可以完全控制其URL和内容。

• “不安全的内容”警告：这也发生在我身上。在OpenLayers 2.13.1中，当实例化OpenLayers.Layer.OSM时，默认情况下将其配置为HTTP。来自OpenLayers.Layer.OSM doc：

url {String} tileet 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/标题
• 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)

代码覆盖字段构成了新媒体itite的小部件。这将删除http://openlayers.org/api/2.13.1/OpenLayers.js媒体的http内容。