露天層 - Google地圖的替代品

>開放式層：一種功能強大的可自定義替代品的Google Maps

>

OpenLayers為Google Maps提供了令人信服的替代方案，為包括WMS，WMTS，Bing Maps和OpenStreetMap（OSM）等不同地圖源提供了廣泛的自定義選項和支持。 與Google Maps不同，OpenLayers允許在經過身份驗證的網站部分中使用。

鍵優點：

• 多功能地圖源：與各種地圖提供商無縫集成，在背景選擇中賦予靈活性。
• >向量層支持：啟用用戶定義的數據，例如興​​趣點，使用向量層和geojson。 >
高自定義：
• 允許廣泛的地圖功能樣式，對映射控制佈局的控制以及創建自定義控件。
高性能：
• >通過瓷磚緩存和硬件加速有效地處理大型數據集。 >
開源和社區驅動：
• 從社區貢獻中受益，確保不斷改進和開放訪問。 例如，OSM允許社區更新以映射數據。
為什麼選擇開放式播放器，而不是Google地圖？

>

許多開發人員熟悉Google Map和Bing Maps API，以在網站上添加交互式地圖。但是，Google地圖限制了經過身份驗證的區域的使用。 OpenLayers克服了此限制，在任何環境中提供了完全控制和靈活性。

開始使用openlayers：

核心功能很簡單：包括JavaScript庫，創建具有唯一ID的DIV元素，然後將此ID傳遞給OpenLayerers。以下示例（使用jQuery，儘管不需要）演示了基礎知識：

>

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());
});

此代碼創建一張顯示OpenStreetMap，Google Street Maps和Bing Street Maps的地圖。 設置（EPSG：900913，球形墨托）對於與Google和Bing地圖的兼容性至關重要。 OpenLayers在處理各個層的不同投影方面表現出色。

>向您的地圖添加數據：projection

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)); 
});

自定義地圖樣式：

> OpenLayers允許詳細的樣式自定義。 以下示例演示了創建自定義樣式：

動態地圖數據：

> OpenLayers支持從後端服務器動態獲取數據。 本示例使用

// Simple style
var styleMap = new OpenLayers.StyleMap({
  pointRadius: 20,
  strokeColor: '#ff0000',
  fillColor: '#ff0000',
  fillOpacity: 0.6
});
var overlay = new OpenLayers.Layer.Vector('Your position', {styleMap: styleMap});

// Style using feature attributes
var styleMap = new OpenLayers.StyleMap({
  pointRadius: '$(pointRadius)',
  strokeColor: '#ff0000',
  fillColor: '$(pointColor)',
  fillOpacity: 0.6
});

// Style using functions and context
var context = {
  getColor: function(feature) {
    return '#00ff00';
  },
  getPointRadius: function(feature) {
    return 15;
  }
}
var template = {
  strokeColor: '${getColor}',
  pointRadius: '${getPointRadius}',
}
var styleMap = new OpenLayers.StyleMap(new OpenLayers.Style(template, {context: context}));

>策略在當前視口內請求數據：>

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());
});

對於大型數據集，聚類策略（例如OpenLayers.Strategy.AnimatedCluster）通過對附近功能進行分組來改善性能。

結論：

OpenLayers提供了一個靈活而強大的框架，用於創建自定義地圖應用程序。 它的開源性質，廣泛的自定義選項以及對各種數據格式的支持使其成為專有映射解決方案的強大替代方案。 探索OpenLayers網站以獲取詳細的文檔和示例。 提供的常見問題解答部分進一步解決了常見的問題和疑慮。

以上是露天層 - Google地圖的替代品的詳細內容。更多資訊請關注PHP中文網其他相關文章！