Skip to content

Commit

Permalink
增加了InfoWindow的功能，并且基本上实现了地图上鼠标点击获取元素信息的功能。
Browse files Browse the repository at this point in the history
  • Loading branch information
@fanzia
fanzia committed May 29, 2015
1 parent 0dd334b commit 802d212
Show file tree
Hide file tree
Showing 16 changed files with 1,157 additions and 178 deletions.
27 changes: 27 additions & 0 deletions css/Map5.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,12 @@
background-position: 0 -443px;
}

.infoWindow{
position: absolute;
height: 1px;
width: 1px;
z-index: 100;
}
/*.tooltip .tooltip-inner{
background-color: #fff;
color:#000;
Expand All @@ -150,3 +156,24 @@
.tooltip .tooltip-arrow{
border-top-color: #fff !important;
}*/

/*popover*/

.popover{
width: 300px;
}
.popover .popover-title{
background-color: #
}
.popover .popover-content{
height: 160px;
overflow-y: auto;
}
.popover .popover-content table{
width: 100%;
margin-bottom: 0px;
}

.popover .popover-content table td{
width: 50%;
}
155 changes: 64 additions & 91 deletions example/heatmap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<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>
Expand All @@ -30,9 +31,22 @@
<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/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>
Expand All @@ -51,8 +65,10 @@

<script type="text/javascript" src="../lib/GeoBeans/Layer/WMSLayer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Layer/WFSLayer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Layer/OverlayLayer.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/QueryLayer.js"></script>

<script type="text/javascript" src="../lib/GeoBeans/Renderer.js"></script>
<script type="text/javascript" src="../lib/GeoBeans/Events.js"></script>
Expand All @@ -62,117 +78,69 @@
<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/heatmap.min.js"></script>
<script type="text/javascript">

var mapObj = null;
var mapManager = null;

var countryLayer = null;
var citiesLayer = null;
var aqiLayer = null;
var aqiLayer2 = null;
var heatMapLayer = null;
var url = "/ows/user1/mgr";
function init(){


mapObj = new GeoBeans.Map("mapDiv");
mapManager = new GeoBeans.MapManager(url);
// mapObj = new GeoBeans.Map("mapDiv");
mapObj = mapManager.getMap("mapDiv","aqi");
mapObj.setViewer(new GeoBeans.Envelope(-180,-90,180,90));
mapObj.draw();

var layer = null;
var center = new GeoBeans.Geometry.Point(0,0);
// var layer = null;
// var center = new GeoBeans.Geometry.Point(0,0);

layer = new GeoBeans.Layer.QSLayer("gaode","/QuadServer/maprequest?services=world_image");
mapObj.setBaseLayer(layer);

// // 点
// var symbolizer, rule, style;
// symbolizer = new GeoBeans.Style.PointSymbolizer();
// symbolizer.size = 8;
// symbolizer.fillColor = "Aquamarine";
// symbolizer.outLineWidth = 1.0;
// symbolizer.outLineColor = "Red";
// symbolizer.outLineCap = GeoBeans.Style.LineCap.ROUND;
// symbolizer.outLineJoin = GeoBeans.Style.LineJoin.ROUND;
// symbolizer.showOutline = true;

// rule = new GeoBeans.Style.Rule(symbolizer, null);
// style = new GeoBeans.Style();
// style.addRule(rule);
citiesLayer = new GeoBeans.Layer.WFSLayer("cities",
"/geoserver/radi/ows?",
"radi:cities",
"GML2");
// citiesLayer.setStyle(style);
// mapObj.addLayer(citiesLayer);


// 点
// symbolizer = new GeoBeans.Style.PointSymbolizer();
// symbolizer.size = 8;
// symbolizer.fillColor = "Aquamarine";
// symbolizer.outLineWidth = 1.0;
// symbolizer.outLineColor = "Red";
// symbolizer.outLineCap = GeoBeans.Style.LineCap.ROUND;
// symbolizer.outLineJoin = GeoBeans.Style.LineJoin.ROUND;
// symbolizer.showOutline = true;

// rule = new GeoBeans.Style.Rule(symbolizer, null);
// style = new GeoBeans.Style();
// style.addRule(rule);
aqiLayer = new GeoBeans.Layer.WFSLayer("cities",
"/geoserver/radi/ows?",
"radi:aqi_ranking_2015_02_03_09",
"GML2");
// aqiLayer.setStyle(style);
mapObj.addLayer(aqiLayer);


// 点
symbolizer = new GeoBeans.Style.PointSymbolizer();
symbolizer.size = 8;
symbolizer.fillColor = "Aquamarine";
symbolizer.outLineWidth = 1.0;
symbolizer.outLineColor = "Red";
symbolizer.outLineCap = GeoBeans.Style.LineCap.ROUND;
symbolizer.outLineJoin = GeoBeans.Style.LineJoin.ROUND;
symbolizer.showOutline = true;

rule = new GeoBeans.Style.Rule(symbolizer, null);
style = new GeoBeans.Style();
style.addRule(rule);
aqiLayer2 = new GeoBeans.Layer.WFSLayer("cities",
"/geoserver/radi/ows?",
"radi:aqi_ranking_2015_02_04_11",
"GML2");
aqiLayer2.setStyle(style);
mapObj.addLayer(aqiLayer2);
// layer = new GeoBeans.Layer.QSLayer("gaode","/QuadServer/maprequest?services=world_image");
// mapObj.setBaseLayer(layer);


// mapObj.setViewer(new GeoBeans.Envelope(-180,-90,180,90));
mapObj.setCenter(center);
mapObj.setLevel(2);
mapObj.draw();
heatMapLayer = new GeoBeans.Layer.HeatMapLayer("aqi-map");
aqiLayer.setVisiable(false);
aqiLayer2.setVisiable(false);
mapObj.draw();
}

function addLayerHeatMap_cities_db(){
mapObj.addHeatMap("cities","populat");
mapObj.draw();
}

function addLayerHeatMap(){
mapObj.removeLayer("aqi-map");
heatMapLayer.setLayer(aqiLayer,"pm2_5");
mapObj.addLayer(heatMapLayer);
// aqiLayer.setVisiable(false);
function addLayerHeatMap_aqi_db(){
mapObj.addHeatMap("aqi","pm2_5");
mapObj.draw();
}

function addLayerHeatMapAqi(){
mapObj.removeLayer("aqi-map");
heatMapLayer.setLayer(aqiLayer2,"pm2_5");
mapObj.addLayer(heatMapLayer);
// aqiLayer2.setVisiable(false);

function removeHeatMap_cities(){
mapObj.removeHeatMap("cities");
mapObj.draw();
}

function removeHeatMap_aqi(){
mapObj.removeHeatMap("aqi");
mapObj.draw();
}

var flag = false;
function setHeatMapVisible(){
mapObj.setHeatMapVisible("cities",flag);
if(flag){
flag = false;
}else{
flag = true;
}
mapObj.draw();
}
</script>


Expand All @@ -183,9 +151,14 @@
<!-- <canvas id="myCanvas" width="800" height="800"></canvas> -->
<div id="mapDiv" style="height:800px;width:100%">
</div>

<input type="button" value="heatMap" onclick="addLayerHeatMap()">
<input type="button" value="heatMap-AQI" onclick="addLayerHeatMapAqi()">
增加：
<input type="button" value="heatMap-cities-db" onclick="addLayerHeatMap_cities_db()">
<input type="button" value="heatMap-aqi-db" onclick="addLayerHeatMap_aqi_db()"><br/>
删除：
<input type="button" value="removeHeatMap_cities" onclick="removeHeatMap_cities()">
<input type="button" value="removeHeatMap_aqi" onclick="removeHeatMap_aqi()">
显示
<input type="button" value="setHeatMapVisible" onclick="setHeatMapVisible()">
</body>
</html>

Expand Down
Loading

0 comments on commit 802d212

Please sign in to comment.