Skip to content

Commit

Permalink
修改interaction_modify.html示例
Browse files Browse the repository at this point in the history
  • Loading branch information
@marsprj
marsprj committed Nov 28, 2016
1 parent acc3e1c commit ebf0bac
Showing 1 changed file with 394 additions and 0 deletions.
394 changes: 394 additions & 0 deletions example/all/interaction/interaction_modify.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,394 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="../../../lib/css/Map5.min.css">

<script type="text/javascript" src="../../../src/depends/jquery-1.11.1.js"></script>
<script type="text/javascript" src="../../../src/depends/bootstrap.min.js"></script>
<script type="text/javascript" src="../../../src/depends/echarts-all.js"></script>

<!--Base-->
<script type="text/javascript" src="../../../src/GeoBeans.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/BaseTypes/Class.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/BaseTypes/Type.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/BaseTypes/Color.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/BaseTypes/ColorRangeMap.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/BaseTypes/Envelope.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/BaseTypes/Raster.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Utility/Utility.js"></script>

<!--View-->
<script type="text/javascript" src="../../../src/GeoBeans/Snap.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Viewer.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Renderer.js"></script>
<!--Geometry-->
<script type="text/javascript" src="../../../src/GeoBeans/Geometry.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Geometry/Point.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Geometry/LineString.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Geometry/Line/LinearRing.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Geometry/Polygon.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Geometry/MultiPoint.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Geometry/MultiLineString.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Geometry/MultiPolygon.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Geometry/Circle.js"></script>
<!--Projection-->
<script type="text/javascript" src="../../../src/GeoBeans/Proj.js"></script>
<!--Stype-->
<script type="text/javascript" src="../../../src/GeoBeans/Style.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Symbolizer.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Style/Font.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Style/Fill.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Style/Stroke.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Style/Font.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Style/PointSymbolizer.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Style/LineSymbolizer.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Style/PolygonSymbolizer.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Style/TextSymbolizer.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Style/FeatureStyle.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Style/Rule.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Style/Symbol.js"></script>
<!--Control-->
<script type="text/javascript" src="../../../src/GeoBeans/Control.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Control/DragMapControl.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Control/ScrollMapControl.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Control/TrackControl.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Control/TrackControl/TrackOverlayControl.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Control/ZoomControl.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Control/MapNavControl.js"></script>
<!--Format-->
<script type="text/javascript" src="../../../src/GeoBeans/Format.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Format/GML.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Format/WKT.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Format/GeoJSON.js"></script>
<!--Filter-->
<script type="text/javascript" src="../../../src/GeoBeans/Filter.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Filter/IDFilter.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Filter/SpatialFilter.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Filter/SpatialFilter/BBoxFilter.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Filter/SpatialFilter/DistanceBufferFilter.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Filter/ComparisionFilter.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Filter/ComparisionFilter/BinaryComparisionFilter.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Filter/Expression.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Filter/Expression/PropertyName.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Filter/Expression/Literal.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Filter/FilterWriter.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Query.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Filter/OrderBy.js"></script>
<!--Workspace-->
<script type="text/javascript" src="../../../src/GeoBeans/Field.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Feature.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/FeatureType.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Workspace.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Source/Workspace/WFS/WFSWorkspace.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Source/Workspace/WMS/WMSWorkspace.js"></script>
<!--Source-->
<script type="text/javascript" src="../../../src/GeoBeans/Source.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Source/Feature.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Source/Feature/WFS.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Source/Feature/GeoJSON.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Source/Raster.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Source/Raster/WMS.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Source/Tile.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Source/Tile/QuadServer.js"></script>
<!--Layer-->
<script type="text/javascript" src="../../../src/GeoBeans/Layer.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Layer/FeatureLayer.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Layer/OverlayLayer.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Layer/PanoramaLayer.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Layer/ImageLayer.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Layer/Tile.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Layer/TileCache.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Layer/TileLayer.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Layer/TileLayer/WMTSLayer.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Layer/ThematicLayer/RippleLayer.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Layer/MapLayer.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Layer/ImageLayer.js"></script>
<!--Interaction-->
<script type="text/javascript" src="../../../src/GeoBeans/Interaction.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Interaction/Draw.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Interaction/Select.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Interaction/Modify.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Interaction/Rotate.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Interaction/Hit.js"></script>
<!--Events-->
<script type="text/javascript" src="../../../src/GeoBeans/Events.js"></script>
<!--Render-->
<script type="text/javascript" src="../../../src/GeoBeans/Label.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Render/Label/Maplex.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Render/Label/PointLabel.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Render/Label/LabelSet.js"></script>
<!--Widget-->
<script type="text/javascript" src="../../../src/GeoBeans/Widget.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Widget/CopyRightWidget.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Widget/InfoWindowWidget.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Widget/LegendWidget.js"></script>
<!--Map-->
<script type="text/javascript" src="../../../src/GeoBeans/Selection.js"></script>
<script type="text/javascript" src="../../../src/GeoBeans/Map.js"></script>

<script type="text/javascript" src="../js/initMap.js"></script>
<script type="text/javascript" src="../data/sample/tianjinValue.js"></script>

<style type="text/css">
body{
margin: 0px;
}
</style>

<title>数据源:GeoJSON</title>
<body onload="init()">
<button onclick="onRefresh()">refresh</button>
<button onclick="onRed()">red</button>
<div id="mapDiv" style="height:800px;width:100%;position:absolute;top:80px;"></div>
</body>

<script type="text/javascript">

var mapObj = null;
var targetLayer = null;
var targetFature = null;
var select = null;
var modify = null;

var o_x = 0;
var o_y = 0;

function init(){

mapObj = new GeoBeans.Map({
target : "mapDiv",
name : "map",
srs : GeoBeans.Proj.WGS84,
baseLayer : "world",
layers : [
new GeoBeans.Layer.TileLayer({
name : "world",
source : new GeoBeans.Source.Tile.QuadServer({
url : "/QuadServer/maprequest",
imageSet : "world_image"
}),
opacity : 1.0,
visible : true
}),
new GeoBeans.Layer.FeatureLayer({
name : "cities",
geometryType : GeoBeans.Geometry.Type.LINESTRING,
source : new GeoBeans.Source.Feature.GeoJSON({
url : "../data/geojson/lines-3.json",
geometryName : "geometry",
}),
visible : true,
//style : createPicPointStyle()
}),
// new GeoBeans.Layer.FeatureLayer({
// name : "country",
// geometryType : GeoBeans.Geometry.Type.POLYGON,
// source : new GeoBeans.Source.Feature.GeoJSON({
// url : "../data/geojson/world.geojson",
// geometryName : "geometry",
// }),
// visible : true,
// style : createSimplePolygonStyle()
// })
],
viewer : {
// center : new GeoBeans.Geometry.Point(0,0),
// zoom : 3,
// extent : new GeoBeans.Envelope(0,0,180,90),
extent : new GeoBeans.Envelope(-180,-90,180,90),
// resolution : 0.01,
}
});

targetLayer = mapObj.getLayer("cities");

createInteractions();
}

function createInteractions(){
select = new GeoBeans.Interaction.Select({
map : mapObj,
layer : targetLayer,
condition : GeoBeans.Interaction.SelectType.CLICK
});
select.onchange(onSelectionChange);

modify = new GeoBeans.Interaction.Modify({
map : mapObj,
layer : targetLayer,
features : select.getSelection()
});

mapObj.addInteraction(select);
mapObj.addInteraction(modify);
}

function onSelectionChange(features){
console.log(modify.getFeatures().length);
}

function createSimplePointStyle(){
var style = new GeoBeans.Style.FeatureStyle();

var symbolizer = new GeoBeans.Symbolizer.PointSymbolizer();
//设置点大小
symbolizer.size = 6;
//设置点的填充颜色
var fill = symbolizer.fill;
fill.color.setHex('#800080',1);

//设置点的边界样式
var stroke = symbolizer.stroke;
// 边框的颜色
stroke.color.set(0,255, 0,1);
// 边框的颜色
stroke.width = 1.0;

var rule = new GeoBeans.Style.Rule();
rule.symbolizer = symbolizer;
rule.filter = null;

style.addRule(rule);

return style;
}

function createPicPointStyle(){
// 1、定义元素的样式
var style = new GeoBeans.Style.FeatureStyle();

// 2、定义一个规则
var rule = new GeoBeans.Style.Rule();

// 3、定义点样式，设定一个图片作为样式
var symbolizer = new GeoBeans.Symbolizer.PointSymbolizer();

// 4、定义 symbol用来设置图片的样式
var symbol = new GeoBeans.Style.Symbol();

// 5、设置图片的路径
symbol.icon = "../../images/circle.png";

// 6、图片的大小，如果不设定则为图片本身的大小
symbol.icon_width = 16;
symbol.icon_height = 16;

// 7、图片的偏移，默认为图片的中心点，可以不设定
// x方向向右为正
//symbol.icon_offset_x = 12;

// y方向向上为正
//symbol.icon_offset_y = -12;

// 8、图片顺时针旋转角度，默认不旋转
symbol.rotate = 45;

// 9、设定符号样式
symbolizer.symbol = symbol;

// 10、定义该规则的样式
rule.symbolizer = symbolizer;

// 11、添加该项规则
style.addRule(rule);

return style;
}

function createSimplePolygonStyle(){
// 1、定义元素的样式
var style = new GeoBeans.Style.FeatureStyle();

// 2、定义一个规则
var rule = new GeoBeans.Style.Rule();

// 3、定义一个面样式
var symbolizer = new GeoBeans.Symbolizer.PolygonSymbolizer();

// 4、定义面样式的填充颜色，也可以设定填充为空
symbolizer.fill.color.set(50, 60, 72, 0.7);

// 5、定义面样式的边框的颜色，也可以设定边框为空
symbolizer.stroke.color.set(17, 17, 17,0.6);

// 6、定义面样式的边框的宽度，默认为2
symbolizer.stroke.width = 1;

// 7、定义该规则的样式
rule.symbolizer = symbolizer;

// 8、添加该项规则
style.addRule(rule);

return style;
}

function onRefresh(){
var layer = mapObj.getLayer("cities");
layer.refresh(true);
}

function onRed(){
var layer = mapObj.getLayer("cities");
var source = layer.getSource();

var prop = new GeoBeans.Expression.PropertyName();
prop.setName("gid");
// 2、定义查询值
var literal = new GeoBeans.Expression.Literal();
literal.setValue(1);

var filter = new GeoBeans.Filter.BinaryComparisionFilter(
"equal",
prop,
literal);

var query = new GeoBeans.Query({
filter : filter
})
source.query(query, {
layer : layer,
execute : function(features){
if(features.length>0){

var symbolizer = new GeoBeans.Symbolizer.PointSymbolizer();
symbolizer.fill.color.set(255,0,0,1.0);
symbolizer.size = 20;

var f = features[0];
f.symbolizer = symbolizer;
this.layer.refresh(true);

targetFature = f;
}
}
});
}

function registerMapClick(){
mapObj.on(GeoBeans.Event.MOUSE_MOVE, onMouseMove);
}

function onMouseMove(evt){
var mapXY = evt.mapX + "," + evt.mapY;
var layer = mapObj.getLayer("cities");
if(isValid(targetFature)){
var offset_x = Math.abs(evt.X-o_x);
var offset_y = Math.abs(evt.Y-o_y);
if( offset_x>3 || offset_y>3)
{
var pt = targetFature.getGeometry();
pt.set(evt.mapX, evt.mapY);
layer.refresh(true);

o_x = evt.X;
o_y = evt.Y;
}
}
}

</script>


0 comments on commit ebf0bac

Please sign in to comment.