GeoExt GeoJSON Example

GeoExt GeoJSON Example.

GeoExt 電子国土 toolbar

This example shows how to add OpenLayers controls in an Ext toolbar.

GeoExt provides the GeoExt.Action class for adapating a control to an

object that can be inserted in a toolbar or in a menu.

The js is not minified so it is readable. See GeoExt-toolbar.js.

//初期の経度
var initCX = 139.4;

//初期の緯度
var initCY = 35.4;

//真球メルカトル投影
var projection900913 = new OpenLayers.Projection("EPSG:900913");

//等経緯度投影を定義
var projection4326 = new OpenLayers.Projection("EPSG:4326");

var mapPanel, slider;

Ext.onReady(function() {
Ext.QuickTips.init();

//真球メルカトル投影のときの最大範囲(単位はm)
var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508);
//真球メルカトル投影のときの最大範囲に範囲を制限
var restrictedExtent = maxExtent.clone();
//真球メルカトル投影のときの最大解像度
var maxResolution = 156543.0339;
// var map = new OpenLayers.Map();
var map = new OpenLayers.Map('map', {
controls: [
//new OpenLayers.Control.Attribution(),
new OpenLayers.Control.Navigation({mouseWheelOptions: {interval: 50}}),
new OpenLayers.Control.KeyboardDefaults(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.OverviewMap()
],
allOverlays: false,
projection: projection900913,
maxResolution: maxResolution,
maxExtent: maxExtent,
units: 'm',
displayProjection: projection4326
});

webtisLayer = new webtis.Layer.BaseMap("webtisLayer");

// GeoJSONファイルを読み込んでVectorLayerを作成
vectorLayer = new OpenLayers.Layer.Vector("GeoJSON", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "http://localhost/test/data/kanagawk.json",
format: new OpenLayers.Format.GeoJSON()
})
});
//

var gmaplayerRoad = new OpenLayers.Layer.Google(
'道路地図',
{numZoomLevels: 20},
{visibility: true}
);
var gmaplayerHybrid = new OpenLayers.Layer.Google(
'衛星写真',
{type: google.maps.MapTypeId.HYBRID},
{numZoomLevels: 20},
{visibility: true}
);

var drawLayer = new OpenLayers.Layer.Vector("vector");

map.addLayers([webtisLayer, gmaplayerRoad, gmaplayerHybrid, vectorLayer, drawLayer]);

//ZoomSelectorの定義
var scaleStore = new GeoExt.data.ScaleStore({map: map});
var zoomSelector = new Ext.form.ComboBox({
store: scaleStore,
emptyText: "Zoom Level",
tpl: '

',
editable: false,
triggerAction: 'all', // needed so that the combo box doesn't filter by its current content
mode: 'local' // keep the combo box from forcing a lot of unneeded data refreshes
});

zoomSelector.on('select',
function(combo, record, index) {
map.zoomTo(record.data.level);
},
this
);

map.events.register('zoomend', this, function() {
var scale = scaleStore.queryBy(function(record){
return this.map.getZoom() == record.data.level;
});

if (scale.length > 0) {
scale = scale.items[0];
zoomSelector.setValue("1 : " + parseInt(scale.data.scale));
} else {
if (!zoomSelector.rendered) return;
zoomSelector.clearValue();
}
});

// create a separate slider bound to the map but displayed elsewhere
slider = new GeoExt.LayerOpacitySlider({
layer: vectorLayer,
aggressive: true,
width: 200,
isFormField: true,
inverse: true,
fieldLabel: "opacity",
renderTo: "slider", //id=slider
plugins: new GeoExt.LayerOpacitySliderTip({template: '

'})
});

//toolbarの定義
var ctrl, toolbarItems = [], action, actions = {};

// MaxExtentがおかしいので、とりあえず非表示
// ZoomToMaxExtent control, a "button" control
/*action = new GeoExt.Action({
control: new OpenLayers.Control.ZoomToMaxExtent(),
map: map,
text: "全体表示",
tooltip: "全体を表示"
});
actions["max_extent"] = action;
toolbarItems.push(action);
toolbarItems.push("-");*/

// Navigation control and DrawFeature controls
// in the same toggle group
action = new GeoExt.Action({
text: "ナビゲーション",
control: new OpenLayers.Control.Navigation(),
map: map,
// button options
toggleGroup: "draw",
allowDepress: false,
pressed: true,
tooltip: "マウス操作",
// check item options
group: "draw",
checked: true
});
actions["nav"] = action;
toolbarItems.push(action);

action = new GeoExt.Action({
text: "ポリゴン",
control: new OpenLayers.Control.DrawFeature(
drawLayer, OpenLayers.Handler.Polygon
),
map: map,
// button options
toggleGroup: "draw",
allowDepress: false,
tooltip: "ポリゴンの作成",
// check item options
group: "draw"
});
actions["draw_poly"] = action;
toolbarItems.push(action);

action = new GeoExt.Action({
text: "ライン",
control: new OpenLayers.Control.DrawFeature(
drawLayer, OpenLayers.Handler.Path
),
map: map,
// button options
toggleGroup: "draw",
allowDepress: false,
tooltip: "ラインの作成",
// check item options
group: "draw"
});
actions["draw_line"] = action;
toolbarItems.push(action);
toolbarItems.push("-");

// SelectFeature control, a "toggle" control
action = new GeoExt.Action({
text: "選択",
control: new OpenLayers.Control.SelectFeature(drawLayer, {
type: OpenLayers.Control.TYPE_TOGGLE,
hover: true
}),
map: map,
// button options
enableToggle: true,
tooltip: "フィーチャ選択"
});
actions["select"] = action;
toolbarItems.push(action);
toolbarItems.push("-");

// Navigation history - two "button" controls
ctrl = new OpenLayers.Control.NavigationHistory();
map.addControl(ctrl);

action = new GeoExt.Action({
text: "前に戻る",
control: ctrl.previous,
disabled: true,
tooltip: "前の表示範囲に戻る"
});
actions["previous"] = action;
toolbarItems.push(action);

action = new GeoExt.Action({
text: "次に進む",
control: ctrl.next,
disabled: true,
tooltip: "次の表示範囲に進む"
});
actions["next"] = action;
toolbarItems.push(action);
toolbarItems.push("->");

// Reuse the GeoExt.Action objects created above
// as menu items
toolbarItems.push({
text: "menu",
menu: new Ext.menu.Menu({
items: [
// ZoomToMaxExtent
//actions["max_extent"],
// Nav
new Ext.menu.CheckItem(actions["nav"]),
// Draw poly
new Ext.menu.CheckItem(actions["draw_poly"]),
// Draw line
new Ext.menu.CheckItem(actions["draw_line"]),
// Select control
new Ext.menu.CheckItem(actions["select"]),
// Navigation history control
actions["previous"],
actions["next"]
]
})
});

mapPanel = new GeoExt.MapPanel({
renderTo: "mappanel",
height: 480,
width: 600,
map: map,

//初期の中心座標を指定（経緯度で入力して、内部的に真球メルカトル座標に変換して表示）
center: new OpenLayers.LonLat(initCX,initCY).transform(projection4326,projection900913),
zoom: 4,
//電子国土地図の地理座標系
projection: projection900913,
//表示の地理座標系
displayProjection: projection4326,
//電子国土地図の最大解像度
maxResolution: maxResolution,
//電子国土地図の最大範囲
maxExtent: maxExtent,
//電子国土地図の表示制限範囲
restrictedExtent: restrictedExtent,
//電子国土地図の単位
units: "m",
//定義したメニューtoolbarの追加
tbar: toolbarItems,
//定義した縮尺選択bbarの追加
bbar: [zoomSelector]
});
});

//初期の経度
var initCX = 139.4;

//初期の緯度
var initCY = 35.4;

//真球メルカトル投影
var projection900913 = new OpenLayers.Projection("EPSG:900913");

//等経緯度投影を定義
var projection4326 = new OpenLayers.Projection("EPSG:4326");

//真球メルカトル投影のときの最大範囲(単位はm)
var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508);

//真球メルカトル投影のときの最大範囲に範囲を制限
var restrictedExtent = maxExtent.clone();

//真球メルカトル投影のときの最大解像度
var maxResolution = 156543.0339;

var mapPanel, popup;

// custom layer node UI class
var LayerNodeUI = Ext.extend(
GeoExt.tree.LayerNodeUI,
new GeoExt.tree.TreeNodeUIEventMixin()
);

Ext.onReady(function() {

//Popup windowの定義
function addToPopup(loc) {

// create the popup if it doesn't exist
if (!popup) {
popup = new GeoExt.Popup({
title: "Popup",
width: 200,
maximizable: true,
collapsible: true,
map: mapPanel.map,
anchored: true,
listeners: {
close: function() {
// closing a popup destroys it, but our reference is truthy
popup = null;
}
}
});
}

// add some content to the popup (this can be any Ext component)
popup.add({
xtype: "box",
autoEl: {
html: "You clicked on (" + loc.lon.toFixed(2) + ", " + loc.lat.toFixed(2) + ")"
}
});

// reset the popup's location
loc.transform(projection4326, projection900913);
popup.location = loc;

popup.doLayout();

// since the popup is anchored, calling show will move popup to this location
popup.show();
}

var control = new OpenLayers.Control.Click({
trigger: function(evt) {
var loc = mapPanel.map.getLonLatFromViewPortPx(evt.xy);
loc.transform(projection900913, projection4326);
addToPopup(loc);
}
});

// 電子国土地図の設定
var map = new OpenLayers.Map('map', {
controls: [
//new OpenLayers.Control.Attribution(),
new OpenLayers.Control.Navigation({mouseWheelOptions: {interval: 50}}),
new OpenLayers.Control.KeyboardDefaults(),
//new OpenLayers.Control.PanZoomBar(),
//new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.PanPanel(),
new OpenLayers.Control.ZoomPanel()
//new OpenLayers.Control.OverviewMap()
],
allOverlays: true,
projection: projection900913,
maxResolution: maxResolution,
maxExtent: maxExtent,
units: 'm',
displayProjection: projection4326
});

//電子国土の定義
var webtisLayer = new webtis.Layer.BaseMap("電子国土");

// GeoJSONファイルを読み込んでVectorLayerを作成
var vectorLayer = new OpenLayers.Layer.Vector("GeoJSON", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "http://localhost/test/data/kanagawk.json",
format: new OpenLayers.Format.GeoJSON()
})
});

mapPanel = new GeoExt.MapPanel({
region: "center",
zoom: 6,
map: map,

//初期の中心座標を指定（経緯度で入力して、内部的に真球メルカトル座標に変換して表示）
center: new OpenLayers.LonLat(initCX,initCY).transform(projection4326,projection900913),
zoom: 4,
//電子国土地図の地理座標系
projection: projection900913,
//表示の地理座標系
displayProjection: projection4326,
//電子国土地図の最大解像度
maxResolution: maxResolution,
//電子国土地図の最大範囲
maxExtent: maxExtent,
//電子国土地図の表示制限範囲
restrictedExtent: restrictedExtent,
//電子国土地図の単位
units: "m",
//Layerの追加
layers: [webtisLayer, vectorLayer]
});

mapPanel.map.addControl(control);
control.activate();

var tree = new Ext.tree.TreePanel({
region: "east",
title: "Layers",
width: 250,
autoScroll: true,
enableDD: true,
// apply the tree node component plugin to layer nodes
plugins: [{
ptype: "gx_treenodecomponent"
}],
loader: {
applyLoader: false,
uiProviders: {
"custom_ui": LayerNodeUI
}
},
root: {
nodeType: "gx_layercontainer",
loader: {
baseAttrs: {
uiProvider: "custom_ui"
},
createNode: function(attr) {
// add a WMS legend to each node created
attr.component = {
xtype: "gx_wmslegend",
layerRecord: mapPanel.layers.getByLayer(attr.layer),
showTitle: false,
// custom class for css positioning
// see tree-legend.html
cls: "legend"
}
return GeoExt.tree.LayerLoader.prototype.createNode.call(this, attr);
}
}
},
rootVisible: false,
lines: false
});

//ViewPortの定義
new Ext.Viewport({
layout: "fit",
hideBorders: true,
items: {
layout: "border",
items: [
mapPanel, tree, {
contentEl: desc,
region: "west",
width: 250,
bodyStyle: {padding: "5px"}
}
]
}
});

});

// simple control to handle user clicks on the map
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {

defaultHandlerOptions: {
single: true,
double: false,
pixelTolerance: 0,
stopSingle: true
},

initialize: function(options) {

this.handlerOptions = OpenLayers.Util.extend(
options && options.handlerOptions || {},
this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this,
{
click: this.trigger
},
this.handlerOptions
);
},

CLASS_NAME: "OpenLayers.Control.Click"

GeoExt.MapPanel with an Existing OpenLayers.Map

This example shows the how to create a MapPanel with a map that has
already been created. See mappanel-div.html
for an example that creates the MapPanel without creating the map first.

This example makes use of a CookieProvider. The MapPanel
being a stateful component, if you reload the page the map should be
at the same location as previously. Also the getState and
applyState methods are overloaded so the size of the map
panel is also restored when refreshing the page.

The js is not minified so it is readable. See mappanel-div.js.

/* 縮尺バー用 */
div.olControlScaleLine {
background-color:#ffffff;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}

GeoExt.MapPanel with Googlemap

This example shows the how to create a MapPanel with a map that has
already been created. See mappanel-googlemap.html
for an example that creates the MapPanel without creating the map first.

This example makes use of a CookieProvider. The MapPanel
being a stateful component, if you reload the page the map should be
at the same location as previously. Also the getState and
applyState methods are overloaded so the size of the map
panel is also restored when refreshing the page.

The js is not minified so it is readable. See mappanel-googlemap.js.

//初期の経度
var initCX = 138.727284;

//初期の緯度
var initCY = 35.360496;

//真球メルカトル投影
var projection900913 = new OpenLayers.Projection("EPSG:900913");

//等経緯度投影を定義
var projection4326 = new OpenLayers.Projection("EPSG:4326");

//mappanelの定義
var mapPanel, controls = [];

Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
//真球メルカトル投影のときの最大範囲(単位はm)
var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508);
//真球メルカトル投影のときの最大範囲に範囲を制限
var restrictedExtent = maxExtent.clone();
//真球メルカトル投影のときの最大解像度
var maxResolution = 156543.0339;

var map = new OpenLayers.Map();
var gmaplayerRoad = new OpenLayers.Layer.Google(
'道路地図',
{numZoomLevels: 20},
{visibility: true}
);
var gmaplayerHybrid = new OpenLayers.Layer.Google(
'衛星写真',
{type: google.maps.MapTypeId.HYBRID},
{numZoomLevels: 20},
{visibility: true}
);

map.addLayers([gmaplayerRoad, gmaplayerHybrid]);
map.addControls(controls);

mapPanel = new GeoExt.MapPanel({
title: "GeoExt MapPanel",
renderTo: "mappanel",
stateId: "mappanel",
height: 400,
width: 600,
map: map,

//初期の中心座標を指定（経緯度で入力して、内部的に真球メルカトル座標に変換して表示）
center: new OpenLayers.LonLat(initCX,initCY).transform(projection4326,projection900913),
zoom: 10,
//Googlemap地図の地理座標系
projection: projection900913,
//表示の地理座標系
displayProjection: projection4326,
//Googlemap地図の最大解像度
maxResolution: maxResolution,
//Googlemap地図の最大範囲
maxExtent: maxExtent,
//Googlemap地図の表示制限範囲
restrictedExtent: restrictedExtent,
//Googlemap地図の単位
units: "m",

// パネルサイズの変更
getState: function() {
var state = GeoExt.MapPanel.prototype.getState.apply(this);
state.width = this.getSize().width;
state.height = this.getSize().height;
return state;
},
applyState: function(state) {
GeoExt.MapPanel.prototype.applyState.apply(this, arguments);
this.width = state.width;
this.height = state.height;
}
});
});

controls.push(
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Navigation({mouseWheelOptions: {interval: 10}}),
new OpenLayers.Control.KeyboardDefaults(),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.PanPanel(),
new OpenLayers.Control.ZoomPanel()
);

GeoExt.MapPanel with CyberJapan map

This example shows the how to create a MapPanel with a map that has
already been created. See mappanel-dk_v4.html
for an example that creates the MapPanel without creating the map first.

This example makes use of a CookieProvider. The MapPanel
being a stateful component, if you reload the page the map should be
at the same location as previously. Also the getState and
applyState methods are overloaded so the size of the map
panel is also restored when refreshing the page.

The js is not minified so it is readable. See mappanel-dk_v4.js.

//初期の経度
var initCX = 138.727284;

//初期の緯度
var initCY = 35.360496;

//真球メルカトル投影
var projection900913 = new OpenLayers.Projection("EPSG:900913");

//等経緯度投影を定義
var projection4326 = new OpenLayers.Projection("EPSG:4326");

//mappanelの定義
var mapPanel, controls = [];

Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
//真球メルカトル投影のときの最大範囲(単位はm)
var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508);
//真球メルカトル投影のときの最大範囲に範囲を制限
var restrictedExtent = maxExtent.clone();
//真球メルカトル投影のときの最大解像度
var maxResolution = 156543.0339;

var map = new OpenLayers.Map();
//電子国土WebシステムVer.4背景地図レイヤーインスタンスを作成。
//データセットは未指定で、デフォルトデータセットを利用
webtisMap = new webtis.Layer.BaseMap("webtismap");
map.addLayers([webtisMap]);
map.addControls(controls);

mapPanel = new GeoExt.MapPanel({
title: "GeoExt MapPanel",
renderTo: "mappanel",
stateId: "mappanel",
height: 400,
width: 600,
map: map,

//初期の中心座標を指定（経緯度で入力して、内部的に真球メルカトル座標に変換して表示）
center: new OpenLayers.LonLat(initCX,initCY).transform(projection4326,projection900913),
zoom: 10,
//Googlemap地図の地理座標系
projection: projection900913,
//表示の地理座標系
displayProjection: projection4326,
//Googlemap地図の最大解像度
maxResolution: maxResolution,
//Googlemap地図の最大範囲
maxExtent: maxExtent,
//Googlemap地図の表示制限範囲
restrictedExtent: restrictedExtent,
//Googlemap地図の単位
units: "m",

// パネルサイズの変更
getState: function() {
var state = GeoExt.MapPanel.prototype.getState.apply(this);
state.width = this.getSize().width;
state.height = this.getSize().height;
return state;
},
applyState: function(state) {
GeoExt.MapPanel.prototype.applyState.apply(this, arguments);
this.width = state.width;
this.height = state.height;
}
});
});

controls.push(
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Navigation({mouseWheelOptions: {interval: 10}}),
new OpenLayers.Control.KeyboardDefaults(),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.PanPanel(),
new OpenLayers.Control.ZoomPanel()
);