标签：function map style ol GIS REST new 快速
随着计算机的快速发展，GIS已经在各大领域得到应用，和我们的生活息息相关， 但是基于GIS几大厂商搭建服务，都会有一定的门槛，尤其是需要server，成本高，难度大，这里介绍一种在线GIS云平台，帮你快速解决服务端的问题，你只需要考虑自己客户端的业务层即可
SuperMap Online，可在线上传数据，发布多种REST服务，为您节省购买和部署SuperMap iServer的大量财力和时间成本，将数据和服务进行安全稳定的托管。
发布为REST空间分析服务的数据，可以通过少量代码开发来实现数据集、几何对象的缓冲分析、叠加分析、表面分析等空间分析功能。如通过结合REST数据服务的查询功能，可以打造缓冲区范围内点数据查询系统，助力在线选址。
北京三级综合医院1km范围内小区查询平台
下面小编将带领大家使用REST空间分析服务实现缓冲区分析功能！
01上传数据，发布服务，在线安全托管
打开SuperMap Online并登录您的账号，依次点击“资源中心”-“数据”-“上传数据”。
上传数据
选择数据类型并进行上传数据文件，本示例使用的数据为“北京市三级综合医院.csv”。（示例数据百度云链接：https://pan.baidu.com/s/1jmTS49U-hpcRDe1y-ld8uw 提取码: 6p3v）
选择数据并上传
云存储支持将上传的数据发布为地图、数据、三维、空间分析等多种类型的REST服务。本示例选择发布的服务类型为“REST空间分析服务”和“REST数据服务”。
选择服务发布类型
发布完成后的数据可以在“资源中心”-“数据”-“我的数据”查看。调用服务前需要开启数据共享。点击服务名称下对应服务地址，选择目标目录复制链接即可调用该REST空间分析服务。
修改数据权限，打开REST空间分析服务
选择目标目录
获取REST空间分析服务地址
REST空间分析服务也可以通过使用“密钥key”的方式来进行调用，搜索并打开SuperMap Online，在首页下方找到开发模块，更多服务调用方式等你发现！
SuperMap Online首页开发模块
02调用REST空间分析服务，实现缓冲区分析功能
实现缓冲区分析功能可以先调用REST数据服务，并在地图上显示点数据的位置。
调用REST数据服务，显示点数据
调用REST空间分析服务，对点数据进行缓冲区分析。
调用REST空间分析服务，实现缓冲区分析
REST空间分析服务通过结合REST数据服务的查询功能可实现在线数据查询，助力打造在线选址平台。示例中，通过结合REST数据服务和REST空间分析服务，打造北京三级综合医院1km范围内小区在线查询平台。
北京三级综合医院1km范围内小区查询平台
本篇文章以REST空间分析服务为例，主要描述了如何使用REST空间分析服务实现缓冲区分析功能。通过云存储可以发布地图、三维、空间分析等多种类型的REST服务，后续会发布更多关于REST服务使用的相关文章，还请大家多多关注哦！
代码百度云链接：https://pan.baidu.com/s/1vvt9d8cjJSf-ZxZxSarB0g 提取码: ab93
源码如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<meta charset="UTF-8">
<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: 20px;
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%);
}
.editPane {
position: absolute;
left: 0px;
top: 8px;
text-align: center;
background: #FFF;
}
}
</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='initFeature()' />
<input type='button' class='btn btn-default' value="清除要素" onclick='resetFeature()' />
<input type='button' class='btn btn-default' value="缓冲区分析" onclick='bufferAnalystProcess()' />
<input type='button' class='btn btn-default' value="清除缓冲区" onclick='resetBuffer()' />
<input type='button' class='btn btn-default' value="几何查询" onclick='selectBuffer()' />
</div>
</div>
</div>
<script type="text/javascript">
var map, vectorFeatrue, vectorBuffer, editFeaturesService, vectorSource, resultLayer, features, queryVectorSource, cour,
dataService = "https://www.supermapol.com/proxy/iserver/services/data_beijingshisanjizongheyiyuan_t0sgqkly/rest/data",
fangchan_service = "https://www.supermapol.com/proxy/iserver/services/data_fangchanshuju_uzz5geiv/rest/data",
spatialanalystService = "https://www.supermapol.com/proxy/iserver/services/spatialanalyst_beijingshisanjizongheyiyuan_y3c93ow3/restjsr/spatialanalyst",
container = document.getElementById('popup'),
content = document.getElementById('popup-content'),
overlay = new ol.Overlay(({
element: container,
autoPan: false,
autoPanAnimation: {
duration: 250
},
offset: [0, 0]
})),
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.35, 39.89],
zoom: 10,
projection: "EPSG:4326",
multiWorld: true
}),
layers: [new ol.layer.Tile({
source: new ol.source.Tianditu({
layerType: 'vec',
key: "1d109683f4d84198e37a38c442d68311",
projection: "EPSG:4326"
})
}), new ol.layer.Tile({
source: new ol.source.Tianditu({
layerType: 'vec',
key: "1d109683f4d84198e37a38c442d68311",
isLabel: true,
projection: "EPSG:4326"
})
})]
});
//创建鼠标操作提示：
var helpTooltipElement, helpTooltip, isclearPoint;
createHelpTooltip();
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'
});
}
loadLayer();
function loadLayer() {
//添加查询结果图层
vectorSource = new ol.source.Vector({
wrapX: false
});
resultLayer = new ol.layer.Vector({
source: vectorSource,
});
map.addLayer(resultLayer);
}
function initFeature() {
widgets.alert.clearAlert();
var featureService = new ol.supermap.FeatureService(dataService);
var getFeatureParams = new SuperMap.GetFeaturesBySQLParameters({
queryParameter: {
name: "datasetcsv_208277268@olpg6",
orderBy: "SMID desc"
},
datasetNames: ["olpg6:datasetcsv_208277268"],
fromIndex: 0,
toIndex: 999999
});
featureService.getFeaturesBySQL(getFeatureParams, function(serviceResult) {
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://www.supermapol.com/developer/examples/img/hospital.png'
}))
}));
}
//避免重复添加图层，只对一个图层进行数据更新操作：
if (vectorSource.getFeatures().length > 0) {
vectorSource.clear();
}
vectorSource.addFeatures(features);
map.on('pointermove', pointermoveLinstener);
});
}
function pointermoveLinstener(e) {
widgets.alert.clearAlert();
cour = e.pixel;
var select = false;
var flag = false;
map.forEachFeatureAtPixel(e.pixel, function(feature) {
var s = feature.getGeometry();
if (feature.getProperties()['NAME']) {
map.getTargetElement().style.cursor = 'pointer';
var contentHTML = feature.getProperties()['NAME'];
content.innerHTML = contentHTML;
overlay.setPosition(map.getCoordinateFromPixel(cour));
map.addOverlay(overlay);
select = true
flag = true
} else if (feature.getProperties()['名称'] && !flag) {
map.getTargetElement().style.cursor = 'pointer';
var contentHTML = feature.getProperties()['名称'];
content.innerHTML = contentHTML;
overlay.setPosition(map.getCoordinateFromPixel(cour));
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 resetFeature() {
widgets.alert.clearAlert();
if (features) {
vectorSource.clear();
features = null;
} else {
widgets.alert.showAlert('没有要素可以清除', false);
}
}
//缓冲区分析
function bufferAnalystProcess() {
widgets.alert.clearAlert();
if (vectorBuffer) {
widgets.alert.showAlert('已经进行了缓冲区分析', false);
} else {
if (features) {
var dsBufferAnalystParameters = new SuperMap.DatasetBufferAnalystParameters({
dataset: "datasetcsv_208277268@olpg6",
bufferSetting: new SuperMap.BufferSetting({
endType: SuperMap.BufferEndType.ROUND,
leftDistance: {
value: 1000
},
rightDistance: {
value: 1000
},
semicircleLineSegment: 50,
})
});
new ol.supermap.SpatialAnalystService(spatialanalystService).bufferAnalysis(dsBufferAnalystParameters, function(serviceResult) {
vectorBuffer = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.result.recordset.features)
});
var resultLayer = new ol.layer.Vector({
source: vectorBuffer,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#92D0FC',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(146,208,252,0.5)'
})
})
});
var layersArray = map.getLayers();
layersArray.insertAt(1, resultLayer);
});
} else {
widgets.alert.showAlert('请先查询要素', false);
}
}
}
function resetBuffer() {
widgets.alert.clearAlert();
if (queryVectorSource) {
queryVectorSource.clear();
queryVectorSource = null;
}
if (vectorBuffer) {
vectorBuffer.clear();
vectorBuffer = null;
} else {
widgets.alert.showAlert('没有缓冲区可以清除', false);
}
}
function selectBuffer() {
widgets.alert.clearAlert();
if (queryVectorSource) {
queryVectorSource.clear();
queryVectorSource = null;
}
if (vectorBuffer) {
isclearPoint = true;
map.on('click', bufferQery);
} else {
widgets.alert.showAlert('请先进行缓冲区分析', false);
}
}
function bufferQery(e) {
query = null;
map.forEachFeatureAtPixel(e.pixel, function(feature) {
//只选中第一个要素：
if (!query) {
query = feature;
var geometryParam = new SuperMap.GetFeaturesByGeometryParameters({
datasetNames: ["olpg6:datasetcsv_1969900686"],
geometry: query.getGeometry(),
spatialQueryMode: "CONTAIN",
fromIndex: 0,
toIndex: 9999,
maxFeatures: 10000
});
new ol.supermap.FeatureService(fangchan_service).getFeaturesByGeometry(geometryParam, function(serviceResult) {
queryVectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.result.features),
wrapX: false
});
resultLayer = new ol.layer.Vector({
source: queryVectorSource,
style: 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
})
})
});
map.getView().animate({
duration: 850,
zoom: 15,
center: [query.getGeometry().extent_[0], query.getGeometry().extent_[1]]
});
map.addLayer(resultLayer);
isclearPoint = false;
closeSelectListener();
});
}
}, {
hitTolerance: 1
});
}
function closeSelectListener() {
isclearPoint = false;
map.un('click', bufferQery);
helpTooltip.setPosition(undefined);
map.removeOverlay(helpTooltip);
helpTooltipElement.classList.add('hidden');
}
</script>
</body>
</html>
空间分析代码
注：文中使用数据均为示例数据，可能与实际情况存在偏差。
标签：function,map,style,ol,GIS,REST,new,快速 来源： https://www.cnblogs.com/zhuimengdeyuanyuan/p/15568598.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。