forked from marsprj/Map5
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathkml.html
179 lines (148 loc) · 4.97 KB
/
kml.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!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="../lib/Map5.min.js"></script>
<style type="text/css">
body{
margin: 0px;
}
</style>
<script type="text/javascript">
// 地图变量
var mapObj = null;
function init(){
// 地图的范围
var extent = new GeoBeans.Envelope(-180,-90,180,90);
// 地图的容器为"mapDiv",地图名称"map"，地图范围，地图的空间参考，4326为经纬度
mapObj = new GeoBeans.Map("mapDiv","map",extent,4326);
if(mapObj == null){
return;
}
// 定义一个QuadServer图层，作为底图，第一个参数为图层名称，第二个参数为QuadServer地址
var layer = new GeoBeans.Layer.QSLayer("base","/QuadServer/maprequest?services=world_vector");
// 添加图层
mapObj.addLayer(layer);
// 设置中心点
var center = new GeoBeans.Geometry.Point(0,0);
mapObj.setCenter(center);
// 设置级别
mapObj.setLevel(2);
// 绘图
mapObj.draw();
}
function addFeatureLayer(){
// 不是new 出来的
var fields = [
{
name : "fname", // 字段名称
type : "string" // 字段类型
},{
name : "shape",
type : "geometry"
},{
name : "status",
type : "string"
}
];
var geomType = GeoBeans.Geometry.Type.POINT;
var name = "testLayer";
// 创建一个featureLayer
// 第一个参数图层名称，第二个参数字段设置，第三个参数，图层的类型（点图层）
var featureLayer = mapObj.createFeatureLayer(name,fields,geomType);
// 添加图层
mapObj.addLayer(featureLayer);
// 增加要素
for(var i = 0; i < 10000; ++i){
var x = Math.random() * 360 - 180;
var y = Math.random() * 180 - 90;
// var x = Math.random() * 2 + 114;
// var y = Math.random() * 2 + 38;
var point = new GeoBeans.Geometry.Point(x,y);
var id = "id_" + i;
var status = Math.random() > 0.5 ?"on":"off";
var name = "name" + i;
var values = [name,point,status];
// 第一个参数要素的ID值，第二个参数要素的geometry，第三个参数要素字段值，与字段顺序一致
featureLayer.addFeatureObj(id,point,values);
}
// 设定样式
var style = createPointStyle();
featureLayer.setStyle(style);
mapObj.draw();
}
function addKML(){
var name = "kml";
// var url = "data/kml/point.kml";
// var url = "data/kml/line.kml";
// var url = "data/kml/polygon.kml";
// var url = "data/kml/polygon2.kml";
var url = "data/kml/2012-02-10.kml";
// var url = "data/kml/2012_Earthquakes_Mag5.kml";
// var url = "data/kml/test1.kml";
// var url = "data/kml/timezones.kml";
var featureLayer = mapObj.createFeatureLayerByKML(name,url);
console.log(featureLayer);
mapObj.addLayer(featureLayer);
mapObj.setCenter(new GeoBeans.Geometry.Point(7.5,46.44));
mapObj.setLevel(13);
mapObj.draw();
}
function addKML_2(){
var name = "2";
var url = "data/kml/2012_Earthquakes_Mag5.kml";
var featureLayer = mapObj.createFeatureLayerByKML(name,url);
console.log(featureLayer);
mapObj.addLayer(featureLayer);
mapObj.draw();
}
function addKML_3(){
var name = "3";
var url = "data/kml/timezones.kml";
var featureLayer = mapObj.createFeatureLayerByKML(name,url);
console.log(featureLayer);
mapObj.addLayer(featureLayer);
mapObj.draw();
}
function click_timezone(){
var style = new GeoBeans.Style.FeatureStyle();
var rule = new GeoBeans.Rule();
var symbolizer = new GeoBeans.Symbolizer.PolygonSymbolizer();
symbolizer.fill.color.set(0, 255, 0,0.6);
symbolizer.stroke.color.set(255, 0, 0,0.6);
symbolizer.stroke.width = 1;
rule.symbolizer = symbolizer;
style.addRule(rule);
mapObj.registerClickEvent("3",style,clickLayer_timezone_callback);
}
function clickLayer_timezone_callback(feature,x,y){
if(feature == null){
return;
}
console.log("country:" + feature.fid);
// 下面是定义弹窗的代码
var name = feature.getValue("name");
var html = "<div><div>" + name + "</div></div>";
var option = {
title : "时区"
};
// 定义infoWindow
var infoWindow = new GeoBeans.InfoWindow(html,option);
var point = new GeoBeans.Geometry.Point(x,y);
// 弹出框
mapObj.openInfoWindow(infoWindow,point);
}
</script>
<title>Map5 -- KML图层</title>
<body onload="init()">
<!-- mapDiv 为初始化地图的容器，给定高度和宽度，并指定定位方式为绝对定位 -->
<div id="mapDiv" style="height:800px;width:100%;position:absolute;top:80px;">
</div>
<!-- <div id="mapDiv" style="height:300px;width:400px;position:absolute;top:80px;">
</div> -->
<button onclick="addKML()">加载KML</button>
<button onclick="addKML_2()">earthquake</button>
<button onclick="addKML_3()">timezone</button>
<button onclick="click_timezone()">点击timezone</button>
</body>