私はOpenLayers 3を学習していますが、JS Bin オンライン エディターを使用してベースマップをブラウザーに取り込もうとしているときに問題が発生しました。
ローカルのテキスト エディター (メモ帳 ++) でまったく同じコードを記述した場合、すべてが正常に機能します。しかし、JS Bin を使用しているときはそうではありません。
コードへのリンクは次のとおりです。
https://jsbin.com/wijoha/edit?html,css,console,output
何が問題なのかを理解するのを手伝ってもらえますか? 私はすでに問題を解決するために数時間を費やしましたが、頭を悩ませることはできません...
追加した JSBin のコンソール (JSBin ではなくブラウザ ウィンドウのコンソール) を見ると、HTTP リソースを HTTPS ページに配置しようとしているために、CSS が読み込まれていません。エラーメッセージは次のとおりです。
混合コンテンツ: 「https://null.jsbin.com/runner」のページは HTTPS 経由で読み込まれましたが、安全でないスタイルシート「http://openlayers.org/en/v3.10.1/css/ol.css」が要求されました. このリクエストはブロックされました。コンテンツは HTTPS 経由で提供する必要があります。
さらに、openlayers.org が HTTPS 経由でのファイルの提供を受け入れていないように見えるため (少なくとも私にとっては Chrome では)、JS ファイルol.jsはまったく読み込まれません。
代わりに、HTTP 経由ですべて (JSBin 自体の URL を含む) を提供してみてください。実際の例を次に示します。