GeoJSON + OpenLayers + OSM

Это базовый пример, слегка измененный с сайта OpenLayers.GeoJSON + OpenLayers + OSM

Когда я использую WMS (r2 прокомментировал, r3 раскоментирован), он работает.
Когда я использую OSM (r2 раскомментирован, r2 прокомментировал), он не будет работать.

Я хочу использовать OSM, что мне здесь не хватает?

 var map = new OpenLayers.Map('map'); 
     //osmLayer = new OpenLayers.Layer.OSM(); 
     osmLayer = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}); 
     map.addLayer(osmLayer); 
     map.setCenter(new OpenLayers.LonLat(10, 45), 6); 

     var myGeoJSON = { 
      "type": "FeatureCollection", 
      "features": [ 
       {"geometry":{ 
         "type":"GeometryCollection", 
         "geometries":[ 
          { 
           "type":"LineString", 
           "coordinates": 
            [[11.0878902207, 45.1602390564], 
            [15.01953125, 48.1298828125]] 
          } 
         ] 
        }, 
        "type":"Feature", 
        "properties": {}}       
       ] 
     }; 

     var geojson_format = new OpenLayers.Format.GeoJSON(); 
     var vector_layer = new OpenLayers.Layer.Vector(); 
     map.addLayer(vector_layer); 
     vector_layer.addFeatures(geojson_format.read(myGeoJSON));

Этот фрагмент кода можно использовать в HTML-страницу с:

<script src="http://openlayers.org/api/OpenLayers.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 

<div style="width: 100%; height: 100%;" id="map"></div>

источник

2013-08-20 Terence

Для OSM вам нужно добавить проекционный материал (в вашем примере вы смешиваете LON/лат с OSM):

http://wiki.openstreetmap.org/wiki/EPSG:3857

, такие, как здесь: http://openlayers.org/dev/examples/osm.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <title>OpenLayers Basic OSM Example</title> 
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css"> 
    <link rel="stylesheet" href="style.css" type="text/css"> 
    <script src="../OpenLayers.js"></script> 
    <script type="text/javascript"> 
     var map, layer; 
     function init(){ 
      map = new OpenLayers.Map('map'); 
      layer = new OpenLayers.Layer.OSM("Simple OSM Map"); 
      map.addLayer(layer); 
      map.setCenter(
       new OpenLayers.LonLat(-71.147, 42.472).transform(
        new OpenLayers.Projection("EPSG:4326"), 
        map.getProjectionObject() 
       ), 12 
      );  
     } 
    </script> 
    </head> 
    <body onload="init()"> 
    <h1 id="title">Basic OSM Example</h1> 

    <div id="tags"> 
     openstreetmap basic light 
    </div> 

    <div id="shortdesc">Show a Simple OSM Map</div> 

    <div id="map" class="smallmap"></div> 

    <div id="docs"> 
     <p>This example shows a very simple OSM layout with minimal controls.</p> 
    </div> 
    </body> 
</html>

, если вам нужно добавить карты Google (Mercator), вам нужно взглянуть на этих те же:

https://gis.stackexchange.com/questions/17231/openlayers-and-geoserver-osm-google-maps-and-wms-overlay OSM: convert ties from projected coordinates in spherical mercator "EPSG:900913" to "EPSG:4326" coordinates http://docs.openlayers.org/library/spherical_mercator.html

Надеется, что это помогает,

источник

2013-08-28 13:51:07 Gery

GeoJSON + OpenLayers + OSM

ответ

Смежные вопросы