GIS应用|快速开发REST数据服务
随着计算机的快速发展，GIS已经在各大领域得到应用，和我们的生活息息相关， 但是基于GIS几大厂商搭建服务，都会有一定的门槛，尤其是需要server，成本高，难度大，这里介绍一种在线GIS云平台，帮你快速解决服务端的问题，你只需要考虑自己客户端的业务层即可
SuperMap Online，可在线上传数据，发布多种REST服务，为您节省购买和部署SuperMap iServer的大量财力和时间成本，将数据和服务进行安全稳定的托管。
发布为REST数据服务的数据，可以通过少量代码开发来实现要素编辑即点、线、面数据的增删改查等功能。下面带领大家快速玩转REST数据服务！
要素编辑
（点击“在线演示”可在线查看）
01上传数据，发布服务，在线安全托管
打开SuperMap Online并登录您的账号，依次点击“资源中心”-“数据”-“上传数据”。
上传数据
选择数据类型并进行上传。本示例使用的是SuperMap工作空间数据—“china.zip”。（示例数据百度云下载链接: https://pan.baidu.com/s/17gsAySUvb_nbsYWHQi4UHQ 提取码: h845 ）。
选择数据并上传
云存储支持将上传的数据发布为地图、数据、三维、空间分析等多种类型的REST服务。本示例选择发布的服务类型为“REST数据服务”。
选择服务类型并发布
发布完成后的数据可以在“资源中心”-“数据”-“我的数据”查看。调用服务前需要开启数据共享。点击服务名称下对应服务地址，选择目标目录复制链接即可调用该REST数据服务，数据服务的子资源在 SuperMap iServer中是数据查询和操作的入口，提供了数据源集合和数据查询功能的资源信息。
修改数据权限，打开REST数据服务
选择目标目录
获取REST数据服务地址
REST数据服务也可以通过使用“密钥key”的方式来进行调用，搜索并打开SuperMap Online，在首页下方找到开发模块，更多服务调用方式等你发现！
SuperMap Online首页开发模块
02调用REST数据服务，实现数据修改功能
获取服务地址后，即可在网页中调用REST数据服务。示例中，底图调用的是REST地图服务，点击可查看REST地图服务使用方法哦！
调用REST数据服务
通过简单代码编写，可以对REST数据服务进行编辑。如已知某点坐标，即可以直接在REST数据服务中添加该点。
新增点数据
REST数据服务也可以用于打造在线数据编辑平台，可以实现点、线、面要素的增删改查，修改后的结果可以同步到REST数据服务当中。
要素编辑
源码如下：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" rel="stylesheet" />
<link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' rel='stylesheet' />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/dist/ol/iclient-ol.min.js"></script>
<link href='https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' />
<script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/examples/js/widgets.js"></script>
<title>地物编辑</title>
<style>
.ol-zoom {
bottom: .5em;
font-size: 18px;
top: unset;
} .editPane {
position: absolute;
left: 15px;
top: 8px;
text-align: center;
background: #FFF;
z-index: 1000;
border-radius: 4px;
} .ol-popup {
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 120px;
} .ol-popup:after,
.ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
} .ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
} .ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
} .tooltip {
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
color: white;
padding: 4px 8px;
opacity: 0.7;
white-space: nowrap;
} @media only screen and (max-width: 640px) {
#msg_container {
transform: translate(-35%, -20%);
}
}
</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 id="popup-content"></div>
</div>
<div>
<div class="panel panel-primary editPane" id="editPane">
<div class='panel-heading'>
<h5 class='panel-title text-center'>编辑单个要素</h5>
</div>
<div class='panel-body content'>
<input type='button' class='btn btn-default' value="添加地物" onclick='addMarker()' />
<input type='button' class='btn btn-default' value="撤销添加" onclick='revocationMarker()' />
<input type='button' class='btn btn-default' value="提交" onclick='commit()' />
<input type='button' class='btn btn-default' value="修改" onclick='clearLayer(selectFeaturForUpdate)' />
<input type='button' class='btn btn-default' value="清除" onclick='clearLayer(selectFeatureForDelete)' />
</div>
</div>
</div>
<div id="pointInfoModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="largerModal">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">输入新增点名字</div>
<div class="modal-body">
<input type="text" class="form-control" id="point-info" autocomplete="off">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="revocationMarker()">取消</button>
<button type="button" class="btn btn-primary" onclick="setPointName()">确定</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="updatePointModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content" style="width: 400px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title" id="myModalLabel">
要素信息
</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-sm-3 control-label" style="width: 21%;">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="name" value="">
</div>
</div> <div class="form-group">
<label for="x" class="col-sm-3 control-label" style="width: 21%;">X(m)</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="x" value="" id="x">
</div>
</div>
<div class="form-group">
<label for="y" class="col-sm-3 control-label" style="width: 21%;">Y(m)</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="y" value="" id="y">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="submit" class="btn btn-primary" onclick="updateFeature()">修改</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="confirmModel">
<div class="modal-dialog">
<div class="modal-content message_align" style="width: 400px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title">确认信息</h4>
</div>
<div class="modal-body">
<p id="delcfmMsg">您确认要删除吗？</p>
</div>
<div class="modal-footer">
<input type="hidden" id="submitUrl" />
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<a onclick="deleteFeature()" class="btn btn-success" data-dismiss="modal">确定</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var map, draw, pointFeature, vectorSource, resultLayer, addPointsSource, addPointsLayer,
func, update, deletedId, helpTooltipElement, helpTooltip, isclearPoint,
baseMap = "https://maptiles.supermapol.com/iserver/services/map_China/rest/maps/China_Dark",
//替换为在online上发布的数据服务，需要设置为公开
dataService = "https://www.supermapol.com/proxy/iserver/services/data_china_54y8bdc4/rest/data",
editFeaturesService = new ol.supermap.FeatureService(dataService),
container = document.getElementById('popup'),
content = document.getElementById('popup-content'),
pointName = document.getElementById('point-info'),
overlay = new ol.Overlay(({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
},
offset: [0, -20]
})), map = new ol.Map({
target: 'map',
controls: ol.control.defaults({
attributionOptions: {
collapsed: true
}
})
.extend([]),
view: new ol.View({
center: [12962344.405822188, 4830679.745330002],
zoom: 5,
projection: 'EPSG:3857',
multiWorld: true
}),
});
var layer = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest({
url: baseMap
}),
projection: 'EPSG:3857'
});
map.addLayer(layer); createHelpTooltip();
initFeature();
loadLayer(); //创建鼠标操作提示
function createHelpTooltip() {
if (helpTooltipElement) {
helpTooltipElement.parentNode.removeChild(helpTooltipElement);
}
helpTooltipElement = document.createElement('div');
helpTooltipElement.className = 'tooltip hidden';
helpTooltip = new ol.Overlay({
element: helpTooltipElement,
offset: [15, 0],
positioning: 'center-left'
});
} //查询数据，页面初始化显示
function initFeature() {
var getFeatureParams = new SuperMap.GetFeaturesBySQLParameters({
//查询参数，根据自己的服务设置参数
queryParameter: {
name: "CityA_P@China",
orderBy: "SMID desc"
},
datasetNames: ["China:CityA_P"],
fromIndex: 0,
toIndex: 30
});
editFeaturesService.getFeaturesBySQL(getFeatureParams, function(serviceResult) {
var features = (new ol.format.GeoJSON()).readFeatures(serviceResult.result.features);
for (var i = 0; i < features.length; i++) {
features[i].setStyle(new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 0.9],
src: 'https://iclient.supermap.io/examples/img/markerbig_select.png'
}))
}));
} //避免重复添加图层，只对一个图层进行数据更新操作：
if (vectorSource.getFeatures().length > 0) {
vectorSource.clear();
}
vectorSource.addFeatures(features);
map.on('pointermove', pointermoveLinstener);
});
} //添加图层
function loadLayer() {
//添加查询结果图层
vectorSource = new ol.source.Vector({
wrapX: false
});
resultLayer = new ol.layer.Vector({
source: vectorSource,
}); //添加点图层
addPointsSource = new ol.source.Vector({
wrapX: false
});
addPointsLayer = new ol.layer.Vector({
source: addPointsSource,
}); map.addLayer(addPointsLayer);
map.addLayer(resultLayer);
} //鼠标移动监听，移动到点上显示名字
function pointermoveLinstener(e) {
var select = false;
map.forEachFeatureAtPixel(e.pixel, function(feature) {
if (feature.getProperties().NAME) {
map.getTargetElement().style.cursor = 'pointer';
var contentHTML = feature.getProperties().NAME;
content.innerHTML = contentHTML;
overlay.setPosition(feature.getGeometry().getCoordinates());
map.addOverlay(overlay);
select = true
}
}, {
hitTolerance: 10
});
if (!select) {
map.getTargetElement().style.cursor = '';
overlay.setPosition(undefined);
map.removeOverlay(overlay);
}
if (isclearPoint) {
helpTooltipElement.innerHTML = '选择要操作的要素';
helpTooltip.setPosition(e.coordinate);
helpTooltipElement.classList.remove('hidden');
map.addOverlay(helpTooltip);
} else {
helpTooltip.setPosition(undefined);
helpTooltipElement.classList.add('hidden');
}
} //添加标记点
function addMarker() {
if (isclearPoint) {
closeSelectListener(func);
}
widgets.alert.clearAlert();
if (!pointFeature) {
ceateMarker()
} else {
addPointsSource.clear();
ceateMarker()
}
//通过点击创建标记点
function ceateMarker() {
draw = new ol.interaction.Draw({
source: addPointsSource,
type: 'Point'
});
map.addInteraction(draw);
draw.on("drawstart", function(e) {
pointFeature = e.feature;
pointFeature.setStyle(new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: [255, 0, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 2
}),
radius: 8
})
}));
addPointsSource.addFeature(pointFeature);
map.removeInteraction(draw);
$('#pointInfoModal').modal({
backdrop: 'static',
keyboard: false,
show: true
})
$('#pointInfoModal').on('shown.bs.modal', function() {
$("#pointInfoModal #point-info").focus();
});
}); }
} //设置添加点的名字
function setPointName() {
pointFeature.setProperties({
"NAME": pointName.value
});
$('#point-info').val("");
$('#pointInfoModal').modal('hide');
} //撤销添加，清除标绘点
function revocationMarker() {
if (pointFeature) {
addPointsSource.clear();
pointFeature = null;
} else {
widgets.alert.showAlert('没有可撤回的要素。', false);
} } //提交新增点到数据服务
function commit() {
widgets.alert.clearAlert();
if (pointFeature) {
//新增点要素参数，根据自己的服务设置参数
var addFeatureParams = new SuperMap.EditFeaturesParameters({
features: pointFeature,
dataSourceName: "China",
dataSetName: "CityA_P",
editType: "add",
returnContent: true
});
editFeaturesService.editFeatures(addFeatureParams, function(serviceResult) {
if (serviceResult.result.succeed) {
addPointsSource.clear();
vectorSource.clear();
pointFeature = null;
initFeature();
widgets.alert.showAlert('提交成功', true);
}
});
} else {
widgets.alert.showAlert('没有可提交的新要素，请先添加新要素。', false);
}
} //地图点击事件，选择点进行修改或删除
function clearLayer(method) {
widgets.alert.clearAlert();
isclearPoint = true;
map.on('click', method);
func = method;
} //选择要素修改
function selectFeaturForUpdate(e) {
if (isclearPoint) {
closeSelectListener(func);
}
update = null;
widgets.alert.clearAlert();
map.forEachFeatureAtPixel(e.pixel, function(feature) {
//只修改选中第一个要素：
if (!update) {
update = feature;
var coordinate = feature.getGeometry().getCoordinates();
var name = feature.getProperties().NAME;
$('#name').val(name);
$('#x').val(coordinate[0]);
$('#y').val(coordinate[1]);
$('#updatePointModal').modal({
backdrop: 'static',
keyboard: false,
show: true
})
}
}, {
hitTolerance: 1
});
} //修改要素，更新数据服务
function updateFeature() {
$('#updatePointModal').modal('hide');
var name = document.getElementById('name').value;
var x = document.getElementById('x').value;
var y = document.getElementById('y').value;
update.getGeometry().setCoordinates([x, y]);
update.setProperties({
"NAME": name
});
//修改要素参数，根据自己的服务设置参数
var updateParams = new SuperMap.EditFeaturesParameters({
dataSourceName: "China",
dataSetName: "CityA_P",
features: update,
editType: "update"
});
editFeaturesService.editFeatures(updateParams, function(serviceResult) {
if (serviceResult.result.succeed) {
initFeature();
vectorSource.clear();
isclearPoint = false;
closeSelectListener(selectFeaturForUpdate);
widgets.alert.showAlert('更新成功', true);
} else {
widgets.alert.showAlert('更新失败', false)
}
});
} //选择要素删除
function selectFeatureForDelete(e) {
if (isclearPoint) {
closeSelectListener(func);
}
deletedId = null;
map.forEachFeatureAtPixel(e.pixel, function(feature) {
//只删选中第一个要素：
if (!deletedId) {
deletedId = feature.getId();
//避免示例数据被删除，只允许删除额外添加的点
if (deletedId > 269) {
$('#confirmModel').modal({
backdrop: 'static',
keyboard: false,
show: true
})
} else {
widgets.alert.showAlert('为保持示例数据完整性，请先添加一个点来进行删除操作', false)
}
}
}, {
hitTolerance: 1
});
} //删除要素，更新数据服务
function deleteFeature() {
//删除要素参数，根据自己的服务设置参数
var deleteParams = new SuperMap.EditFeaturesParameters({
dataSourceName: "China",
dataSetName: "CityA_P",
IDs: [deletedId],
editType: "delete"
}); editFeaturesService.editFeatures(deleteParams, function(serviceResult) {
if (serviceResult.result.succeed) {
initFeature();
vectorSource.clear();
isclearPoint = false;
closeSelectListener(selectFeatureForDelete);
widgets.alert.showAlert('删除要素成功！', true);
} else {
widgets.alert.showAlert('删除要素失败！', false)
}
});
} //关闭地图点击事件，移除鼠标提示
function closeSelectListener(method) {
isclearPoint = false;
map.un('click', method);
helpTooltip.setPosition(undefined);
map.removeOverlay(helpTooltip);
helpTooltipElement.classList.add('hidden');
}
</script>
</body> </html>
REST数据服务不仅可以通过简单开发实现数据编辑、查询等功能，也可以直接在云应用中通过“添加服务”的方式进行使用。本篇文章以REST数据服务为例，通过云存储还可以发布地图、三维、空间分析等多种类型的REST服务，点击可查看REST地图服务使用方法，后续会发布更多关于REST服务使用的相关文章，还请大家多多关注哦！
GIS应用|快速开发REST数据服务的更多相关文章
- EMIS快速开发平台 - 微服务版技术选型
http://demo.zuoyour.com/system/login EMIS快速开发平台 - 微服务版技术选型 开发框架:Spring Boot 2.1.3.RELEASE 微服务:Spring ...
- Spring Boot 是 Spring 的一套快速配置脚手架，可以基于Spring Boot 快速开发单个微服务
Spring Boot 是 Spring 的一套快速配置脚手架,可以基于Spring Boot 快速开发单个微服务,Spring Cloud是一个基于Spring Boot实现的云应用开发工具:Spr ...
- GIS应用|快速开发REST空间分析服务
随着计算机的快速发展,GIS已经在各大领域得到应用,和我们的生活息息相关, 但是基于GIS几大厂商搭建服务,都会有一定的门槛,尤其是需要server,成本高,难度大,这里介绍一种在线GIS云平台,帮你 ...
- 使用node.js + json-server + mock.js 搭建本地开发mock数据服务
在开发过程中,前后端不论是否分离,接口多半是滞后于页面开发的.所以建立一个REST风格的API接口,给前端页面提供虚拟的数据,是非常有必要的.对比过多种mock工具后,我最终选择了使用 json se ...
- GIS应用|快速搭建REST地图服务
SuperMap Online云存储作为您的"在线GIS云盘",除了可以在云端存储GIS数据,还可以将数据直接发布多种REST服务,为您节省购买和部署SuperMap iServe ...
- GIS应用|快速开发在线路径导航应用
导航应用可用于路径规划及仿真,并且常作为一个重要模块融入到各类企业管理业务中,如面向物流管理.商品配送.车辆监控等场景,那么如何开发一个简单的在线路径导航应用呢?SuperMap Online为您解答 ...
- EF快速开发定义数据接口类（转）
using System; using System.Linq; using System.Linq.Expressions; using System.Data.Objects; namespace ...
- 在ASP.NET Core中使用Apworks开发数据服务：对HAL的支持
HAL,全称为Hypertext Application Language,它是一种简单的数据格式,它能以一种简单.统一的形式,在API中引入超链接特性,使得API的可发现性(discoverable ...
- 海量大数据大屏分析展示一步到位：DataWorks数据服务对接DataV最佳实践
1. 概述 数据服务(https://ds-cn-shanghai.data.aliyun.com) 是DataWorks产品家族的一员,提供了快速将数据表生成API的能力,通过可视化的向导,一分钟 ...
随机推荐
- 174道 JavaScript 面试题，助你查漏补缺
最近在整理 JavaScript 的时候发现遇到了很多面试中常见的面试题,本部分主要是作者在 Github 等各大论坛收录的 JavaScript 相关知识和一些相关面试题时所做的笔记,分享这份总结给 ...
- Linux系统的日志管理、时间同步、延迟命令at
方便查看和管理 /var/log/messages ?系统服务及日志,包括服务的信息,报错等等 /var/log/secure ? ? ? ? 系统认证信息日志 /var/log/maillog ? ...
- VS Code闪现，巨头纷纷入局的Web IDE缘何崛起？
我发了,我装的. 就在前几天,微软简短的发布了Visual Studio Code for the Web 的公告,而没过一阵,这则公告就被删除了,现在点经相关内容已经是404状态了.虽然公告的内容已 ...
- Linux复习笔记-001-进程的管理
1.什么是进程? 进程是已经启动的可执行的程序运行实例. 程序是二进制文件,静态 ./bin/date/ /usr/sbin/ 进程:是程序运行的过程 2.Linux为1的进程? centos5或6为 ...
- Python - 面向对象编程 - __call__()
__call()__ 的作用 使得类实例对象可以像普通函数那样被调用 实际栗子 from typing import Callable class PoloBlog: def __init__(sel ...
- Docker Note1——架构和三要素
Docker官方文档: https://docs.docker.com/ 一.docker架构 C/S架构,主要由 client / daemon / containers / images 组成. ...
- LVS＋keepalived集群
一.Keepalived工具介绍专为LVS和HA设计的一款健康检查工具 支持故障自动切换(Failover) 支持节点健康状态检查(Health Checking) 官方网站:http://www.k ...
- MongoDB索引的简单理解
目录 MongoDB索引 1.语法准备 2.数据准备: 3.索引 3.1 唯一索引 3.2 单键索引 3.3 多键索引 3.4 复合索引 3.5 交叉索引 3.6 部分索引 3.7覆盖索引 3.8 全 ...
- nginx proxy_next_upstream 与openresty balancer.set_more_tries的使用
背景 我们这边网关服务使用的 kong,前段时间上线一个服务,这个服务它报错了,产生了502的错误码,追查这个报错的时候发现了网关服务的两个可疑的地方,第一个疑点是我们在Kong上配置的 Retrie ...
- 自己实现Controller——标准型
标准Controller 上一篇通过一个简单的例子,编写了一个controller-manager,以及一个极简单的controller.从而对controller的开发有个最基本的认识,但是细心观察 ...