HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：openlayers_wfs-snap-split.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
「examples」の「wfs-snap-split.html」の内容をコピーして新規作成したファイルに貼り付けます。
コードの修正とちょっと解説します。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenLayers56 Snap/Split and Persist via WFS</title>
<!-- OpenLayers ライブラリ -->
<script src="./lib/Firebug/firebug.js"></script>
<script src="./lib/OpenLayers.js"></script>
<!-- Proj4js ライブラリ -->
<script type="text/javascript" src="./lib/proj4js/lib/proj4js-compressed.js"></script>
<script type="text/javascript" src="./lib/proj4js/lib/projCode/tmerc.js"></script>
<script type="text/javascript" src="./lib/proj4js/lib/defs/EPSG2456.js"></script>
<!-- スタイルシート -->
<link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="./examples/style.css" type="text/css" />
<!-- Editing Tool Bar スタイルシート -->
<style>
.customEditingToolbar {
float: right;
right: 0px;
height: 30px;
width: 200px;
}
.customEditingToolbar div {
float: right;
margin: 5px;
width: 24px;
height: 24px;
}
.olControlNavigationItemActive {
background-image: url("./theme/default/img/editing_tool_bar.png"); /* 修正 */
background-repeat: no-repeat;
background-position: -103px -23px;
}
.olControlNavigationItemInactive {
background-image: url("./theme/default/img/editing_tool_bar.png"); /* 修正 */
background-repeat: no-repeat;
background-position: -103px -0px;
}
.olControlDrawFeaturePointItemInactive {
background-image: url("./theme/default/img/editing_tool_bar.png"); /* 修正 */
background-repeat: no-repeat;
background-position: -77px 0px;
}
.olControlDrawFeaturePointItemActive {
background-image: url("./theme/default/img/editing_tool_bar.png"); /* 修正 */
background-repeat: no-repeat;
background-position: -77px -23px;
}
.olControlModifyFeatureItemActive {
background-image: url(./theme/default/img/move_feature_on.png); /* 修正 */
background-repeat: no-repeat;
background-position: 0px 1px;
}
.olControlModifyFeatureItemInactive {
background-image: url(./theme/default/img/move_feature_off.png); /* 修正 */
background-repeat: no-repeat;
background-position: 0px 1px;
}
.olControlDeleteFeatureItemActive {
background-image: url(./theme/default/img/remove_point_on.png); /* 修正 */
background-repeat: no-repeat;
background-position: 0px 1px;
}
.olControlDeleteFeatureItemInactive {
background-image: url(./theme/default/img/remove_point_off.png); /* 修正 */
background-repeat: no-repeat;
background-position: 0px 1px;
}
</style>
<script type="text/javascript">
var map, wfs;
var DeleteFeature = OpenLayers.Class(OpenLayers.Control, {
initialize: function(layer, options) {
OpenLayers.Control.prototype.initialize.apply(this, [options]);
this.layer = layer;
this.handler = new OpenLayers.Handler.Feature(
this, layer, {click: this.clickFeature}
);
},
clickFeature: function(feature) {
// if feature doesn't have a fid, destroy it
if(feature.fid == undefined) {
this.layer.destroyFeatures([feature]);
} else {
feature.state = OpenLayers.State.DELETE;
this.layer.events.triggerEvent("afterfeaturemodified", {feature: feature});
feature.renderIntent = "select";
this.layer.drawFeature(feature);
}
},
setMap: function(map) {
this.handler.setMap(map);
OpenLayers.Control.prototype.setMap.apply(this, arguments);
},
CLASS_NAME: "OpenLayers.Control.DeleteFeature"
});
function init() {
OpenLayers.ProxyHost= "/cgi-bin/proxy.cgi?url="; // 修正
map = new OpenLayers.Map('map', {
maxResolution: 156543.03390625,
restrictedExtent: new OpenLayers.Bounds(15518513, 4258113, 15518513, 4265113),// 表示範囲 東京駅周辺に変更
maxExtent: new OpenLayers.Bounds(-2.003750834E7,-2.003750834E7,2.003750834E7,2.003750834E7),// 世界全図
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"), // 追加
controls: [
new OpenLayers.Control.PanZoom()
]
});
// Open Street Map レイヤ
var wms = new OpenLayers.Layer.WMS("Base Layer",
"http://demo.opengeo.org/geoserver_openstreetmap/gwc/service/wms",
{
layers: 'openstreetmap',
format: 'image/png'
});
// 描画したフィーチャのスタイル
var styles = new OpenLayers.StyleMap({
"default": new OpenLayers.Style(null, {
rules: [
new OpenLayers.Rule({
symbolizer: {
"Point": {
pointRadius: 5,
graphicName: "square",
fillColor: "white",
fillOpacity: 0.25,
strokeWidth: 1,
strokeOpacity: 1,
strokeColor: "#333333"
},
"Line": {
strokeWidth: 3,
strokeOpacity: 1,
strokeColor: "#666666"
}
}
})
]
}),
"select": new OpenLayers.Style({
strokeColor: "#00ccff",
strokeWidth: 4
}),
"temporary": new OpenLayers.Style(null, {
rules: [
new OpenLayers.Rule({
symbolizer: {
"Point": {
pointRadius: 5,
graphicName: "square",
fillColor: "white",
fillOpacity: 0.25,
strokeWidth: 1,
strokeOpacity: 1,
strokeColor: "#333333"
},
"Line": {
strokeWidth: 3,
strokeOpacity: 1,
strokeColor: "#00ccff"
}
}
})
]
})
});
var saveStrategy = new OpenLayers.Strategy.Save();
wfs = new OpenLayers.Layer.Vector("Editable Features", {
strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy],
projection: new OpenLayers.Projection("EPSG:4326"),
styleMap: styles,
protocol: new OpenLayers.Protocol.WFS({
version: "1.1.0",
srsName: "EPSG:4326",
url: "http://localhost:8080/geoserver/wfs", // 自分の GeoServer
featureNS : "http://geoserver.sf.net", // drawinglineLine がある Workspace の名前空間
featureType: "drawinglineLine", // 修正
geometryName: "the_geom",
schema: "http://localhost:8080/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=sde:drawinglineLine" // 修正
})
});
map.addLayers([wms, wfs]);
// configure the snapping agent
var snap = new OpenLayers.Control.Snapping({layer: wfs});
map.addControl(snap);
snap.activate();
// configure split agent
var split = new OpenLayers.Control.Split({
layer: wfs,
source: wfs,
tolerance: 0.0001,
deferDelete: true,
eventListeners: {
aftersplit: function(event) {
var msg = "Split resulted in " + event.features.length + " features.";
flashFeatures(event.features);
}
}
});
map.addControl(split);
split.activate();
// add some editing tools to a panel
var panel = new OpenLayers.Control.Panel(
{displayClass: 'customEditingToolbar'}
);
var draw = new OpenLayers.Control.DrawFeature(
wfs, OpenLayers.Handler.Path,
{
title: "Draw Feature",
displayClass: "olControlDrawFeaturePoint",
handlerOptions: {multi: true}
}
);
modify = new OpenLayers.Control.ModifyFeature(
wfs, {displayClass: "olControlModifyFeature"}
);
var del = new DeleteFeature(wfs, {title: "Delete Feature"});
var save = new OpenLayers.Control.Button({
title: "Save Changes",
trigger: function() {
if(modify.feature) {
modify.selectControl.unselectAll();
}
saveStrategy.save();
},
displayClass: "olControlSaveFeatures"
});
panel.addControls([
new OpenLayers.Control.Navigation(),
save, del, modify, draw
]);
panel.defaultControl = panel.controls[0];
map.addControl(panel);
map.addControl(new OpenLayers.Control.LayerSwitcher()); // 追加
map.addControl(new OpenLayers.Control.MousePosition()); // 追加
map.addControl(new OpenLayers.Control.ScaleLine()); // 追加
map.zoomTo(14);
}
function flashFeatures(features, index) {
if(!index) {
index = 0;
}
var current = features[index];
if(current && current.layer === wfs) {
wfs.drawFeature(features[index], "select");
}
var prev = features[index-1];
if(prev && prev.layer === wfs) {
wfs.drawFeature(prev, "default");
}
++index;
if(index <= features.length) {
window.setTimeout(function() {flashFeatures(features, index)}, 100);
}
}
</script>
</head>
<body onload="init()">
<h1 id="title">Snap/Split and Persist via WFS</h1>
<div id="tags"></div>
<p id="shortdesc">
Shows snapping, splitting, and use of the WFS Transactions (WFS-T).
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>The WFS protocol allows for creation of new features and reading,
updating, or deleting of existing features.</p>
<p>Use the tools to create, modify, and delete (in order from left
to right) features. Use the save tool (picture of a disk) to
save your changes. Use the navigation tool (hand) to stop editing
and use the mouse for map navigation.</p>
</div>
</body>
</html>
0 件のコメント:
コメントを投稿