<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_dragFeatures"></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="drag" value='Drag' type="button" class="btn btn-default" data-i18n="resources.btn_drag"></button>
<button id="none" value='None' type="button" class="btn btn-default" data-i18n="resources.text_input_value_notDrag"></button>
</div>
</div>
<script type="text/javascript" include="jquery,bootstrap" src="../js/include-web.js"></script>
<script type="text/javascript">
var map, select, drag, source,
baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World",
url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-world/rest/data";
map = new ol.Map({
target: 'map',
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
.extend([new ol.supermap.control.Logo()]),
view: new ol.View({
center: [116, 30],
zoom: 4,
projection: 'EPSG:4326',
multiWorld: true
})
});
var layer = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest({
url: baseUrl,
wrapX: true
}),
projection: 'EPSG:4326'
});
map.addLayer(layer);
var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
queryParameter: {
name: "Countries@World",
attributeFilter: "SMID = 247"
},
datasetNames: ["World:Countries"]
});
new ol.supermap.FeatureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {
source = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.result.features),
wrapX: false
});
map.addLayer(new ol.layer.Vector({
source: source
}));
});
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;
}
$(buttons[key]).on('click', function () {
clearInteraction();
select = new ol.interaction.Select({
wrapX: false
});
drag = new ol.interaction.Translate({
features: select.getFeatures()
});
drag.on('translateend', function (f) {
let obj = {};
obj.features=f.features;
obj.coordinate=f.coordinate;
console.log(f);
});
map.removeInteraction(drag);
map.addInteraction(select);
map.addInteraction(drag);
});
});
function clearInteraction() {
if (drag) {
map.removeInteraction(drag);
}
if (select) {
map.removeInteraction(select);
}
}
</script>
</body>
</html>
以上在超图示例基础上,添加了个拖拽完毕事件,现在想获取拖拽后的所有坐标,存储数据库,方便下次根据坐标连成线区域!
现在获取的还是最之前的信息!
