openstreetmap - GeoJSON + OpenLayers + OSM -
this basic example, modified openlayers website.
- when use wms (r2 commented, r3 uncommented) works.
- when use osm (r2 uncommented, r2 commented) wont work.
i want use osm, missing here?
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)); this snippet code can used in html page with:
<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>
for osm need add projection stuff (in example you're mixing lon/lat osm):
http://wiki.openstreetmap.org/wiki/epsg:3857
such here: 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 simple osm map</div> <div id="map" class="smallmap"></div> <div id="docs"> <p>this example shows simple osm layout minimal controls.</p> </div> </body> </html> if need add google maps (mercator), you'd need take @ these ones also:
https://gis.stackexchange.com/questions/17231/openlayers-and-geoserver-osm-google-maps-and-wms-overlay osm: convert ties projected coordinates in spherical mercator "epsg:900913" "epsg:4326" coordinates http://docs.openlayers.org/library/spherical_mercator.html
hope helps,
Comments
Post a Comment