[mapserver-users] How to add marker on openlayers ?
李杨
gisyangli at gmail.com
Sat Sep 22 09:09:52 PDT 2012
I before use a map,then I can add markers. But when I use mapcache
tile the map, then why can not show the markers
the former js code like this:, the marker can show, and it is not a tile map .
------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>India Mapserver</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map,baseLayer;
var lat;
var lng;
var pointslng = [];
var pointslat = [];
var objNodeList;
var Node;
var format;
var isChrome;
try //Internet Explorer
{
xdoc=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xdoc=document.implementation.createDocument("","",null);
}
catch(e) {alert(e.message)}
}
try
{
xdoc.async=false;
xdoc.load("getDeviceInfo.php.xml");
}
catch(e) {
isChrome=true;
xdoc = null;
}
if(isChrome)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","http://61.149.194.113/getDeviceInfo.php.xml",false);
xmlhttp.send(null);
xdoc = xmlhttp.responseXML;
}
nodes = xdoc.documentElement.childNodes;
objNodeList = xdoc.getElementsByTagName("marker");
for ( var i=0; i<objNodeList.length; i++)
{
Node =objNodeList[i];
for (var k=0; k< Node.attributes.length; k++)
{
if(Node.attributes[k].nodeName == "lng")
lng = Node.attributes[k].nodeValue;
if(Node.attributes[k].nodeName == "lat")
lat = Node.attributes[k].nodeValue;
}
pointslng.push( lng ) ;
pointslat.push( lat ) ;
}
function init() {
// The overlay layer for our marker, with a simple diamond as symbol
var overlay = new OpenLayers.Layer.Vector('Overlay', {
styleMap: new OpenLayers.StyleMap({
externalGraphic: 'marker.png',
graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
title: '${tooltip}'
})
});
for (var l=0; l< pointslng.length; l++)
{
// The location of our marker and popup. We usually think in geographic
// coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
var myLocation = new OpenLayers.Geometry.Point( pointslng[l],pointslat[l])
.transform('EPSG:4326', 'EPSG:3857');
// We add the marker with a tooltip text to the overlay
overlay.addFeatures([
new OpenLayers.Feature.Vector(myLocation, {tooltip: 'OpenLayers'})
]);
}
// A popup with some information about our location
var popup = new OpenLayers.Popup.FramedCloud("Popup",
myLocation.getBounds().getCenterLonLat(), null,
'<a target="_blank" href="http://openlayers.org/">We</a> ' +
'could be here.<br>Or elsewhere.', null,
true // <-- true if we want a close (X) button, false otherwise
);
map = new OpenLayers.Map({
div:"map",projection:"EPSG:3857",
layers:[ new OpenLayers.Layer.MapServer("OSM
map","/cgi-bin/mapserv?",{map:"/root/osm-demo/basemaps/osm-google.map",layers:"all",map_image_type:"png"},{singleTile:true,ratio:1.0})],
center:myLocation.getBounds().getCenterLonLat(),zoom:5});
map.addLayer(overlay);
}
</script>
<style>
@media screen
{
#map{width: 800px; height:400px; border: 2px solid black;}
}
</style>
</head>
<body onload="init()">
<h3>India Mapserver</h3>
<div id="map"></div>
</body>
</html>
--------------------------------------------------------------------------------------------
For reason fast the map show, I use mapcache,
when i use the mapcache tile map.
I just use the add-marker code before add to this one:
______________________________________________________
<html="http://www.w3.org/1999/xhtml">
<head>
<title>mod-mapcache demo service</title>
<style type="text/css">
#map {
width: 100%;
height: 100%;
border: 1px solid black;
}
</style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map,baseLayer;
var lat;
var lng;
var pointslng = [];
var pointslat = [];
var objNodeList;
var Node;
var format;
var isChrome;
try //Internet Explorer
{
xdoc=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xdoc=document.implementation.createDocument("","",null);
}
catch(e) {alert(e.message)}
}
try
{
xdoc.async=false;
xdoc.load("getDeviceInfo.php.xml");
}
catch(e) {
isChrome=true;
xdoc = null;
}
if(isChrome)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","http://61.149.194.113/getDeviceInfo.php.xml",false);
xmlhttp.send(null);
xdoc = xmlhttp.responseXML;
}
nodes = xdoc.documentElement.childNodes;
objNodeList = xdoc.getElementsByTagName("marker");
for ( var i=0; i<objNodeList.length; i++)
{
Node =objNodeList[i];
for (var k=0; k< Node.attributes.length; k++)
{
if(Node.attributes[k].nodeName == "lng")
lng = Node.attributes[k].nodeValue;
if(Node.attributes[k].nodeName == "lat")
lat = Node.attributes[k].nodeValue;
}
pointslng.push( lng ) ;
pointslat.push( lat ) ;
}
function init(){
map = new OpenLayers.Map( 'map', {
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
var osm_WGS84_tms_layer = new OpenLayers.Layer.TMS( "osm-WGS84-TMS",
"http://61.149.194.113/mapcache/tms/",
{ layername: 'osm at WGS84', type: "png", serviceVersion:"1.0.0",
gutter:0,buffer:0,isBaseLayer:true,transitionEffect:'resize',
tileOrigin: new OpenLayers.LonLat(-180.000000,-90.000000),
resolutions:[0.70312500000000000000,0.35156250000000000000,0.17578125000000000000,0.08789062500000000000,0.04394531250000000000,0.02197265625000000000,0.01098632812500000000,0.00549316406250000000,0.00274658203125000000,0.00137329101562500000,0.00068664550781250000,0.00034332275390625000,0.00017166137695312500,0.00008583068847656250,0.00004291534423828120,0.00002145767211914060,0.00001072883605957030,0.00000536441802978516],
zoomOffset:0,
units:"dd",
maxExtent: new
OpenLayers.Bounds(-180.000000,-90.000000,180.000000,90.000000),
projection: new OpenLayers.Projection("EPSG:4326".toUpperCase()),
sphericalMercator: false
}
);
map.addLayer(osm_WGS84_tms_layer)
var osm_g_tms_layer = new OpenLayers.Layer.TMS( "osm-g-TMS",
"http://199.195.214.155/mapcache/tms/",
{ layername: 'osm at g', type: "png", serviceVersion:"1.0.0",
gutter:0,buffer:0,isBaseLayer:true,transitionEffect:'resize',
tileOrigin: new OpenLayers.LonLat(-20037508.342789,-20037508.342789),
resolutions:[156543.03392804099712520838,78271.51696402048401068896,39135.75848201022745342925,19567.87924100512100267224,9783.93962050256050133612,4891.96981025128025066806,2445.98490512564012533403,1222.99245256282006266702,611.49622628141003133351,305.74811314070478829308,152.87405657035250783338,76.43702828517623970583,38.21851414258812695834,19.10925707129405992646,9.55462853564703173959,4.77731426782351586979,2.38865713391175793490,1.19432856695587897633,0.59716428347793950593],
zoomOffset:0,
units:"m",
maxExtent: new
OpenLayers.Bounds(-20037508.342789,-20037508.342789,20037508.342789,20037508.342789),
projection: new OpenLayers.Projection("EPSG:900913".toUpperCase()),
sphericalMercator: true
}
);
map.addLayer(osm_g_tms_layer)
var overlay = new OpenLayers.Layer.Vector('Overlay', {
styleMap: new OpenLayers.StyleMap({
externalGraphic: 'marker.png',
graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
title: '${tooltip}'
})
});
for (var l=0; l< pointslng.length; l++)
{
// The location of our marker and popup. We usually think in geographic
// coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
var myLocation = new OpenLayers.Geometry.Point( pointslng[l],pointslat[l])
.transform('EPSG:4326', 'EPSG:3857');
alert("m");
// We add the marker with a tooltip text to the overlay
overlay.addFeatures([
new OpenLayers.Feature.Vector(myLocation, {tooltip: 'OpenLayers'})
]);
}
map.addLayers(overlay)
alert("asd");
if(!map.getCenter())
map.zoomToMaxExtent();
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
}
</script>
</head>
<body onload="init()">
<div id="map">
</div>
</body>
</html>
---------------------------------------------------------------------------------------
the map load speed is very fast, but the marker disappear.
The marker location info is in " latitude & longitute",
I guess is the projection problem.
Can anyone help me ?
--
Yang Li
GIS Developer
P.R.China
More information about the MapServer-users
mailing list