Skip to content

Commit

Permalink
整理Map5的example中的示例。
Browse files Browse the repository at this point in the history
  • Loading branch information
@fanzia
fanzia committed Jan 12, 2017
1 parent f651f18 commit 1487daa
Show file tree
Hide file tree
Showing 31 changed files with 194 additions and 240 deletions.
8 changes: 6 additions & 2 deletions example/all/control/control_copyright.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
<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>

<!--Base-->
<script type="text/javascript" src="../../../src/GeoBeans.js"></script>
Expand Down Expand Up @@ -131,22 +130,27 @@
// 地图变量
var mapObj = null;

// 版权控件
// 版权控件，默认显示
var widget = null;
function init(){
loadTileMap();

// 根据类型获取版权控件
widget = mapObj.getWidget(GeoBeans.Widget.Type.COPYRIGHT);
}

function hide(){
// 设置版权控件不显示
widget.show(false);
}

function show(){
// 设置版权控件显示
widget.show(true);
}

function setContent(){
// 设置版权控件的内容
var content = "© <a href='http://www.geobeans.cn/' target='_blank'>GeoBeans</a> Map5地图 ";
widget.setContent(content);
}
Expand Down
7 changes: 6 additions & 1 deletion example/all/control/control_layerpanel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,10 +176,15 @@
mapObj.addLayer(wmsLayer);
}


// 添加图层面板控件，默认是没有的，可在图层面板中查看各个图层，并控制图层的显示状态
function addLayersWidget(){
// 1、定义图层面板控件
var layersWidget = new GeoBeans.Widget.LayersWidget(mapObj);

// 2、地图添加图层面板控件
mapObj.addWidget(layersWidget);

// 3、地图刷新
mapObj.refresh();
}
</script>
Expand Down
9 changes: 7 additions & 2 deletions example/all/control/control_nav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@


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

<!--Base-->
<script type="text/javascript" src="../../../src/GeoBeans.js"></script>
Expand Down Expand Up @@ -132,23 +131,29 @@
}

function show(){
// 设置导航条的显示状态
mapObj.enableNavControl(true);
}

function hide(){

// 设置导航条的显示状态
mapObj.enableNavControl(false);
}

function setPosition(){
// 默认位置为右下角

// 两个参数分别为left和top
// left>=0,参考线为地图的左侧，left<0 ,参考线为右侧
// top>=0,参考线为地图的顶部，top<0,参考线为底部

// 1、根据类型获取导航条
var navControl = mapObj.getControl(GeoBeans.Control.Type.NAV);
if(navControl == null){
return;
}

// 2、设置导航条的位置
navControl.setPosition(10,-10);
}
</script>
Expand Down
21 changes: 1 addition & 20 deletions example/all/layer/layer_add_amap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<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>

<!--Base-->
<script type="text/javascript" src="../../../src/GeoBeans.js"></script>
Expand Down Expand Up @@ -141,15 +140,13 @@
var mapObj = null;
function init(){

// 1、设置地图的范围
var extent = new GeoBeans.Envelope(-180,-90,180,90);

mapObj = new GeoBeans.Map({
target : "mapDiv",
name : "map",
srs : GeoBeans.Proj.WebMercator,
baseLayer : "world",
layers :[
// 定义一个瓦片图层，数据源为AMap高德地图
new GeoBeans.Layer.TileLayer({
name : "world",
source : new GeoBeans.Source.Tile.AMap({
Expand All @@ -164,22 +161,6 @@
zoom : 2,
}
});
if(mapObj == null){
return;
}


var amapLayer = new GeoBeans.Layer.TileLayer({
name : "world",
source : new GeoBeans.Source.Tile.AMap({
srs: GeoBeans.Proj.WebMercator,
}),
opacity : 1.0,
visible : true
});


mapObj.addLayer(amapLayer);

mapObj.on(GeoBeans.Event.MOUSE_MOVE, onMouseMove);
}
Expand Down
8 changes: 2 additions & 6 deletions example/all/layer/layer_add_arcgisonline.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<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>

<!--Base-->
<script type="text/javascript" src="../../../src/GeoBeans.js"></script>
Expand Down Expand Up @@ -122,7 +121,7 @@
}
</style>

<title>地图：加载OpenStreetMap地图</title>
<title>地图：加载ArcGIS Online地图</title>
<body onload="init()">
<table>
<tr>
Expand All @@ -143,9 +142,6 @@
var mapObj = null;
function init(){

// 1、设置地图的范围
var extent = new GeoBeans.Envelope(-180,-90,180,90);

mapObj = new GeoBeans.Map({
target : "mapDiv",
name : "map",
Expand All @@ -154,7 +150,7 @@
layers : [
new GeoBeans.Layer.TileLayer({
"name" : "arcgis",
"source" : new GeoBeans.Source.Tile.ArcGIS({
"source" : new GeoBeans.Source.Tile.ArcGIS({ // 数据源为ArcGIS Online
imageSet : "ChinaOnlineCommunity",
srs: GeoBeans.Proj.WebMercator,
}),
Expand Down
21 changes: 11 additions & 10 deletions example/all/layer/layer_add_geojson.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@
<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>
Expand Down Expand Up @@ -151,16 +149,21 @@
}

function addGeoJSONLayer(){
// 1、定义一个要素图层
jsonLayer = new GeoBeans.Layer.FeatureLayer({
"name" : "layername",
"geometryType" : GeoBeans.Geometry.Type.POINT,
"source" : new GeoBeans.Source.Feature.GeoJSON({
"url" : "../data/geojson/countries.geojson",
"geometryName" : "geometry",
"name" : "layername", // 图层名称
"geometryType" : GeoBeans.Geometry.Type.POINT, // 图层的几何类型
"source" : new GeoBeans.Source.Feature.GeoJSON({// 图层的数据源为GeoJson类型
"url" : "../data/geojson/countries.geojson",// 数据地址
"geometryName" : "geometry", // 空间字段名称
}),
"style" : createSimplePolygonStyle()
"style" : createSimplePolygonStyle() // 样式
});

// 2、添加图层
mapObj.addLayer(jsonLayer);

// 3、地图刷新
mapObj.refresh();
}

Expand Down Expand Up @@ -191,8 +194,6 @@

return style;
}



</script>

15 changes: 9 additions & 6 deletions example/all/layer/layer_add_kml.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@
<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>
Expand Down Expand Up @@ -154,14 +152,19 @@


function addPointKMLLayer(){
// 1、定义一个要素图层，KML图层内有样式
var layer = new GeoBeans.Layer.FeatureLayer({
name : "point",
geometryType : GeoBeans.Geometry.Type.POINT,
source : new GeoBeans.Source.Feature.KML({
url : "/Map5/example/all/data/kml/point.kml"
name : "point", // 图层名称
geometryType : GeoBeans.Geometry.Type.POINT, // 图层的几何类型
source : new GeoBeans.Source.Feature.KML({ // 图层的数据源为KML
url : "/Map5/example/all/data/kml/point.kml"// 数据的地址
})
});

// 2、添加图层
mapObj.addLayer(layer);

// 3、地图刷新
mapObj.refresh();
}

Expand Down
42 changes: 12 additions & 30 deletions example/all/layer/layer_add_mapworld.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<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>

<!--Base-->
<script type="text/javascript" src="../../../src/GeoBeans.js"></script>
Expand Down Expand Up @@ -140,9 +139,7 @@
var mapObj = null;
function init(){

// 1、设置地图的范围
var extent = new GeoBeans.Envelope(-180,-90,180,90);

// 1、定义地图变量
mapObj = new GeoBeans.Map({
target : "mapDiv",
name : "map",
Expand All @@ -152,40 +149,25 @@
return;
}

// 3、添加一个图层
// 2、定义一个瓦片图层，数据源为天地图
var layer1 = new GeoBeans.Layer.TileLayer({
"name" : "vector",
"source" : new GeoBeans.Source.Tile.MapWorld({
"url" : "/DataServer?",
"imageSet" : /*"img", "cia", "vec",*/ "ter",
//"srs" : GeoBeans.Proj.WGS84,
"srs" : GeoBeans.Proj.WGS84,
"name" : "vector", // 图层名称
"source" : new GeoBeans.Source.Tile.MapWorld({ // 天地图数据源
"url" : "/DataServer?", // 数据源地址
"imageSet" : /*"img", "cia", "vec",*/ "ter",// 数据名称
"srs" : GeoBeans.Proj.WGS84, // 投影
}),
"opacity" : 1.0,
"visible" : true
"opacity" : 1.0, // 透明度
"visible" : true // 显示
});

// var layer3 = new GeoBeans.Layer.TileLayer2({
// "name" : "world",
// "source" : new GeoBeans.Source.Tile.MapWorld({
// "url" : "/DataServer?",
// "imageSet" : "cva_c"
// }),
// "opacity" : 1.0,
// "visible" : true
// });

//layer1.setVisible(false);

// 添加图层
// 3、添加图层
mapObj.addLayer(layer1);
//mapObj.addLayer(layer2);
//mapObj.addLayer(layer3);
mapObj.setBaseLayer(layer1);

// 4、注册鼠标移动事件
mapObj.on(GeoBeans.Event.MOUSE_MOVE, onMouseMove);

// 4、设置中心点和显示级别
// 5、设置中心点和显示级别
var zoom = 2;
var center = new GeoBeans.Geometry.Point(0,0);
mapObj.zoomTo(zoom,center);
Expand Down
16 changes: 6 additions & 10 deletions example/all/layer/layer_add_multi_quadserver.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
<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>

<!--Base-->
<script type="text/javascript" src="../../../src/GeoBeans.js"></script>
Expand Down Expand Up @@ -127,11 +126,8 @@
var mapObj = null;
function init(){

//1.设置地图的范围
var extent = new GeoBeans.Envelope(-180,-90,180,90);

//2.初始化地图变量，参数分别为:
//地图的容器为"mapDiv",地图名称"map"，地图范围，地图的空间参考，4326为经纬度
// 1、初始化地图变量，参数分别为:
// 地图的容器为"mapDiv",地图名称"map"，地图范围，地图的空间参考，4326为经纬度
mapObj = new GeoBeans.Map({
target : "mapDiv",
name : "map",
Expand All @@ -142,7 +138,7 @@
return;
}

// 3、第一个图层
// 2、第一个图层
var vector = new GeoBeans.Layer.TileLayer({
"name" : "vector",
"source" : new GeoBeans.Source.Tile.QuadServer({
Expand All @@ -153,7 +149,7 @@
"visible" : true
});

// 4、第二个图层
// 3、第二个图层
var trans = new GeoBeans.Layer.TileLayer({
"name" : "trans",
"source" : new GeoBeans.Source.Tile.QuadServer({
Expand All @@ -164,10 +160,10 @@
"visible" : true
});

// 5、添加图层
// 4、添加图层数组
mapObj.addLayers([vector,trans]);

//6.设置中心点和显示级别
// 5、设置中心点和显示级别
var zoom = 3;
var center = new GeoBeans.Geometry.Point(0,0);
mapObj.zoomTo(zoom,center);
Expand Down
Loading

0 comments on commit 1487daa

Please sign in to comment.