Re: [geoserver-es:740] Google maps

271 views

Skip to first unread message

Gabriel Roldan

unread,

Jul 24, 2012, 5:30:40 PM7/24/12

to geoser...@googlegroups.com

Comparto tu dolor, pero no has preguntado nada, ni descrito que has
intentado hasta ahora, con que errores te has encontrado, etc.
Nadie te va a solucionar tu problema, como mucho puedes esperar
obtener ayuda planteando un problema especifico.

Saludos,
Gabriel
2012/7/19 José Luis <joseluis...@gmail.com>:
> Amigos,
>
> Estoy intentando integrar Google maps como mapa base de un Web GIS. Llevo
> más de una semana con esto, volviéndome loco sin saber que configurar, si el
> GWC o otra cosa...
>
> Gracias!
>
> --
> Has recibido este mensaje por estar suscripto al grupo "GeoServer en
> Español" de Google Groups.
> Para escribir a este grupo, envía un e-mail a geoser...@googlegroups.com
> Para dejar el grupo, envía un e-mail a
> geoserver-es...@googlegroups.com
> Para más opciones, visita la página del grupo en
> http://groups.google.com/group/geoserver-es?hl=es

--
Gabriel Roldan
OpenGeo - http://opengeo.org
Expert service straight from the developers.

José Luis Mateos

unread,

Jul 25, 2012, 5:12:16 AM7/25/12

to geoser...@googlegroups.com

Tienes absolutamente toda la razón. Perdona, pero es que soy nuevo en todo esto. Soy arqueólogo y estoy intentando hacer un pequeño webgis para mi proyecto. Ahora he comprendido un poco mejor como funcionan opelayers y geoserver. He creado un documento HTML donde he incluido el api de google maps y los servicios wms de las capas que he cargado en geoserver. Por separado se ven perfectamente pero cuando los uno en único documento html no se visualizan. Debajo dejo el código de la página. Muchas gracias y lo siento de nuevo.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

<head>

<title>OpenLayers map preview</title>

/* General settings */

body {

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size: small;

}

/* Toolbar styles */

#toolbar {

position: relative;

padding-bottom: 0.5em;

display: none;

}

#toolbar ul {

list-style: none;

padding: 0;

margin: 0;

}

#toolbar ul li {

float: left;

padding-right: 1em;

padding-bottom: 0.5em;

}

#toolbar ul li a {

font-weight: bold;

font-size: smaller;

vertical-align: middle;

color: black;

text-decoration: none;

}

#toolbar ul li a:hover {

text-decoration: underline;

}

#toolbar ul li * {

vertical-align: middle;

}

/* The map and the location bar */

#map {

clear: both;

position: relative;

width: 512px;

height: 491px;

border: 1px solid black;

}

#wrapper {

width: 512px;

}

#location {

float: right;

}

#options {

position: absolute;

left: 13px;

top: 7px;

z-index: 3000;

}

/* Styles used by the default GetFeatureInfo output, added to make IE happy */

table.featureInfo, table.featureInfo td, table.featureInfo th {

border: 1px solid #ddd;

border-collapse: collapse;

margin: 0;

padding: 0;

font-size: 90%;

padding: .2em .1em;

}

table.featureInfo th {

padding: .2em .2em;

text-transform: uppercase;

font-weight: bold;

background: #eee;

}

table.featureInfo td {

background: #fff;

}

table.featureInfo tr.odd td {

background: #eee;

}

table.featureInfo caption {

text-align: left;

font-size: 100%;

font-weight: bold;

text-transform: uppercase;

padding: .2em .2em;

}

</style>

</script>

var map;

var untiled;

var tiled;

var pureCoverage = false;

// pink tile avoidance

OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;

// make OL compute scale according to WMS spec

OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

function init(){

// if this is just a coverage or a group of them, disable a few items,

// and default to jpeg format

format = 'image/png';

if(pureCoverage) {

document.getElementById('filterType').disabled = true;

document.getElementById('filter').disabled = true;

document.getElementById('antialiasSelector').disabled = true;

document.getElementById('updateFilterButton').disabled = true;

document.getElementById('resetFilterButton').disabled = true;

document.getElementById('jpeg').selected = true;

format = "image/jpeg";

}

var bounds = new OpenLayers.Bounds(

71, 23.2666666667,

71.9246666667, 24.1545555556

);

var options = {

controls: [],

maxExtent: bounds,

maxResolution: 0.0036119791667969,

projection: "EPSG:3857",

units: 'm'

};

map = new OpenLayers.Map('map',{controls: [

new OpenLayers.Control.Navigation(),

new OpenLayers.Control.ArgParser(),

new OpenLayers.Control.Attribution(),

new OpenLayers.Control.OverviewMap()

]

});

var gphy = new OpenLayers.Layer.Google(

"Google Physical",

{type: google.maps.MapTypeId.TERRAIN}

);

var gmap = new OpenLayers.Layer.Google(

"Google Streets", // the default

{numZoomLevels: 20}

);

var ghyb = new OpenLayers.Layer.Google(

"Google Hybrid",

{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}

);

var gsat = new OpenLayers.Layer.Google(

"Google Satellite",

{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}

);

// Google.v3 uses EPSG:900913 as projection, so we have to

// transform our coordinates

map.setCenter(new OpenLayers.LonLat( 7929127, 2675085).transform(

new OpenLayers.Projection("EPSG:3857"),

map.getProjectionObject()

), 7);

}

// setup tiled layer

tiled = new OpenLayers.Layer.WMS(

"NoGAP_webgis:NoGAP_Sites_oct2011 - Tiled", "http://localhost:8080/geoserver/NoGAP_webgis/wms",

{

LAYERS: 'NoGAP_webgis:NoGAP_Sites_oct2011',

STYLES: '',

format: format,

tiled: true,

tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom

{

buffer: 0,

displayOutsideMaxExtent: true,

isBaseLayer: true,

yx : {'EPSG:3857' : false}

}

);

// setup single tiled layer

untiled = new OpenLayers.Layer.WMS(

"NoGAP_webgis:NoGAP_Sites_oct2011 - Untiled", "http://localhost:8080/geoserver/NoGAP_webgis/wms",

{

LAYERS: 'NoGAP_webgis:NoGAP_Sites_oct2011',

STYLES: '',

format: format

{

singleTile: true,

ratio: 1,

isBaseLayer: true,

yx : {'EPSG:3857' : false}

}

);

map.addLayers([untiled, tiled, gphy, gmap, ghyb, gsat]);

// build up all controls

map.addControl(new OpenLayers.Control.PanZoomBar({

position: new OpenLayers.Pixel(2, 15)

}));

map.addControl(new OpenLayers.Control.Navigation());

map.addControl(new OpenLayers.Control.Scale($('scale')));

map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));

map.zoomToExtent(bounds);

// wire up the option button

var options = document.getElementById("options");

options.onclick = toggleControlPanel;

// support GetFeatureInfo

map.events.register('click', map, function (e) {

document.getElementById('nodelist').innerHTML = "Loading... please wait...";

var params = {

REQUEST: "GetFeatureInfo",

EXCEPTIONS: "application/vnd.ogc.se_xml",

BBOX: map.getExtent().toBBOX(),

SERVICE: "WMS",

INFO_FORMAT: 'text/html',

QUERY_LAYERS: map.layers[0].params.LAYERS,

FEATURE_COUNT: 50,

Layers: 'NoGAP_webgis:NoGAP_Sites_oct2011',

WIDTH: map.size.w,

HEIGHT: map.size.h,

format: format,

styles: map.layers[0].params.STYLES,

srs: map.layers[0].params.SRS};

// handle the wms 1.3 vs wms 1.1 madness

if(map.layers[0].params.VERSION == "1.3.0") {

params.version = "1.3.0";

params.j = parseInt(e.xy.x);

params.i = parseInt(e.xy.y);

} else {

params.version = "1.1.1";

params.x = parseInt(e.xy.x);

params.y = parseInt(e.xy.y);

}

// merge filters

if(map.layers[0].params.CQL_FILTER != null) {

params.cql_filter = map.layers[0].params.CQL_FILTER;

}

if(map.layers[0].params.FILTER != null) {

params.filter = map.layers[0].params.FILTER;

}

if(map.layers[0].params.FEATUREID) {

params.featureid = map.layers[0].params.FEATUREID;

}

OpenLayers.loadURL("http://localhost:8080/geoserver/NoGAP_webgis/wms", params, this, setHTML, setHTML);

OpenLayers.Event.stop(e);

});

}

// sets the HTML provided into the nodelist element

function setHTML(response){

document.getElementById('nodelist').innerHTML = response.responseText;

};

// shows/hide the control panel

function toggleControlPanel(event){

var toolbar = document.getElementById("toolbar");

if (toolbar.style.display == "none") {

toolbar.style.display = "block";

}

else {

toolbar.style.display = "none";

}

event.stopPropagation();

map.updateSize()

}

// Tiling mode, can be 'tiled' or 'untiled'

function setTileMode(tilingMode){

if (tilingMode == 'tiled') {

untiled.setVisibility(false);

tiled.setVisibility(true);

map.setBaseLayer(tiled);

}

else {

untiled.setVisibility(true);

tiled.setVisibility(false);

map.setBaseLayer(untiled);

}

// Transition effect, can be null or 'resize'

function setTransitionMode(transitionEffect){

if (transitionEffect === 'resize') {

tiled.transitionEffect = transitionEffect;

untiled.transitionEffect = transitionEffect;

}

else {

tiled.transitionEffect = null;

untiled.transitionEffect = null;

}

// changes the current tile format

function setImageFormat(mime){

// we may be switching format on setup

if(tiled == null)

return;

tiled.mergeNewParams({

format: mime

});

untiled.mergeNewParams({

format: mime

});

var paletteSelector = document.getElementById('paletteSelector')

if (mime == 'image/jpeg') {

paletteSelector.selectedIndex = 0;

setPalette('');

paletteSelector.disabled = true;

}

else {

paletteSelector.disabled = false;

}

// sets the chosen style

function setStyle(style){

// we may be switching style on setup

if(tiled == null)

return;

tiled.mergeNewParams({

styles: style

});

untiled.mergeNewParams({

styles: style

});

}

// sets the chosen WMS version

function setWMSVersion(wmsVersion){

// we may be switching style on setup

if(wmsVersion == null)

return;

if(wmsVersion == "1.3.0") {

origin = map.maxExtent.bottom + ',' + map.maxExtent.left;

} else {

origin = map.maxExtent.left + ',' + map.maxExtent.bottom;

}

tiled.mergeNewParams({

version: wmsVersion,

tilesOrigin : origin

});

untiled.mergeNewParams({

version: wmsVersion

});

}

function setAntialiasMode(mode){

tiled.mergeNewParams({

format_options: 'antialias:' + mode

});

untiled.mergeNewParams({

format_options: 'antialias:' + mode

});

}

function setPalette(mode){

if (mode == '') {

tiled.mergeNewParams({

palette: null

});

untiled.mergeNewParams({

palette: null

});

}

else {

tiled.mergeNewParams({

palette: mode

});

untiled.mergeNewParams({

palette: mode

});

}

function setWidth(size){

var mapDiv = document.getElementById('map');

var wrapper = document.getElementById('wrapper');

if (size == "auto") {

// reset back to the default value

mapDiv.style.width = null;

wrapper.style.width = null;

}

else {

mapDiv.style.width = size + "px";

wrapper.style.width = size + "px";

}

// notify OL that we changed the size of the map div

map.updateSize();

}

function setHeight(size){

var mapDiv = document.getElementById('map');

if (size == "auto") {

// reset back to the default value

mapDiv.style.height = null;

}

else {

mapDiv.style.height = size + "px";

}

// notify OL that we changed the size of the map div

map.updateSize();

}

function updateFilter(){

if(pureCoverage)

return;

var filterType = document.getElementById('filterType').value;

var filter = document.getElementById('filter').value;

// by default, reset all filters

var filterParams = {

filter: null,

cql_filter: null,

featureId: null

};

if (OpenLayers.String.trim(filter) != "") {

if (filterType == "cql")

filterParams["cql_filter"] = filter;

if (filterType == "ogc")

filterParams["filter"] = filter;

if (filterType == "fid")

filterParams["featureId"] = filter;

}

// merge the new filter definitions

mergeNewParams(filterParams);

}

function resetFilter() {

if(pureCoverage)

return;

document.getElementById('filter').value = "";

updateFilter();

}

function mergeNewParams(params){

tiled.mergeNewParams(params);

untiled.mergeNewParams(params);

}

</script>

</head>

<ul>

<li>

<a>WMS version:</a>

</select>

</li>

<li>

<a>Tiling:</a>

<option value="untiled">Single tile</option>

<option value="tiled">Tiled</option>

</select>

</li>

<li>

<a>Transition effect:</a>

<option value="resize">Resize</option>

</select>

</li>

<li>

<a>Antialias:</a>

<option value="none">Disabled</option>

</select>

</li>

<li>

<a>Format:</a>

</select>

</li>

<li>

<a>Styles:</a>

<option value="">Default</option>

</select>

</li>

<!-- Commented out for the moment, some code needs to be extended in

order to list the available palettes

<li>

<a>Palette:</a>

</select>

</li>

-->

<li>

<a>Width/Height:</a>

<!--

These values come from a statistics of the viewable area given a certain screen area

(but have been adapted a litte, simplified numbers, added some resolutions for wide screen)

You can find them here: http://www.evolt.org/article/Real_World_Browser_Size_Stats_Part_II/20/2297/

--><option value="auto">Auto</option>

</select>

</select>

</li>

<li>

<a>Filter:</a>

<option value="fid">FeatureID</option>

</select>

</li>

</ul>

</div>

</div>

<div id="location">location</div>

</div>

<em>Click on the map to get feature info</em>

</div>

</body>

</html>

Gabriel Roldan

unread,

Jul 25, 2012, 5:11:58 PM7/25/12

to geoser...@googlegroups.com

No he probado el codigo, asi que te respondo casi de memoria.

Me parece que tu pagina esta basada en el "layer preview" de
geoserver, que _no_ es compatible con gwc porque geoserver calcula el
tileOrigin basado en el extent de la capa, pero gwc necesita que las
consultas tengan un bounding box de cuya relacion con el tamanio de
los tiles en pixels se pueda inferir a que "gridset" de geowebcache
corresponde.
Es decir. Si modificas tu codigo javascript para que sea como el de la
pagina de "demo" de gwc para cada layer, entonces OL enviara las
consultas correctas basado en las resoluciones de los gridsets.

Espero eso ayude,
Gabriel

2012/7/25 José Luis Mateos <joseluis...@gmail.com>:

José Luis Mateos

unread,

Jul 26, 2012, 3:38:48 AM7/26/12

to geoser...@googlegroups.com

Gracias! He añadido el bounding box y solucionado el tema de las proyecciones y funciona perfectamente.

Muchas gracias de nuevo!

José Luis

Reply all

Reply to author

Forward

0 new messages