<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Zoom_scale</title>
<link rel="stylesheet" href="../style.css" type="text/css" />
<style type="text/css">
.stitre {
position:absolute;
top:17px;
left:150px;
color:red
}
h1 {
font-size: 130%;
margin-bottom: 0.5em;
border-bottom: 1px solid #FCB100;
}
html, body, #basicMap {
width: 500px;
height: 500px;
top-margin: 20; }
div.olMapViewport {text-align: left; }
div.olControlLayerSwitcher { width:150px;}
div.olLayerGooglePoweredBy {display:none;}
div.olLayerGoogleCopyright,div.olLayerGooglePoweredBy { display: none !important;}
</style>
<script src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script>
<script src='http://openlayers.org/api/OpenLayers.js'></script>
<!-- <script src="http://pofableau.com/openlayer/google-v3.js"></script>-->
<script>
function init() {
map = new OpenLayers.Map("basicMap");
var ghyb = new OpenLayers.Layer.Google( "Google Hybride",{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20} );
var gstr = new OpenLayers.Layer.Google( "Google Streets", {numZoomLevels: 20});
// Construction carte
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position = new OpenLayers.LonLat(2.534904,48.387558).transform( fromProjection, toProjection);
var zoom = 18 ;
//-----essai ajout couche png ------
//construction d'une couche ( overlay ) source image "new OpenLayers.Layer.Markers(.argument.)".
//L'argument nomme la couche "Calque".
//l’objet créé est référencé dans une variable appelée "couche_calque".
// axe de l'image size/2 et son positionnement
var options= {opacity: 0.7};
var couche_calque = new OpenLayers.Layer.Markers("Calque",options);
var dimension_icon = new OpenLayers.Size(200,200);
var offset_icon = new OpenLayers.Pixel(-(dimension_icon.w/2), -dimension_icon.h/2);
var icon = new OpenLayers.Icon('http://pofableau.com/openlayer/calque.png', dimension_icon, offset_icon);
lonlat=new OpenLayers.LonLat(2.534904,48.387558).transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
);
var couche1=new OpenLayers.Marker(lonlat, icon);
couche_calque.addMarker(couche1);
// ----Fin essai couche png --------
// ----essai OpenLayers.Layer.Vector -----
// var style = new OpenLayers.Style(
// OpenLayers.Util.applyDefaults(
// {fillColor: "green", fillOpacity: 1, strokeColor: "black"},
// {
// rules: [
// new OpenLayers.Rule({
// maxScaleDenominator: 200000000,
// minScaleDenominator: 100000000,
// symbolizer: {
// externalGraphic: 'http://pofableau.com/openlayer/a_img/travauxorange.png',
// graphicHeight: 60*18/10 ,
// graphicWidth: 65*18/10
// }
// }),
// new OpenLayers.Rule({
// maxScaleDenominator: 100000000,
// symbolizer: {
// externalGraphic: 'http://pofableau.com/openlayer/a_img/travauxorange.png',
// graphicHeight: 60*18/5,
// graphicWidth: 65*18/5
// }
// })
// ]
// }));
// var depart = new OpenLayers.Layer.Vector("Depart", {
// styleMap: new OpenLayers.StyleMap(style) });
// var feature1 = new OpenLayers.Feature.Vector(
// new OpenLayers.Geometry.Point(2.544000,48.487000).transform(
// new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
// new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
// ),
// {some:'data'},
// {externalGraphic: 'http://pofableau.com/openlayer/a_img/travauxorange.png', graphicHeight: graphicHeight, graphicWidth: scaleFactorWidth});
// depart.addFeatures(feature1);
// map.addLayer(depart);
// ---Fin essai --OpenLayers.Layer.Vector ----
// deuxieme approche overlay vector -------
var z= map.getScale();
var graphicWidth = 55;
var graphicHeight = 50;
var scaleFactorWidth = graphicWidth * z;
var scaleFactorHeight = graphicHeight * z;
var style = new OpenLayers.Style(
{
fillColor: "green",
fillOpacity: 1,
strokeColor: "black"
},
{
rules: [
new OpenLayers.Rule({
maxScaleDenominator: 200000000,
minScaleDenominator: 100000000,
symbolizer: {
externalGraphic: 'http://pofableau.com/openlayer/a_img/travauxorange.png',
graphicHeight: 60*18/10 ,
graphicWidth: 65*18/10
}
}),
new OpenLayers.Rule({
maxScaleDenominator: 100000000,
symbolizer: {
externalGraphic: 'http://pofableau.com/openlayer/a_img/travauxorange.png',
graphicHeight: 60*18/5,
graphicWidth: 65*18/5
}
})
]
});
/**
* Create a style instance that is a collection of rules with symbolizers.
* Use a default symbolizer to extend symoblizers for all rules.
*/
style = new OpenLayers.Style({
externalGraphic: 'http://pofableau.com/openlayer/a_img/travauxorange.png',
graphicHeight: "${size}",
graphicWidth: "${size}"
},{ context: {
size: function() {
return 60*18/map.getZoom();
}
}});
var depart2 = new OpenLayers.Layer.Vector("Départ2", {
styleMap: new OpenLayers.StyleMap(style) }
);
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(2.534000,48.387000).transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
),
{some:'data'}
);
depart2.addFeatures(feature);
// ----affichage des cartes --------
map.addLayer(gstr);
map.addLayer(ghyb);
//map.addLayer(depart);
map.addLayer(depart2);
//----affichage des overlays------------------------
map.addLayer(couche_calque);
map.setCenter(position, zoom );
map.addControl(new OpenLayers.Control.LayerSwitcher());
}
</script>
</head>
<body onload="init();">
<h1 id="title">Gros Sablons </h1>
<div class="stitre" >Secteur Nord-Ouest</div>
<div id="basicMap"></div>
</body>
</html>