SSL के साथ OpenLayers के नक्शे का उपयोग करना

Question

मैं होस्ट किए गए जावास्क्रिप्ट का उपयोग करके OpenLayers मानचित्र का उपयोग कर रहा हूं:

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

लेकिन मेरे क्लाइंट ने एसएसएल इंस्टॉल किया है और जब मैं अपना मैप पेज चलाने की कोशिश करता हूं तो यह पता चलता है:

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

इसलिए मैंने https एक की कोशिश की और यह पता चला कि ओपनर के पास एक नहीं है

https://openlayers.org/api/2.13.1/OpenLayers.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

---

मैंने ओपनस्ट्रीट के लिए पूरे गिटहब रेपो को डाउनलोड किया यह सोचकर कि यह छवि और सीएसएस समस्या को हल करेगा।

https://github.com/openlayers/openlayers

हालांकि ऊपर सीएसएस मुद्दों को हल किया , लेकिन नक्शे को एक अन्य बाहरी साइट से छवियों को लोड करके दिखाया गया है tile.openstreet.com। लगता है जैसे मुझे ओपनस्ट्रीट जे एस में खुदाई करना है: ..(

---

महत्वपूर्ण : मैं backbone.js का उपयोग कर रहा हूं।

नोट : मैं OpenLayers 2.12 और http बुनियादी प्रमाणीकरण मुसीबतों से गुजरा हूं और इसने मेरी मदद नहीं की है। सर्वर कॉन्फ़िगरेशन पर मेरा कोई नियंत्रण नहीं है। मेरे पास बस उस फ़ोल्डर तक पहुंच है जहां मुझे वेबसाइट सेट करने की आवश्यकता है, बाकी सब कुछ ठीक काम करता है, लेकिन यह एसएसएल परेशानी है।

Google से लिंक करने से बचने के लिए वास्तविक वेबसाइट पता बदल दिया गया है।

Comments

क्या आपके अपने सर्वर पर .JS फ़ाइल की मेजबानी नहीं करने का एक कारण है? यह शुद्ध एसएसएल की अनुमति देगा और क्रॉस डोमेन संघर्ष से बचना होगा।

— मैपर

@ मैपर: मैंने पहले ऐसा किया था, लेकिन फिर स्क्रिप्ट कुछ बाहरी संसाधनों जैसे सीएसएस, चित्र आदि को कॉल करती है .. मेरा दूसरा अपडेट देखें। Ive ने बताया कि अब क्या याद आ रहा है .. मुझे लगता है कि यह एक मुद्दा बना रहेगा जब तक कि वे एक ssl भी नहीं जोड़ते ..

— रॉय एमजे

सभी संपत्तियाँ आदि संबंधित हैं, इसलिए IMHO को कोई समस्या नहीं है। उदाहरण के लिए: on-i.de/map

— Mapper

@ मैपर: हाँ, मुझे पता चला कि .. लेकिन हालाँकि टाइलें ऐसी हैं जो इस तरह से जाकर अटक जाती हैं .. यह मेरे आवेदन को तोड़ती नहीं है, लेकिन एक चेतावनी को दर्शाती है, वास्तव में बहुत सी चेतावनियाँ .. बीमार इस के लिए खुला रखें कुछ दिनों के आसपास खोज करने और यह देखने के लिए कि क्या इसके कोई संभावित समाधान हैं ...

— रॉय एमजे

आपको हमेशा उन js फ़ाइलों को स्थानीय रूप से होस्ट करना चाहिए। अन्यथा एक एपीआई संशोधन के साथ एक OpenLayers अद्यतन आपकी साइट को खराब कर सकता है।

— scai

Answer 1

• OpenLayers.js: मैं आपको एफबीआई डाउनलोड करने और अपने एप्लिकेशन सर्वर से लिंक करने की सलाह दूंगा। इस तरह से आपके URL और सामग्री पर कुल नियंत्रण हो सकता है।

• "असुरक्षित सामग्री" चेतावनी: जो मेरे साथ भी हुआ। OpenLayers 2.13.1 में, जब आप OpenLayers.Layer.OSM को झटपट बंद करते हैं, तो इसे HTTP के लिए डिफ़ॉल्ट रूप से कॉन्फ़िगर किया जाता है। से OpenLayers.Layer.OSM डॉक :

url {स्ट्रिंग} टाइलसेट 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 का उपयोग करें : आपका ब्राउज़र विचार करेगा प्रोटोकॉल यह वर्तमान में चल रहा है।

Comments

मामले में कोई भी सोच रहा है: आप इसे OpenLayers.js स्रोत कोड में बदलते हैं। यहां तक ​​कि अगर यह पहले से ही छोटा है तो इसे खोजना और बदलना आसान है।

— ट्रैनोसैसिस

Answer 2

आधिकारिक ओएसएम टाइल सर्वर एसएसएल के माध्यम से कोई पहुंच प्रदान नहीं करते हैं। वे सार्वजनिक माल साझा किए जाते हैं और भारी ट्रैफ़िक वाले ऐप्स द्वारा उपयोग नहीं किए जाते हैं। यदि आप उन्हें किसी भी तरह से उपयोग करना चाहते हैं, तो आपको ब्राउज़र में "कुछ सामग्री एन्क्रिप्टेड नहीं है" संदेश के साथ ठीक होना चाहिए।

यदि आप पूर्ण एन्क्रिप्शन चाहते हैं, तो आपको एसएसएल के साथ वाणिज्यिक मानचित्र सीडीएन के लिए भुगतान करना होगा:

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

Comments

यह जानकारी जाहिरा तौर पर पुरानी है। ओपनस्ट्रीटमैप अब https का समर्थन करता है; openstreetmap.org की जाँच करें । यह भी देखें github.com/openstreetmap/openstreetmap-website/issues/1033

— एंटोनी क्रिस्टोफ़ाइड्स

Answer 3

आपको प्रपत्रों को ओवरराइड करना होगा 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)

कोड एक नए मीडिया itens के लिए फ़ील्ड रूपों विगेट्स ओवरराइड करता है। यह http://openlayers.org/api/2.13.1/OpenLayers.jsमीडिया की http सामग्री को हटा देता है ।