水利一张图平台是水利大数据的基础工作底板、统一的资源视图、天然的数据联接器，协助水利部门展示丰富的数据资源，有利于各单位部门发现数据、看见数据、探索数据、应用数据。
1.该平台首先对水利空间数据、服务资源进行分层分级规划，保障水利地理信息的汇聚、处理、存储、管理、服务与更新，打造全息“水空间”
2.其次搭建水利一张图平台，重点发布水务专题服务，数据服务，基础功能服务、专业模型服务，面向多组织，提供统一的、二三维一体化的资源门户，提供数据查询、信息展示、资源自服务、快速定制应用。实现智慧水务透彻感知、全面互联、深度整合、广泛共享、智能应用。
数据服务
1.数据分类
数据服务按照数据的标准分类和所属专题进行分类，从而进行数据的过滤显示。
标准分类目录，包括：智能地图、三维场景、矢量数据服务、要素服务、影像服务、三维数据服务、OGC标准服务、时态数据服务、其他服务。
专题分类目录，包括：防汛抗旱、水资源管理、水环境管理、水土保持、水库移民、农田水利。
2.数据搜索
支持通过关键字对数据服务进行搜索，搜索结果包括每个数据服务的缩略图、名称、描述、作者、日期等信息，支持搜索结果的分页展示。展示方式支持平铺或列表两种。
3.详情展示
支持展示每个数据服务的详细信息，包括缩略图、名称、描述、类型、作者、修改时间等。提供打开数据服务的入口，管理员可进行编辑、删除、共享。
基于SOA进行平台架构设计
1.SOA是基于开放的Internet标准和协议、支持对应用程序或应用程序组件进行描述、发布、发现和使用的一种应用架构。
2.SOA支持将可重用的数据和应用作为服务或功能进行集成，并可以在需要时通过网络访问这些服务或功能。
3.这个网络可以完全包含在平台内部局域网，或是基于水利电子政务专网。
4.通过SOA，开发者可以对不同的服务或功能进行组合以完成一系列的业务逻辑与展现，最终可让用户像使用本地业务组件一样方便地调用服务或功能等各种资源。
平台根据需要将这些服务组装为按需应用程序即相互连接的服务提供者和使用者集合，彼此结合以完成特定任务，使应用业务能够适应不断变化的情况和需求。
5.这些服务是自包含，并具有定义良好的接口，允许这些服务的使用者——了解如何与其进行交互。
6.从技术角度而言，SOA 带来了“松散耦合”的应用程序组件，在此类组件中，代码不一定绑定到某个特定的数据库（甚至不一定绑定到特定的基础设施）。正是得益于这个松散耦合特性，才使得能够将服务组合为各种应用程序。这样还大幅度提高了代码重用率，可以在增加功能的同时减少工作量。WEB 服务是目前实现SOA框架的首选。
7.Web Service是就现在而言最适合实现SOA的一些技术的集合，事实上SOA架构模式从提出到逐渐为业界所接受，主要在于Web Service标准的成熟和应用的普及，这为广泛的实现SOA架构提供了基础。Web Service中的各种协议将满足SOA架构所需。
8.水利空间信息资源整合共享平台将基于SOA的架构进行设计。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title data-i18n="resources.title_cartoCSSHightlight"></title>
<style type="text/css">
body {
margin: 0;
overflow: hidden;
background: #fff;
width: 100%;
height: 100%
}
#map {
position: absolute;
width: 100%;
height: 100%;
}
#toolbar {
position: absolute;
top: 50px;
right: 10px;
text-align: center;
z-index: 100;
border-radius: 4px;
}
.layerItems {
border: 1px solid #999;
display: none;
position: absolute;
z-index: 1000;
background-color: rgba(255,255,255,0.5);
padding-right: 20px;
}
</style>
</head>
<body>
<div id="toolbar" class="panel panel-primary">
<div class='panel-heading'>
<h5 class='panel-title text-center' data-i18n="resources.text_cartoCSSHightlight"></h5></div>
<div class='panel-body content'>
<input type="button" class="btn btn-default" data-i18n="[value]resources.btn_cancelHighlight" onclick="closeInfoWin();"/>
</div>
</div>
<div class="layerItems">选择需要高亮的要素：
<ul id='layerItems'></ul>
</div>
<div id="map"></div>
<script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
<script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
<script type="text" id="textData">
@color:#ee9900;
*{
line-color:@color;
line-opacity:1;
line-width:3;
polygon-fill:@color;
polygon-opacity:0.4;
text-fill:#000000;
}
</script>
<script>
var map, layer, layerItems,layerItemsContainer, infowin, featureInfoes,
host = window.isLocal ? window.server : "https://iserver.supermap.io",
url = host + "/iserver/services/map-china400/rest/maps/China";
init();
function init() {
if (!document.createElement('canvas').getContext) {
widgets.alert.showAlert(resources.msg_supportCanvas, false);
return;
}
layerItemsContainer = document.getElementsByClassName('layerItems')[0];
layerItems = document.getElementById('layerItems');
map = new SuperMap.Map("map", {
controls: [
new SuperMap.Control.ScaleLine(),
new SuperMap.Control.Zoom(),
new SuperMap.Control.MousePosition(),
new SuperMap.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
})]
});
var hightLightCartoCss = document.getElementById("textData").text;
layer = new SuperMap.Layer.TiledVectorLayer("China", url, {
cacheEnabled: true,
returnAttributes: true
}, {useLocalStorage: true, highLightCartoCss: hightLightCartoCss});
layer.events.on({"layerInitialized": addLayer});
map.events.on({
'click': function (evt) {
closeInfoWin();
layer.unHightlightFeatures();
featureInfoes = layer.getFeature(evt.xy.x, evt.xy.y);
console.log(featureInfoes);
if (featureInfoes && featureInfoes.length > 0) {
while (layerItems.firstChild) {
layerItems.removeChild(layerItems.firstChild);
}
layerItemsContainer.style.top = evt.clientY + 'px';
layerItemsContainer.style.left = evt.clientX + 'px';
for (var i = 0, len = featureInfoes.length; i < len; i++) {
var li = document.createElement('li');
li.innerHTML = featureInfoes[i].cartoLayer.layerName;
console.log(featureInfoes[i]);
li.setAttribute('data-index', i);
layerItems.appendChild(li);
if (i !== (len - 1)) {
li.style.borderBottom = '1px solid';
}
li.onclick = liClickHandle;
}
layerItemsContainer.style.display = 'block';
} else {
layerItemsContainer.style.display = 'none';
}
},
'rightclick': function () {
layerItemsContainer.style.display = 'none';
},
'move': function () {
layerItemsContainer.style.display = 'none';
}
});
}
function liClickHandle(evt) {
var evt = window.event || evt;
var target = evt.srcElement || evt.target;
evt.stopPropagation();
var index = +target.dataset.index;
layer.highlightFeatures(featureInfoes[index]);
var lonlat = map.getLonLatFromViewPortPx(featureInfoes.xy);
openPopup(featureInfoes[index].feature, lonlat);
layerItemsContainer.style.display = 'none';
}
function addLayer() {
map.addLayers([layer]);
var center = new SuperMap.LonLat(0, 0);
map.setCenter(center, 4);
}
//定义mouseClickHandler函数，触发click事件会调用此函数
function openPopup(feature, lonlat) {
var key = 'NAME';
var val = feature && feature.attributes && feature.attributes[key];
if (!val) {
key = 'SmID';
val = feature && feature.attributes && feature.attributes[key];
}
var contentHTML = "<div style='width:80px; font-size:12px;font-weight:bold ; opacity: 0.8'>";
contentHTML += key + "：" + val;
contentHTML += "</div>";
//初始化FramedCloud类
framedCloud = new SuperMap.Popup.FramedCloud(
"chicken",
lonlat,
null,
contentHTML,
null,
true,
null,
true
);
infowin = framedCloud;
map.addPopup(framedCloud);
}
function closeInfoWin() {
layer.unHightlightFeatures();
if (infowin) {
try {
infowin.hide();
infowin.destroy();
}
catch (e) {
}
}
}
</script>
</body>
</html>