The water conservancy one map platform is the basic work base plate, unified resource view and natural data connector of water conservancy big data. It helps the water conservancy department to display rich data resources, which is conducive to all units and departments to find, see, explore and apply data.
1. Firstly, the platform carries out hierarchical planning for water conservancy spatial data and service resources to ensure the aggregation, processing, storage, management, service and update of water conservancy geographic information, so as to create a holographic "water space"
2. Secondly, build a water conservancy one map platform, focus on publishing water special services, data services, basic function services and professional model services, provide a unified two-dimensional and three-dimensional integrated resource portal for multi organizations, and provide data query, information display, resource self-service and rapid customized applications. Realize thorough perception, comprehensive interconnection, in-depth integration, wide sharing and intelligent application of smart water.
data service
1. Data classification
Data services are classified according to the standard classification and subject of data, so as to filter and display data.
Standard classification directory, including: intelligent map, 3D scene, vector data service, element service, image service, 3D data service, OGC standard service, temporal data service and other services.
Thematic classification catalogue, including flood control and drought relief, water resources management, water environment management, water and soil conservation, reservoir resettlement and farmland water conservancy.
2. Data search
Support the search of data services through keywords. The search results include the thumbnail, name, description, author, date and other information of each data service, and support the pagination display of search results. The display method supports tile or list.
3. Details display
It supports the display of detailed information of each data service, including thumbnail, name, description, type, author, modification time, etc. It provides an entry to open data services, which can be edited, deleted and shared by administrators.
Platform architecture design based on SOA
1.SOA is an application architecture based on open Internet standards and protocols, which supports the description, release, discovery and use of applications or application components.
2.SOA supports the integration of reusable data and applications as services or functions, and these services or functions can be accessed through the network when needed.
3. This network can be completely included in the internal LAN of the platform or based on the special network of water conservancy e-government.
4. Through SOA, developers can combine different services or functions to complete a series of business logic and presentation, and finally allow users to call services or functions and other resources as easily as using local business components.
The platform assembles these services into on-demand applications according to needs, that is, a collection of interconnected service providers and consumers, which are combined with each other to complete specific tasks, so that the application business can adapt to changing situations and needs.
5. These services are self-contained and have well-defined interfaces, allowing users of these services to understand how to interact with them.
6. From a technical point of view, SOA brings "loosely coupled" application components, in which, The code is not necessarily bound to a specific database (or even to a specific infrastructure). Thanks to this loose coupling feature, services can be combined into various applications. This also greatly improves the code reuse rate and reduces the workload while adding functions. WEB services are the first choice to implement SOA framework at present.
7.Web Service is a collection of technologies that are most suitable for realizing SOA at present. In fact, the SOA architecture model has been gradually accepted by the industry since it was proposed, mainly due to the maturity of Web Service standards and the popularization of applications, which provides the basis for the wide implementation of SOA Architecture. Various protocols in Web services will meet the needs of SOA architecture.
8. The water conservancy spatial information resource integration and sharing platform will be designed based on the SOA architecture.
<!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">Select the feature you want to highlight:
<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);
}
//Define the mouseClickHandler function, which will be called when the click event is triggered
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>";
//Initialize FramedCloud class
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>