OpenLayers -Googleマップに代わるもの

OpenLayers：Googleマップに代わる強力でカスタマイズ可能な代替品

OpenLayersは、Googleマップに魅力的な代替品を提供し、WMS、WMT、Bingマップ、OpenStreetMap（OSM）などの多様なマップソースの広範なカスタマイズオプションとサポートを提供します。 Googleマップとは異なり、OpenLayersは認証されたWebサイトセクション内で使用できます。

重要な利点：

• 汎用性のあるマップソース：さまざまなマッププロバイダーとシームレスに統合し、バックグラウンド選択に柔軟性を付与します。
ベクトルレイヤーサポート：
• ベクターレイヤーとジオジソンを使用して、関心のあるポイントなどのユーザー定義のデータを追加できます。
高いカスタマイズ：
• マップ機能の広範なスタイリング、マップ制御レイアウトの制御、およびカスタムコントロールの作成を可能にします。 ハイパフォーマンス：
タイルキャッシングとハードウェアアクセラレーションを介して大規模なデータセットを効率的に処理します。
• オープンソースとコミュニティ駆動型：
コミュニティへの貢献からの恩恵を受け、継続的な改善とオープンアクセスを確保します。 たとえば、OSMでは、コミュニティの更新がデータをマップすることができます
• GoogleマップでOpenLayersを選択する理由は？
多くの開発者は、Webサイトにインタラクティブマップを追加するためのGoogleマップとBingマップAPIに精通しています。ただし、Googleマップは、認証された領域での使用を制限しています。 OpenLayersはこの制限を克服し、あらゆる環境で完全な制御と柔軟性を提供します。

OpenLayersの開始：

コア機能は簡単です。JavaScriptライブラリを含め、一意のIDを持つDIV要素を作成し、このIDをOpenLayersに渡します。次の例（jqueryを使用して、必要ありませんが）は基本を示しています：

このコードは、OpenStreetMap、Google Street Maps、およびBing Streetマップを表示するマップを作成します。

設定（EPSG：900913、球状のメルカトル）は、GoogleおよびBingマップとの互換性に不可欠です。 OpenLayersは、レイヤー間でさまざまな投影を処理することに優れています

<code class="language-javascript">jQuery(window).on('load', function() {
  var map = new OpenLayers.Map('map', {
    projection: new OpenLayers.Projection('EPSG:900913')
  });
  var osm = new OpenLayers.Layer.OSM();            
  var gmap = new OpenLayers.Layer.Google('Google street maps');
  var bing = new OpenLayers.Layer.Bing({
    key: 'register your api key at bingmapsportal.com',
    type: 'Road',
    metadataParams: { mapVersion: 'v1' }
  });

  map.addLayers([osm, gmap, bing]);
  map.setCenter(new OpenLayers.LonLat(2.2, 54.0)
    .transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject()), 5);
  map.addControl(new OpenLayers.Control.LayerSwitcher());
});</code>

マップにデータの追加：

OpenLayersはベクトル層を使用してカスタムデータを追加します。 次の例では、ユーザーの現在の場所が追加されています：

projection

マップスタイルのカスタマイズ：

OpenLayersは、詳細なスタイルのカスタマイズを可能にします。 次の例は、カスタムスタイルの作成を示しています

<code class="language-javascript">var overlay = new OpenLayers.Layer.Vector('Your location');
var map = new OpenLayers.Map('map');

map.addLayers([new OpenLayers.Layer.OSM('OSM'), overlay]);
map.setCenter(
  new OpenLayers.LonLat(2.2, 54.0).transform(
    new OpenLayers.Projection('EPSG:4326'),
    map.getProjectionObject()
  ), 11);

navigator.geolocation.getCurrentPosition(function(position) {
  var yourLocation = new OpenLayers.Geometry.Point(position.coords.longitude, position.coords.latitude)
        .transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject());

  map.getLayersByName('Your location')[0].addFeatures([new OpenLayers.Feature.Vector(yourLocation)]);
  map.setCenter(new OpenLayers.LonLat(yourLocation.getCentroid().x, yourLocation.getCentroid().y)); 
});</code>

動的マップデータ：

OpenLayersは、バックエンドサーバーからデータの取得を動的にサポートしています。 この例では、A <code class="language-javascript">jQuery(window).on('load', function() { var map = new OpenLayers.Map('map', { projection: new OpenLayers.Projection('EPSG:900913') }); var osm = new OpenLayers.Layer.OSM(); var gmap = new OpenLayers.Layer.Google('Google street maps'); var bing = new OpenLayers.Layer.Bing({ key: 'register your api key at bingmapsportal.com', type: 'Road', metadataParams: { mapVersion: 'v1' } }); map.addLayers([osm, gmap, bing]); map.setCenter(new OpenLayers.LonLat(2.2, 54.0) .transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject()), 5); map.addControl(new OpenLayers.Control.LayerSwitcher()); });</code>

大規模なデータセットの場合、クラスタリング戦略（OpenLayers.Strategy.AnimatedClusterなど）近くの機能をグループ化することでパフォーマンスを向上させます。

結論：

OpenLayersは、カスタムマップアプリケーションを作成するための柔軟で強力なフレームワークを提供します。 オープンソースの性質、広範なカスタマイズオプション、およびさまざまなデータ形式のサポートにより、独自のマッピングソリューションに代わる強力な代替手段になります。 詳細なドキュメントと例については、OpenLayersのWebサイトをご覧ください。 提供されているFAQセクションは、一般的な質問と懸念についてさらに取り組んでいます。

以上がOpenLayers -Googleマップに代わるものの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。