Когда в качестве базового слоя выбираю Google, точки из kml слоев отображаются не там где нужно,не на своих координатах (координаты проверены, ошибки быть не может). При этом их местоположение меняется при зуммировании и передвижении карты мышью и контролерами.
Код: Выделить всё
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="OpenLayers.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style type="text/css">
/* 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: 1200px;
height: 680px;
border: 1px solid black;
}
#wrapper {
width: 700px;
}
#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;
backgroundelement.style {
height: 120%;
overflow: hidden;
position: relative;: #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 src="http://maps.google.com/maps?file=api&v=2&key=ключ" type="text/javascript" encoding="utf-8"></script>
<script src="lib/Firebug/firebug.js"></script>
<script type="text/javascript">
var map, layer, geojson, vectors, tty;
var mal = new Array(6);
var tell,tell_l;
var cql_query='';
format = 'image/png';
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
function init(){
var options = {
controls: [],
projection: "EPSG:4326",
units: 'degrees'
};
map = new OpenLayers.Map( 'map', options);
vectors = new OpenLayers.Layer.Vector(
"Vector Layer"
);
map.addLayers([vectors]);
layer1 = new OpenLayers.Layer.WMS( "Границы Российской Федерации","#############", {layers: 'oblasts'});
map.addLayer(layer1);
layer = new OpenLayers.Layer.WMS( "Каталог", "############", {layers: '#############', transparent: 'true'},{'reproject': true}
);
map.addLayer(layer);
layer5 = new OpenLayers.Layer.Google( "Слой Гугла", {type: G_SATELLITE_MAP, numZoomLevels: 20} );
map.addLayer(layer5);
layer6 = new OpenLayers.Layer.Google( "Слой Гугла(рельеф)", {type: G_PHYSICAL_MAP, numZoomLevels: 20} );
map.addLayer(layer6);
layer2 = new OpenLayers.Layer.WMS( "Населеннные пункты Российской Федерации", "###############", {layers: '########', transparent: 'false'} );
map.addLayer(layer2);
var kml1 = new OpenLayers.Layer.Vector("KML", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "kml1.kml",
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true
})
})
});
var kml = new OpenLayers.Layer.Vector("KML", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "kml.kml",
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true
})
})
});
map.addLayers([kml, kml1]);
map.addControl(new OpenLayers.Control.PanZoomBar({position: new OpenLayers.Pixel(2, 15)}));
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.Scale($('scale')));
map.addControl( new OpenLayers.Control.LayerSwitcher() );
var panel = new OpenLayers.Control.EditingToolbar(vectors);
map.addControl(panel);
geojson = new OpenLayers.Format.GeoJSON();
map.setCenter(new OpenLayers.LonLat(102, 63), 3);
drawCtrl = map.getControlsByClass('OpenLayers.Control.DrawFeature')[2];
drawCtrl.events.register("featureadded", drawCtrl, function(e) {
console.log(geojson.write(e.feature, true));
console.log(e.feature.geometry.getVertices());
tty=e.feature.geometry.getVertices();
var i = 0;
tell = "";
for (i=0; i<tty.length; i++)
{
tell = tell + tty[i].x + " " + tty[i].y + ", ";
}
tell = tell + tty[0].x + " " + tty[0].y;
tell_l=tell;
document.getElementById('features').value=tell;
});
map.events.register('click', map, function (e) {
document.getElementById('nodelist').innerHTML = "Загрузка... подождите...";
var params = {
REQUEST: "GetFeatureInfo",
EXCEPTIONS: "application/vnd.ogc.se_xml",
BBOX: map.getExtent().toBBOX(),
X: e.xy.x,
Y: e.xy.y,
INFO_FORMAT: 'text/html',
QUERY_LAYERS: map.layers[2].params.LAYERS,
FEATURE_COUNT: 50,
Layers: '###########################',
Styles: '',
Srs: 'EPSG:4326',
WIDTH: map.size.w,
HEIGHT: map.size.h,
format: format};
if(cql_query)
{ params.CQL_FILTER=cql_query; }
OpenLayers.loadURL("############################", params, this, setHTML, setHTML);
OpenLayers.Event.stop(e);
});
}
function serialize() {
var str = geojson.write(vectors.features, true);
document.getElementById('features').value = str.features;
}
(function() {
var roots = ["draw_point", "draw_line", "draw_polygon", "pan"];
var onImages = [];
var offImages = [];
for(var i=0; i<roots.length; ++i) {
onImages[i] = new Image();
onImages[i].src = "../theme/default/img/" + roots[i] + "_on.png";
offImages[i] = new Image();
offImages[i].src = "../theme/default/img/" + roots[i] + "_on.png";
}
})();
// sets the HTML provided into the nodelist element
function setHTML(response){
var http;
if (response.responseText != "") {
document.getElementById('nodelist').innerHTML = response.responseText;
}
else
{
document.getElementById('nodelist').innerHTML = '<html> <body>Данные не могут быть загружены</body> </html>';
}
};
</script>
</head>
<body onload="init()">
<div id="map">
</div>
<div id="wrapper">
<div id="location">Позиция указателя</div>
<div id="scale"></div>
</div>
Минимальный год: <input type="text" id="min_year_filter"><br />
Максимальный год: <input type="text" id="max_year_filter"><br />
<br />
Минимальная Величина1: <input type="text" id="min_e_filter"><br />
Максимальная Величина1: <input type="text" id="max_e_filter"><br />
<br />
Минимальная Величина2: <input type="text" id="min_h_filter"><br />
Максимальная Величина2: <input type="text" id="max_h_filter"><br />
<input type="button" value="Обновить слой" id="update_layer_button">
<script>
function get_field_value(field_id, ret_if_nan)
{
var result;
result = parseFloat($(field_id).val());
if (isNaN(result)) {
result = ret_if_nan;
}
return result;
}
function prep_cql(param_name, min_val, max_val)
{
return param_name+" BETWEEN "+min_val+" AND "+max_val;
}
$(document).ready(function() {
$('#update_layer_button').click(function() {
var CQL_AND=' AND ';
min_m = get_field_value("#min_e_filter", 0);
max_m = get_field_value("#max_e_filter", 100000);
min_y = get_field_value("#min_year_filter", 0);
max_y = get_field_value("#max_year_filter", 2000);
min_d = get_field_value("#min_h_filter", 0);
max_d = get_field_value("#max_h_filter", 100000);
pol=get_field_value("#max_h_filter", 100000);
cql_query ='';
cql_query = prep_cql("e", min_m, max_m) + CQL_AND + prep_cql("h", min_d, max_d);
cql_query = cql_query + CQL_AND + prep_cql("date_year", min_y, max_y);
if(tell){cql_query = cql_query + CQL_AND + " NOT DISJOINT(geom, POLYGON((" + tell + ")))";};
tell='';
map.layers[0].removeFeatures(map.layers[0].features[map.layers[0].features.length-1])
alert(cql_query);
layer.mergeNewParams({'CQL_FILTER': cql_query});
});
});
</script>
<div id="info">
<p>Features</p>
<input type="button" value="refresh" onclick="serialize();"><br>
<textarea id="features"></textarea>
</div>
<div id="nodelist">
<em>Щелкните на карте для получения данных слоя</em>
</div>
</body>
</html>