Repository navigation
Expand file tree
/
Copy pathdrawFeatures.html
More file actions
97 lines (94 loc) · 3.63 KB
/
Copy pathdrawFeatures.html
File metadata and controls
97 lines (94 loc) · 3.63 KB
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
<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_drawFeatures"></title>
<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
<style>
.ol-popup {
position: absolute;
top: 50px;
right: 20px;
}
</style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<div id="popup" class="ol-popup">
<div class="btn-group" role="group" aria-label="...">
<button id="drawPoint" value='Point' type="button" class="btn btn-default" data-i18n="resources.text_input_value_drawPoint"></button>
<button id="drawLine" value='LineString' type="button" class="btn btn-default" data-i18n="resources.text_input_value_drawLine"></button>
<button id="drawPolygon" value='Polygon' type="button" class="btn btn-default" data-i18n="resources.text_input_value_drawPolygon"></button>
<button id="drawCircle" value='Circle' type="button" class="btn btn-default" data-i18n="resources.btn_drawCircle"></button>
<button id="none" value='None' type="button" class="btn btn-default" data-i18n="resources.btn_notDraw"></button>
<button id="clear" value='Clear' type="button" class="btn btn-default" data-i18n="resources.text_input_value_clear"></button>
</div>
</div>
<script type="text/javascript" include="jquery,bootstrap" src="../js/include-web.js"></script>
<script type="text/javascript">
var map, draw,
url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-china400/rest/maps/China";
map = new ol.Map({
target: 'map',
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
.extend([new ol.supermap.control.Logo()]),
view: new ol.View({
center: [12957388, 4853991],
zoom: 4,
projection: 'EPSG:3857',
multiWorld: true
})
});
var layer = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest({
url: url,
wrapX: true
}),
projection: 'EPSG:3857'
});
var source = new ol.source.Vector({wrapX: false});
var vector = new ol.layer.Vector({
source: source
});
map.addLayer(layer);
map.addLayer(vector);
var info = new ol.control.Control({element: document.getElementById('popup')});
info.setMap(map);
map.addControl(info);
var buttons = $('.btn-group').children();
buttons.map(function (key) {
var value = buttons[key].value;
if (value === 'None') {
$(buttons[key]).on('click', function () {
clearInteraction();
});
return;
}
if (value === 'Clear') {
$(buttons[key]).on('click', function () {
clearInteraction();
source.clear();
});
return;
}
$(buttons[key]).on('click', function () {
clearInteraction();
draw = new ol.interaction.Draw({
source: source,
type: buttons[key].value,
snapTolerance: 20
});
map.addInteraction(draw);
});
});
function clearInteraction() {
if (draw) {
map.removeInteraction(draw);
}
}
</script>
</body>
</html>