Включение/Отключение базовых карт в OpenLayers и Geoext2
-
- Активный участник
- Сообщения: 127
- Зарегистрирован: 04 май 2012, 21:23
- Репутация: 12
- Откуда: Пенза
Включение/Отключение базовых карт в OpenLayers и Geoext2
Добрый день! Работаю в связке Openlayers 2.13 + Geoext 2 + ExtJS 4.2.
На странице отображаются 5 слоёв - 4 пользовательских, 1 базовый - Google спутник.
Пользовательские слои включаются и отключаются через checkbox'ы. С этим проблем нет.
А вот как заставить включаться и отключаться базовый слой, в данном случае Google спутник? Если я исключаю его из кода страницы, то карта перестаёт отображаться совсем.
На странице отображаются 5 слоёв - 4 пользовательских, 1 базовый - Google спутник.
Пользовательские слои включаются и отключаются через checkbox'ы. С этим проблем нет.
А вот как заставить включаться и отключаться базовый слой, в данном случае Google спутник? Если я исключаю его из кода страницы, то карта перестаёт отображаться совсем.
-
- Активный участник
- Сообщения: 145
- Зарегистрирован: 14 апр 2010, 14:11
- Репутация: 44
- Откуда: Екатеринбург
Re: Включение/Отключение базовых карт в OpenLayers и Geoext
Добрый день!
Очень сложно понять вашу проблему без кода. Приведите пример на http://jsfiddle.net, чтобы мы могли помочь Вам не развивая телепатические способности.
Очень сложно понять вашу проблему без кода. Приведите пример на http://jsfiddle.net, чтобы мы могли помочь Вам не развивая телепатические способности.
-
- Активный участник
- Сообщения: 127
- Зарегистрирован: 04 май 2012, 21:23
- Репутация: 12
- Откуда: Пенза
Re: Включение/Отключение базовых карт в OpenLayers и Geoext
Выкладываю код здесь.
Ext.require([
'Ext.container.Viewport',
'Ext.window.MessageBox',
'GeoExt.panel.Map',
'Ext.layout.container.Border',
'GeoExt.tree.Panel',
'Ext.tree.plugin.TreeViewDragDrop',
'GeoExt.panel.Map',
'GeoExt.panel.Legend',
'GeoExt.tree.OverlayLayerContainer',
'GeoExt.tree.BaseLayerContainer',
'GeoExt.data.LayerTreeModel',
'GeoExt.tree.View',
'GeoExt.tree.LayerNode',
'GeoExt.container.WmsLegend',
'GeoExt.tree.Column',
'Ext.util.Point'
]);
Ext.application({
name: 'Геоинформационный портал Пензенской области',
launch: function(){
var map = new OpenLayers.Map("map", {
projection: "EPSG:3857",
displayProjection: "EPSG:4326",
units: 'degree',
numZoomLevels: 20,
//allOvelays: true
});
map.addControl(new OpenLayers.Control.ScaleLine());
map.addControl(new OpenLayers.Control.Attribution());
map.addControl(new OpenLayers.Control.MousePosition());
var google_satellite = new OpenLayers.Layer.Google("Google Satellite",
{
type: google.maps.MapTypeId.SATELLITE
},
{
isBaseLayer: true
}
);
var dochetv_web = new OpenLayers.Layer.WMS("Дочетвертичные отложения",
"http://localhost:8080/geoserver/spatial_pnz/wms",
{
layers: "dochetv_web",
transparent: true,
format: 'image/png',
},
{
isBaseLayer: false,
singleTile: true,
visibility: true
}
);
var chetv_web = new OpenLayers.Layer.WMS("Неоген-четвертичные отложения",
"http://localhost:8080/geoserver/spatial_pnz/wms",
{
layers: "chetv_web",
transparent: true,
format: 'image/png',
},
{
isBaseLayer: false,
singleTile: true,
visibility: true
}
);
var atd_web = new OpenLayers.Layer.WMS("Административное деление",
"http://localhost:8080/geoserver/spatial_pnz/wms",
{
layers: "atd_web",
transparent: true,
format: 'image/png',
},
{
isBaseLayer: false,
singleTile: true,
visibility: true
}
);
var nas_punkt_web = new OpenLayers.Layer.WMS("Населенные пункты",
"http://localhost:8080/geoserver/spatial_pnz/wms",
{
layers: "nas_punkt_web",
transparent: true,
format: 'image/png',
},
{
isBaseLayer: false,
singleTile: true,
visibility: true
}
);
map.addLayers([google_satellite, dochetv_web, chetv_web, atd_web, nas_punkt_web]);
var mappanel = Ext.create('GeoExt.panel.Map', {
title: 'Геоинформационный портал Пензенской области',
map: map,
center: [5012860.948, 7021052.071],
region: "center",
zoom: 8
});
var store = Ext.create('Ext.data.TreeStore', {
model: "GeoExt.data.LayerTreeModel",
root: {
text: 'Слои',
expanded: true,
children: [{
text: 'Административное устройство',
expanded: true,
leaf: false,
children: [{
text: 'Административное деление',
layer: atd_web,
leaf: true,
checked: true,
nodeType: 'gx_overlaylayercontainer'
}, {
text: 'Населенные пункты',
layer: nas_punkt_web,
leaf: true,
checked: true,
nodeType: 'gx_overlaylayercontainer'
}],
}, {
text: 'Природа',
leaf: false,
expanded: true,
children: [{
text: 'Неоген-четвертичные отложения',
layer: chetv_web,
leaf: true,
checked: true,
nodeType: 'gx_overlaylayercontainer'
}, {
text: 'Дочетвертичные отложения',
layer: dochetv_web,
leaf: true,
checked: true,
nodeType: 'gx_overlaylayercontainer'
}],
}, {
text: 'Базовые карты',
leaf: false,
expanded: true,
children: [{
text: 'Google Спутник',
layer: google_satellite,
leaf: true,
checked: true,
nodeType: 'gx_baselayercontainer'
}],
}],
},
});
var tree = Ext.create('GeoExt.tree.Panel', {
border: true,
region: "west",
title: "Layers",
width: 200,
split: true,
store: store,
collapsible: true,
collapseMode: "mini",
autoScroll: true,
rootVisible: true,
lines: true
});
var legendPanel = Ext.create('GeoExt.panel.Legend', {
defaults: {
labelCls: 'mylabel'
},
border: true,
title: "Legend",
width: 200,
split: true,
collapsible: true,
collapseMode: "mini",
autoScroll: true,
region: "east"
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
rtl: false,
hideBorders: false,
items: {
layout: 'border',
defferedRender: false,
items: [mappanel, tree, legendPanel]
}
});
}
});
Ext.require([
'Ext.container.Viewport',
'Ext.window.MessageBox',
'GeoExt.panel.Map',
'Ext.layout.container.Border',
'GeoExt.tree.Panel',
'Ext.tree.plugin.TreeViewDragDrop',
'GeoExt.panel.Map',
'GeoExt.panel.Legend',
'GeoExt.tree.OverlayLayerContainer',
'GeoExt.tree.BaseLayerContainer',
'GeoExt.data.LayerTreeModel',
'GeoExt.tree.View',
'GeoExt.tree.LayerNode',
'GeoExt.container.WmsLegend',
'GeoExt.tree.Column',
'Ext.util.Point'
]);
Ext.application({
name: 'Геоинформационный портал Пензенской области',
launch: function(){
var map = new OpenLayers.Map("map", {
projection: "EPSG:3857",
displayProjection: "EPSG:4326",
units: 'degree',
numZoomLevels: 20,
//allOvelays: true
});
map.addControl(new OpenLayers.Control.ScaleLine());
map.addControl(new OpenLayers.Control.Attribution());
map.addControl(new OpenLayers.Control.MousePosition());
var google_satellite = new OpenLayers.Layer.Google("Google Satellite",
{
type: google.maps.MapTypeId.SATELLITE
},
{
isBaseLayer: true
}
);
var dochetv_web = new OpenLayers.Layer.WMS("Дочетвертичные отложения",
"http://localhost:8080/geoserver/spatial_pnz/wms",
{
layers: "dochetv_web",
transparent: true,
format: 'image/png',
},
{
isBaseLayer: false,
singleTile: true,
visibility: true
}
);
var chetv_web = new OpenLayers.Layer.WMS("Неоген-четвертичные отложения",
"http://localhost:8080/geoserver/spatial_pnz/wms",
{
layers: "chetv_web",
transparent: true,
format: 'image/png',
},
{
isBaseLayer: false,
singleTile: true,
visibility: true
}
);
var atd_web = new OpenLayers.Layer.WMS("Административное деление",
"http://localhost:8080/geoserver/spatial_pnz/wms",
{
layers: "atd_web",
transparent: true,
format: 'image/png',
},
{
isBaseLayer: false,
singleTile: true,
visibility: true
}
);
var nas_punkt_web = new OpenLayers.Layer.WMS("Населенные пункты",
"http://localhost:8080/geoserver/spatial_pnz/wms",
{
layers: "nas_punkt_web",
transparent: true,
format: 'image/png',
},
{
isBaseLayer: false,
singleTile: true,
visibility: true
}
);
map.addLayers([google_satellite, dochetv_web, chetv_web, atd_web, nas_punkt_web]);
var mappanel = Ext.create('GeoExt.panel.Map', {
title: 'Геоинформационный портал Пензенской области',
map: map,
center: [5012860.948, 7021052.071],
region: "center",
zoom: 8
});
var store = Ext.create('Ext.data.TreeStore', {
model: "GeoExt.data.LayerTreeModel",
root: {
text: 'Слои',
expanded: true,
children: [{
text: 'Административное устройство',
expanded: true,
leaf: false,
children: [{
text: 'Административное деление',
layer: atd_web,
leaf: true,
checked: true,
nodeType: 'gx_overlaylayercontainer'
}, {
text: 'Населенные пункты',
layer: nas_punkt_web,
leaf: true,
checked: true,
nodeType: 'gx_overlaylayercontainer'
}],
}, {
text: 'Природа',
leaf: false,
expanded: true,
children: [{
text: 'Неоген-четвертичные отложения',
layer: chetv_web,
leaf: true,
checked: true,
nodeType: 'gx_overlaylayercontainer'
}, {
text: 'Дочетвертичные отложения',
layer: dochetv_web,
leaf: true,
checked: true,
nodeType: 'gx_overlaylayercontainer'
}],
}, {
text: 'Базовые карты',
leaf: false,
expanded: true,
children: [{
text: 'Google Спутник',
layer: google_satellite,
leaf: true,
checked: true,
nodeType: 'gx_baselayercontainer'
}],
}],
},
});
var tree = Ext.create('GeoExt.tree.Panel', {
border: true,
region: "west",
title: "Layers",
width: 200,
split: true,
store: store,
collapsible: true,
collapseMode: "mini",
autoScroll: true,
rootVisible: true,
lines: true
});
var legendPanel = Ext.create('GeoExt.panel.Legend', {
defaults: {
labelCls: 'mylabel'
},
border: true,
title: "Legend",
width: 200,
split: true,
collapsible: true,
collapseMode: "mini",
autoScroll: true,
region: "east"
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
rtl: false,
hideBorders: false,
items: {
layout: 'border',
defferedRender: false,
items: [mappanel, tree, legendPanel]
}
});
}
});
- Denis Rykov
- Гуру
- Сообщения: 3376
- Зарегистрирован: 11 апр 2008, 21:09
- Репутация: 529
- Ваше звание: Author
- Контактная информация:
Re: Включение/Отключение базовых карт в OpenLayers и Geoext
OL2 не будет работать без базового слоя, нужна как минимум заглушка:
Код: Выделить всё
base = new OpenLayers.Layer("",{isBaseLayer: true});
Spatial is now, more than ever, just another column- The Geometry Column.
-
- Активный участник
- Сообщения: 127
- Зарегистрирован: 04 май 2012, 21:23
- Репутация: 12
- Откуда: Пенза
Re: Включение/Отключение базовых карт в OpenLayers и Geoext
Добавил к переменной "tree" кое что (выделено жирным в коде внизу). Теперь могу включать и выключать подложку Google.
var tree = Ext.create('GeoExt.tree.Panel', {
border: true,
region: "west",
title: "Layers",
width: 200,
split: true,
store: store,
collapsible: true,
collapseMode: "mini",
autoScroll: true,
rootVisible: true,
lines: true,
listeners: {
checkchange: {
fn: function (record, checked, opts) {
record.data.layer.setVisibility(checked)
}
}
}
});
То есть, OL2 вообще без базовых слоёв не может???
var tree = Ext.create('GeoExt.tree.Panel', {
border: true,
region: "west",
title: "Layers",
width: 200,
split: true,
store: store,
collapsible: true,
collapseMode: "mini",
autoScroll: true,
rootVisible: true,
lines: true,
listeners: {
checkchange: {
fn: function (record, checked, opts) {
record.data.layer.setVisibility(checked)
}
}
}
});
То есть, OL2 вообще без базовых слоёв не может???
-
- Новоприбывший
- Сообщения: 1
- Зарегистрирован: 02 ноя 2016, 23:10
- Репутация: 0
Re: Включение/Отключение базовых карт в OpenLayers и Geoext
Try: map property: allOverlays {Boolean} Allow the map to function with “overlays” only.
Кто сейчас на конференции
Сейчас этот форум просматривают: нет зарегистрированных пользователей и 4 гостя