Skip to content

Commit

Permalink
增加了三类专题图。包括分级图、柱状图、饼状图。
Browse files Browse the repository at this point in the history
  • Loading branch information
@fanzia
fanzia committed Jul 7, 2015
1 parent 0368fc3 commit 43ff0e8
Show file tree
Hide file tree
Showing 26 changed files with 3,063 additions and 39 deletions.
66 changes: 64 additions & 2 deletions css/Map5.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,13 +160,16 @@
/*popover*/

.popover{
width: 300px;
/*width: 300px;*/
width : 100px;
}
.popover .popover-title{
background-color: #
}
.popover .popover-content{
height: 160px;
/*height: 160px;*/
min-height: 40px;
max-height: 160px;
overflow-y: auto;
}
.popover .popover-content table{
Expand All @@ -176,4 +179,63 @@

.popover .popover-content table td{
width: 50%;
}

/*chart legend*/
.chart-legend{
position: absolute;
left: 10px;
border: 1px solid #bababa;
bottom: 10px;
padding: 8px;
background-color: #fff;
/*display: none;*/
}
.chart-legend-range{
border: none;
}
.chart-legend-title{
text-align: center;
}
.chart-legend-symbol{
width: 28px;
height: 16px;
border: 1px solid #ccc;
display: inline-block;
margin-right: 4px;
}

.chart-legend-label{
height: auto;
width: auto;
white-space: nowrap;
}
.chart-legend-canvas{
float: left;
margin: 10px;
}

.chart-legend-value{
float: right;
}

.chart-legend-min{

}

.chart-legend-max{
position: absolute;
bottom: 10px;
right: 10px;
left: 50px;

}



/*chart div*/
.chart-div{
position: absolute;
border: 1px solid #ccc;
/*display: none;*/
}
226 changes: 226 additions & 0 deletions example/barChart.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,226 @@
<!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="../css/bootstrap-3.2.0-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../css/Map5.css"/>

<script type="text/javascript" src="../lib/jquery-1.11.1.js"></script>
<script type="text/javascript" src="../lib/bootstrap-3.2.0-dist/bootstrap.min.js"></script>
<!-- <script type="text/javascript" src="../lib/echarts-plain.js"></script> -->
<script type="text/javascript" src="../lib/echarts-all.js"></script>
<script type="text/javascript" src="../lib/GeoBeans.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/BaseTypes/Class.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/BaseTypes/Envelope.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/BaseTypes/Color.js"></script>

<script type="text/javascript" src="../lib/GeoBeans/Geometry.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Geometry/GeometryCollection.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Geometry/Point.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Geometry/LineString.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Geometry/LinearRing.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Geometry/Polygon.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Geometry/MultiPoint.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Geometry/MultiLineString.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Geometry/MultiPolygon.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Geometry/Circle.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Geometry/GML.js"></script>

<script type="text/javascript" src="../lib/GeoBeans/Field.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Feature.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/FeatureType.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Workspace.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/WFS/WFSWorkspace.js"></script>


<script type="text/javascript" src="../lib/GeoBeans/Transformation.js"></script>

<script type="text/javascript" src="../lib/GeoBeans/Filter.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Filter/FilterReader.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Filter/FilterWriter.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Filter/LogicFilter.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Filter/BinaryLogicFilter.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Filter/ComparisionFilter.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Filter/BinaryComparisionFilter.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Filter/IDFilter.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Filter/UnaryLogicFilter.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Filter/SpatialFilter.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Filter/BBoxFilter.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Filter/Expression.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Filter/PropertyName.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Filter/Literal.js"></script>


<script type="text/javascript" src="../lib/GeoBeans/Style/StyleManager.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Style/Style.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Style/StyleReader.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Style/StyleWriter.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Style/Rule.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Style/FeatureStyle.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Style/Symbolizer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Style/PointSymbolizer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Style/LineSymbolizer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Style/PolygonSymbolizer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Style/TextSymbolizer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Style/Font.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Style/Stroke.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Style/Fill.js"></script>

<script type="text/javascript" src="../lib/GeoBeans/Layer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Layer/Tile.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Layer/TileCache.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Layer/TileLayer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Layer/QSLayer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Layer/FeatureLayer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Layer/WFSLayer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Layer/DBLayer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Layer/GroupLayer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Layer/OverlayLayer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Layer/QueryLayer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Layer/WMTSLayer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Layer/chart/ChartLayer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Layer/chart/RangeChartLayer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Layer/chart/BarChartLayer.js"></script>



<script type="text/javascript" src="../lib/GeoBeans/Renderer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Events.js"></script>

<script type="text/javascript" src="../lib/GeoBeans/Control.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Control/TrackControl.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Control/DragMapControl.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Control/SrollMapControl.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Control/MapNavControl.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/MapManager.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Map.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/MapWorkspace.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/InfoWindow.js"></script>
<script type="text/javascript">

var mapObj = null;
var tracker = null;
var mapManager = null;
var url = "/ows/user1/mgr";
function init(){
mapManager = new GeoBeans.MapManager(url);
var center = new GeoBeans.Geometry.Point(0,0);


mapObj = mapManager.getMap("mapDiv","chart");
// mapObj = mapManager.getMap("mapDiv","aqi");
mapObj.addEventListener(GeoBeans.Event.MOUSE_MOVE, onMapMove);

mapObj.setViewer(mapObj.extent);


// var center = new GeoBeans.Geometry.Point(90,0);
// var layer = new GeoBeans.Layer.QSLayer("base","/QuadServer/maprequest?services=world_image");
// mapObj.setBaseLayer(layer);
// mapObj.setCenter(center);
// mapObj.setLevel(1);
mapObj.draw();

}

function onMapMove(evt){
var mapX = evt.mapX;
var mapY = evt.mapY;

var str = mapX + "," + mapY + ";";
str += evt.X + "," + evt.Y + "<br/>";
var map = mapObj.transformation.toMapPoint(mapX,mapY);
// str += map.x + "," + map.y;
document.getElementById("xy").innerHTML = str;
}


function onAddChart(){
// var layer = mapObj.getLayer("china_prov_region");
// // var style = layer.getChartStyle("name","gisdb","people_age_60","合计",1,3);
// var style = layer.getRangeChartStyle("name","gisdb","people_age_60","地区","合计",1,4);
// layer.addRangeChart("60岁老年人健康统计",style);
// mapObj.draw();

var layer = mapObj.getLayer("china_prov_point");
if(layer == null){
return;
}
var colors = [
new GeoBeans.Color().getHex(),
new GeoBeans.Color().getHex(),
new GeoBeans.Color().getHex()
];
var chartOption = {
height : 200,
width : 80,
colors : colors,
offsetX : 0,
offsetY : 0, //向上是正，向下是负
left : 60,
right : 0,
top : 12,
bottom : 0,
showLabel : true,
opacity : 0.9,
x_axisLine : true,
x_axisLabel : true,
x_axisTick : true,
x_splitLine : true,
y_axisLine : true,
y_axisLabel : true,
y_axisTick : true,
y_splitLine : true
};
var chartLayer = new GeoBeans.Layer.BarChartLayer("bar","china_prov_point","prov","gisdb","people_age_60","地区",["合计","基本健康"],chartOption)
// layer.addBarChart("bar","prov","gisdb","people_age_60","地区",["合计","生活不能自理","基本健康"],chartOption);
mapObj.addLayer(chartLayer,addLayer_callback);
// mapObj.draw();
}

function addLayer_callback(result){
if(result == "success"){
mapObj.draw();
}else{
alert(result);
}
}

function removeChart(){
mapObj.removeLayer("bar",removeLayer_callback);
mapObj.draw();
}

function removeLayer_callback(result){
if(result == "success"){
mapObj.draw();
}else{
alert("result");
}
}

</script>


<title>Map5--Bar chart </title>
</head>

<body onload="init()">


<!-- <canvas id="myCanvas" width="800" height="800"></canvas> -->
<div id="mapDiv" style="height:800px;width:100%;border:1px solid #ccc;position:relative">

</div>

<div id="xy" style="width:200px;height:30px;line-height:30px"></div>
<input type="button" value="onAddChart" onclick="onAddChart();">
<input type="button" value="removeChart" onclick="removeChart();">


</body>
</html>




Loading

0 comments on commit 43ff0e8

Please sign in to comment.