Skip to content

Commit e5f2b7f

Browse files
Vein-YanVein-Yan
committed
【update】提交新添加的内容，范例里面增加代码编辑器等
1 parent 6875571 commit e5f2b7f

File tree

168 files changed

+32941
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

168 files changed

+32941
-0
lines changed

‎examples/GraphicsEvents.html

+245
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Graphic图层符号绘制</title>
6+
<style type="text/css">
7+
body{
8+
margin: 0;
9+
overflow: hidden;
10+
background: #fff;
11+
}
12+
#map{
13+
position: relative;
14+
height: 500px;
15+
border:1px solid #3473b7;
16+
}
17+
#toolbar {
18+
position: relative;
19+
padding-top: 5px;
20+
padding-bottom: 10px;
21+
}
22+
</style>
23+
24+
<script type="text/javascript">
25+
var map,layer, graphicLayer, symbolinfo, selectGraphic, popup = null,img,imageWidth=32, imagePaths = ['./images/marker_blue.png','./images/marker_red.png'],imageIdx = 0,
26+
host = document.location.toString().match(/file:\/\//) ? "http://support.supermap.com.cn:8090" : 'http://' + document.location.host;
27+
url = host + "/iserver/services/map-china400/rest/maps/China";
28+
function init()
29+
{
30+
31+
if(!document.createElement("canvas").getContext){
32+
alert("您的浏览器不支持Canvas，请先升级");
33+
return;
34+
}
35+
map = new SuperMap.Map("map",{controls:[
36+
new SuperMap.Control.Zoom(),
37+
new SuperMap.Control.Navigation() ,
38+
new SuperMap.Control.LayerSwitcher()
39+
]});
40+
layer= new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null,{maxResolution:"auto"});
41+
layer.events.on({"layerInitialized":addLayer});
42+
graphicLayer = new SuperMap.Layer.Graphics("Graphic Layer", null, {hitDetection: true, useCanvasEvent: false});
43+
44+
selectGraphic = new SuperMap.Control.SelectGraphic(graphicLayer, {
45+
onSelect: onGraphicSelect,
46+
hover: false,
47+
onUnSelect: onUnGraphicSelect
48+
});
49+
}
50+
51+
function onGraphicSelect(result, evt) {
52+
var image = graphicLayer.style.image;
53+
54+
var pixel = map.getPixelFromLonLat(new SuperMap.LonLat(result.geometry.x, result.geometry.y));
55+
var evtPixel = evt.xy;
56+
//点击点与中心点的角度
57+
var angle = (Math.atan2(evtPixel.y - pixel.y, evtPixel.x - pixel.x))/Math.PI*180;
58+
angle = angle > 0 ? angle : 360+angle;
59+
//确定扇叶
60+
var index = Math.ceil(angle/(image.angle + image.spaceAngle));
61+
addPopup(result, evt, index);
62+
}
63+
function onUnGraphicSelect(evt) {
64+
//alert(2);
65+
}
66+
67+
function addPopup(feature, evt, index) {
68+
if(!!popup) {
69+
map.removePopup(popup);
70+
}
71+
selectedFeature = feature;
72+
var lonlat = new SuperMap.LonLat(feature.geometry.x,feature.geometry.y);
73+
var contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;'>" +
74+
"<span style='font-weight: bold; font-size: 12px;'>要素ID： " + feature.id + "</span><br>";
75+
if(symbolinfo instanceof SuperMap.Style.Clover){
76+
contentHTML +="<span style='font-weight: bold; font-size: 12px;'>叶数索引： " + index + "</span><br>";
77+
lonlat = map.getLonLatFromPixel(evt.xy);
78+
}else{
79+
lonlat = new SuperMap.LonLat(feature.geometry.x,feature.geometry.y);
80+
}
81+
contentHTML +="</div>"
82+
//初始化一个弹出窗口，当某个地图要素被选中时会弹出此窗口，用来显示选中地图要素的属性信息
83+
popup = new SuperMap.Popup.FramedCloud("chicken",
84+
lonlat,
85+
null,
86+
contentHTML,
87+
null,
88+
true);
89+
feature.popup = popup;
90+
map.addPopup(popup);
91+
92+
}
93+
94+
function addLayer(){
95+
map.addLayers([layer,graphicLayer]);
96+
//显示地图范围
97+
map.setCenter(new SuperMap.LonLat(0, 0), 1);
98+
99+
map.addControl(selectGraphic);
100+
selectGraphic.activate();
101+
addClover();
102+
}
103+
104+
//symbol相关属性 填充色、边框颜色、半径、
105+
var fillColors = 'rgba(255,153,0,1)';
106+
var strokeColors = 'rgba(255,204,0,1)';
107+
var radius = 9;
108+
109+
110+
var e = 10000000;
111+
function addClover() {
112+
symbolinfo = new SuperMap.Style.Clover({
113+
radius: radius,
114+
fill: new SuperMap.Style.Fill({
115+
color: fillColors
116+
}),
117+
stroke: new SuperMap.Style.Stroke({
118+
color: strokeColors
119+
})
120+
});
121+
loadData();
122+
}
123+
function addData(img)
124+
{
125+
if(img.complete ){
126+
loadData();
127+
}else{
128+
img.onload = function() {
129+
loadData();
130+
}
131+
}
132+
}
133+
134+
function loadData() {
135+
if(!!popup) {
136+
map.removePopup(popup);
137+
}
138+
graphicLayer.removeAllGraphics();
139+
var total = document.getElementById("total").value;
140+
graphicLayer.style = {
141+
image: symbolinfo
142+
};
143+
var points = [];
144+
for(var i = 0; i<total; i++){
145+
var point= new SuperMap.Geometry.Point(2 * e * Math.random() - e, 2 * e * Math.random() - e);
146+
var pointVector = new SuperMap.Graphic(point);
147+
//pointVector.style = ;
148+
points.push(pointVector)
149+
}
150+
graphicLayer.addGraphics(points);
151+
}
152+
153+
function redraw() {
154+
var idx = (++imageIdx)%2;
155+
img = new Image();
156+
img.src = imagePaths[idx];
157+
symbolinfo = new SuperMap.Style.Image({
158+
img:img,
159+
anchor:[16,16]
160+
});
161+
graphicLayer.style = {
162+
image: symbolinfo
163+
};
164+
if(img.complete ){
165+
graphicLayer.redraw();
166+
}else{
167+
img.onload = function() {
168+
graphicLayer.redraw();
169+
}
170+
}
171+
172+
}
173+
174+
//移除数据
175+
function removeData()
176+
{
177+
if(!!popup) {
178+
map.removePopup(popup);
179+
}
180+
graphicLayer.removeAllGraphics();
181+
graphicLayer.refresh();
182+
}
183+
function plus() {
184+
var idx = (++imageIdx)%2;
185+
img = new Image();
186+
imageWidth +=10;
187+
img.src = imagePaths[idx];
188+
symbolinfo = new SuperMap.Style.Image({
189+
img:img,
190+
anchor:[imageWidth/2,imageWidth/2]
191+
});
192+
graphicLayer.style = {
193+
image: symbolinfo,
194+
graphicHeight:imageWidth,
195+
graphicWidth:imageWidth
196+
};
197+
if(img.complete ){
198+
graphicLayer.redraw();
199+
}else{
200+
img.onload = function() {
201+
graphicLayer.redraw();
202+
}
203+
}
204+
}
205+
function minus() {
206+
var idx = (++imageIdx)%2;
207+
img = new Image();
208+
imageWidth -=10;
209+
if(imageWidth < 5){
210+
imageWidth = 5;
211+
}
212+
img.src = imagePaths[idx];
213+
symbolinfo = new SuperMap.Style.Image({
214+
img:img,
215+
anchor:[imageWidth/2,imageWidth/2]
216+
});
217+
graphicLayer.style = {
218+
image: symbolinfo,
219+
graphicHeight:imageWidth,
220+
graphicWidth:imageWidth
221+
};
222+
if(img.complete ){
223+
graphicLayer.redraw();
224+
}else{
225+
img.onload = function() {
226+
graphicLayer.redraw();
227+
}
228+
}
229+
}
230+
</script>
231+
</head>
232+
<body onload="init()" >
233+
<div id="toolbar">
234+
<input id="total" type="text" style="width: 100px" value="100000">
235+
<input type="button" class="btn" style="margin-bottom: 10px" value="开始绘制" onclick="addClover()">
236+
<input type="button" class="btn" style="margin-bottom: 10px" value="切换图标并重绘" onclick="redraw()">
237+
<input type="button" class="btn" style="margin-bottom: 10px" value="+" onclick="plus()">
238+
<input type="button" class="btn" style="margin-bottom: 10px" value="-" onclick="minus()">
239+
<input type="button" class="btn" style="margin-bottom: 10px" value="移除" onclick="removeData()">
240+
241+
</div>
242+
<div id="map"></div>
243+
<script src = '../libs/SuperMap.Include.js'></script>
244+
</body>
245+
</html>

‎examples/coordTransfer.html

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>获取经纬度坐标</title>
6+
<style type="text/css">
7+
body{
8+
margin: 0;
9+
overflow: hidden;
10+
background: #fff;
11+
}
12+
#map{
13+
position: relative;
14+
height: 553px;
15+
border:1px solid #3473b7;
16+
}
17+
.info{
18+
position: absolute;
19+
width: 250px;
20+
height: 150px;
21+
top: 10px;
22+
right: 10px;
23+
z-index: 9999;
24+
background-color: white;
25+
box-shadow: 0px 0px 20px 0px #9da9af;
26+
}
27+
.tips{
28+
color: #7c7c7c;
29+
font-family: "microsoft yahei";
30+
margin-left: 10px;
31+
margin-top: 55px;
32+
}
33+
.loading{
34+
width: 48px;
35+
margin-left: auto;
36+
margin-right: auto;
37+
margin-top: 55px;
38+
text-align: center;
39+
}
40+
.content{
41+
padding: 18px;
42+
}
43+
.content>div{
44+
margin-bottom: 5px;
45+
}
46+
</style>
47+
<link href='./css/bootstrap.min.css' rel='stylesheet' />
48+
<link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
49+
<script src = './js/jquery.js'></script>
50+
<script type="text/javascript">
51+
var map, layer, vectorLayer,drawPoint,lastFeature,
52+
host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host,
53+
url = host + "/iserver/services/map_china400/rest/maps/China",
54+
transferUrl = host + "/iserver/services/data-world/rest/data/coordtransfer";
55+
function init(){
56+
//初始化地图
57+
map = new SuperMap.Map("map",{controls:[
58+
new SuperMap.Control.Navigation() ,
59+
new SuperMap.Control.Zoom()
60+
]});
61+
map.addControl(new SuperMap.Control.MousePosition());
62+
//初始化图层
63+
layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null,{maxResolution:"auto"});
64+
vectorLayer = new SuperMap.Layer.Vector("vectorLayer");
65+
66+
drawPoint = new SuperMap.Control.DrawFeature(vectorLayer, SuperMap.Handler.Point);
67+
//监听图层信息加载完成事件
68+
layer.events.on({"layerInitialized":addLayer});
69+
drawPoint.events.on({'featureadded':drawCompleted});
70+
}
71+
//异步加载图层
72+
function addLayer(){
73+
map.addLayers([layer,vectorLayer]);
74+
map.addControl(drawPoint);
75+
drawPoint.activate();
76+
//显示地图范围
77+
map.setCenter(new SuperMap.LonLat(0, 0), 1);
78+
}
79+
80+
function drawCompleted(evt){
81+
$('.info-body').hide();
82+
$('.loading').show();
83+
lastFeature && vectorLayer.removeFeatures([lastFeature]);
84+
lastFeature = evt.feature;
85+
transfer();
86+
}
87+
88+
function transfer(features){
89+
var transferParams = new SuperMap.REST.CoordTransferParameters({
90+
features:vectorLayer.features,
91+
targetPrj:{"distanceUnit":"METER","projectionParam":null,"epsgCode":4326,"coordUnit":"DEGREE","name":"Longitude / Latitude Coordinate System---GCS_WGS_1984","projection":null,"type":"PCS_EARTH_LONGITUDE_LATITUDE","coordSystem":{"datum":{"name":"D_WGS_1984","type":"DATUM_WGS_1984","spheroid":{"flatten":0.00335281066474748,"name":"WGS_1984","axis":6378137,"type":"SPHEROID_WGS_1984"}},"unit":"DEGREE","spatialRefType":"SPATIALREF_EARTH_LONGITUDE_LATITUDE","name":"GCS_WGS_1984","type":"GCS_WGS_1984","primeMeridian":{"longitudeValue":0,"name":"Greenwich","type":"PRIMEMERIDIAN_GREENWICH"}}},
92+
sourcePrj:{"distanceUnit":"METER","projectionParam":{"centralParallel":0,"firstPointLongitude":0,"rectifiedAngle":0,"scaleFactor":1,"falseNorthing":0,"centralMeridian":0,"secondStandardParallel":0,"secondPointLongitude":0,"azimuth":0,"falseEasting":0,"firstStandardParallel":0},"epsgCode":3857,"coordUnit":"METER","name":"User Define","projection":{"name":"SPHERE_MERCATOR","type":"PRJ_SPHERE_MERCATOR"},"type":"PCS_USER_DEFINED","coordSystem":{"datum":{"name":"D_WGS_1984","type":"DATUM_WGS_1984","spheroid":{"flatten":0.00335281066474748,"name":"WGS_1984","axis":6378137,"type":"SPHEROID_WGS_1984"}},"unit":"DEGREE","spatialRefType":"SPATIALREF_EARTH_LONGITUDE_LATITUDE","name":"GCS_WGS_1984","type":"GCS_WGS_1984","primeMeridian":{"longitudeValue":0,"name":"Greenwich","type":"PRIMEMERIDIAN_GREENWICH"}}}
93+
});
94+
var transferService = new SuperMap.REST.CoordTransferService(transferUrl,{
95+
eventListeners:{
96+
processCompleted:function(evt){
97+
$('.info-body').hide();
98+
$('.content').show();
99+
var feature = evt.result.features[0];
100+
var geometry =feature.geometry;
101+
$('.lon').html(geometry.x);
102+
$('.lat').html(geometry.y);
103+
},
104+
processFailed:function(){
105+
$('.info-body').hide();
106+
$('.tips').show();
107+
}
108+
}
109+
});
110+
transferService.processAsync(transferParams);
111+
}
112+
113+
</script>
114+
</head>
115+
<body onLoad = "init()">
116+
<div class="info">
117+
<div class="tips info-body">点击地图可获取经纬度坐标</div>
118+
<div class="loading info-body" style="display:none;"><img src="./images/loading.gif" /></div>
119+
<div class="content info-body" style="display:none;">
120+
<h4>坐标：</h4>
121+
<div>经度：<span class="lon"></span></div>
122+
<div>纬度：<span class="lat"></span></div>
123+
</div>
124+
</div>
125+
<div id = "map"></div>
126+
<script src = '../libs/SuperMap.Include.js'></script>
127+
</body>
128+
</html>

0 commit comments

Comments
 (0)