露天层 - Google地图的替代品-js教程-PHP中文网

>开放式层：一种功能强大的可自定义替代品的Google Maps

OpenLayers为Google Maps提供了令人信服的替代方案，为包括WMS，WMTS，Bing Maps和OpenStreetMap（OSM）等不同地图源提供了广泛的自定义选项和支持。与Google Maps不同，OpenLayers允许在经过身份验证的网站部分中使用。

键优点：

多功能地图源：与各种地图提供商无缝集成，在背景选择中赋予灵活性。
>向量层支持：启用用户定义的数据，例如兴趣点，使用向量层和geojson。 >
允许广泛的地图功能样式，对映射控制布局的控制以及创建自定义控件。
>通过瓷砖缓存和硬件加速有效地处理大型数据集。 >
从社区贡献中受益，确保不断改进和开放访问。例如，OSM允许社区更新以映射数据。

许多开发人员熟悉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的地图。 OpenLayers - An Alternative to Google 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 - An Alternative to Google Maps > 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中文网其他相关文章！