ПЗ_Забарин (1220033), страница 12
Текст из файла (страница 12)
Код модуля отображения положения объекта на карте
map.js
ymaps.ready(init);
var db = $.couch.db(«mpt-neuralbase» );
db.openDoc(«e1be505f96b6cb8c2aad8f2cc1001192» , {
success: function(data){
for (var i in data. content){
if (data.content[i].id =='Adress'); adr= data.content[i].value;
function init() {
var myMap = new ymaps.Map('map', {
center: [55.753994, 37.622093],
zoom: 9
});
ymaps.geocode(adr, {
results: 1
}).then(function (res) {
var firstGeoObject = res.geoObjects.get(0),
coords = firstGeoObject.geometry.getCoordinates(),
bounds = firstGeoObject.properties.get('boundedBy');
myMap.geoObjects.add(firstGeoObject);
myMap.setBounds(bounds, {
checkZoomRange: true
});
}}
},
error: function () { alert («Oops!» ); }
});
map.html
<html>
<head>
<meta http-equiv=«Content-Type» content=«text/html; charset=utf-8» />
<!-- Если вы используете API локально, то в URL ресурса необходимо указывать протокол в стандартном виде (http://...)-->
<script src=«https://api-maps.yandex.ru/2.1/?lang=ru_RU» type=«text/javascript» ></script>
<script src=«https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js» ></script>
<script src=«js/jquery.couch.js» type=«text/javascript» ></script>
<script src=«map.js» type=«text/javascript» ></script>
<style type=«text/css» >
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id=«map» ></div>
</body>
</html>
ПРИЛОЖЕНИЕ Д
(рекомендуемое)
Код модуля визуализации графа
Graph.html
<!doctype html>
<html>
<head>
<meta http-equiv=«Content-Type» content=«text/html; charset=utf-8» >
<style type=«text/css» >
body, select {
font: 10pt sans;
}
#mynetwork {
position:relative;
width: 900px;
height: 600px;
border: 1px solid lightgray;
}
table.legend_table {
font-size: 11px;
border-width:1px;
border-color:#d3d3d3;
border-style:solid;
}
table.legend_table,td {
border-width:1px;
border-color:#d3d3d3;
border-style:solid;
padding: 2px;
}
div.table_content {
width:80px;
text-align:center;
}
div.table_description {
width:100px;
}
#operation {
font-size:28px;
}
#network-popUp {
display:none;
position:absolute;
top:350px;
left:170px;
z-index:299;
width:260px;
height:220px;
background-color: #f9f9f9;
border-style:solid;
border-width:5px;
border-color: #5394ed;
padding:8px;
text-align: center;
}
</style>
<script src=«https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js» ></script>
<script src=«js/jquery.couch.js» type=«text/javascript» ></script>
<script type=«text/javascript» src=«./dist/vis.js» ></script>
<link href=«./dist/vis.css» rel=«stylesheet» type=«text/css» />
<script type=«text/javascript» >
var clusterIndex = 0;
var clusters = [];
var lastClusterZoomLevel = 0;
var clusterFactor = 2.0;
var network = null;
var data = {
nodes: nodes,
edges: edges
};
var doc, db = $.couch.db(«mpt-neuralbase» );
db.openDoc(«b8c7aade1be505f33b6c8f2cc100379f» , {
success: function(doc){data= doc; },
error: function () { alert («Oops!» ); }
});
var seed = 2;
function destroy() {
if (network !== null) {
network.destroy();
network = null;
}
}
function draw() {
// destroy();
// nodes = [];
edges = [];
// create a network
var container = document.getElementById('mynetwork');
var options = {
locale: 'ru',
manipulation: {
addNode: function (data, callback) {
// filling in the popup DOM elements
document.getElementById('operation').innerHTML = «Добавить элемент » ;
document.getElementById('node-id').value = data.id;
document.getElementById('node-label').value = data.label;
document.getElementById('node-title').value = data.title;
document.getElementById('node-group').value = data.group;
document.getElementById('node-shape').value = data.shape;
document.getElementById('node-color').value = data.color;
document.getElementById('saveButton').onclick = saveData.bind(this, data, callback);
document.getElementById('cancelButton').onclick = clearPopUp.bind();
document.getElementById('network-popUp').style.display = 'block';
},
editNode: function (data, callback) {
// filling in the popup DOM elements
document.getElementById('operation').innerHTML = «Редактировать элемент » ;
document.getElementById('node-id').value = data.id;
document.getElementById('node-label').value = data.label;
document.getElementById('node-title').value = data.title;
document.getElementById('node-group').value = data.group;
document.getElementById('node-color').value = data.color;
document.getElementById('node-shape').value = data.shape;
document.getElementById('saveButton').onclick = saveData.bind(this, data, callback);
document.getElementById('cancelButton').onclick = cancelEdit.bind(this,callback);
document.getElementById('network-popUp').style.display = 'block';
},
addEdge: function (data, callback) {
if (data.from == data.to) {
var r = confirm(«Вы собираетесь создать петлю?» );
if (r == true) {
callback(data);
}
}
else {
callback(data);
}
}
}
};
network = new vis.Network(container, data, options);
// set the first initial zoom level
network.once('initRedraw', function() {
if (lastClusterZoomLevel === 0) {
lastClusterZoomLevel = network.getScale();
}
});
// we use the zoom event for our clustering
network.on('zoom', function (params) {
if (params.direction == '-') {
if (params.scale < lastClusterZoomLevel*clusterFactor) {
makeClusters(params.scale);
lastClusterZoomLevel = params.scale;
}
}
else {
openClusters(params.scale);
}
});
// if we click on a node, we want to open it up!
network.on(«selectNode» , function (params) {
if (params.nodes.length == 1) {
if (network.isCluster(params.nodes[0]) == true) {
network.openCluster(params.nodes[0])
}
}
});
// make the clusters
function makeClusters(scale) {
var clusterOptionsByData = {
processProperties: function (clusterOptions, childNodes) {
clusterIndex = clusterIndex + 1;
var childrenCount = 0;
for (var i = 0; i < childNodes.length; i++) {
childrenCount += childNodes[i].childrenCount || 1;
}
clusterOptions.childrenCount = childrenCount;
clusterOptions.label = «# « + childNodes[0].label + ««;
clusterOptions.font = {size: 15}
clusterOptions.id = 'cluster:' + clusterIndex;
clusters.push({id:'cluster:' + clusterIndex, scale:scale});
return clusterOptions;
},
clusterNodeProperties: {borderWidth: 3, shape: 'eclipce', font: {size: 30}}
}
network.clusterOutliers(clusterOptionsByData);
if (document.getElementById('stabilizeCheckbox').checked === true) {
// since we use the scale as a unique identifier, we do NOT want to fit after the stabilization
network.setOptions({physics:{stabilization:{fit: false}}});
network.stabilize();
}
}
// open them back up!
function openClusters(scale) {
var newClusters = [];
var declustered = false;
for (var i = 0; i < clusters.length; i++) {
if (clusters[i].scale < scale) {
network.openCluster(clusters[i].id);
lastClusterZoomLevel = scale;
declustered = true;
}
else {
newClusters.push(clusters[i])
}
}
clusters = newClusters;
if (declustered === true && document.getElementById('stabilizeCheckbox').checked === true) {
// since we use the scale as a unique identifier, we do NOT want to fit after the stabilization
network.setOptions({physics:{stabilization:{fit: false}}});
network.stabilize();
}
}
}
function clearPopUp() {
document.getElementById('saveButton').onclick = null;
document.getElementById('cancelButton').onclick = null;
document.getElementById('network-popUp').style.display = 'none';
}
function cancelEdit(callback) {
clearPopUp();
callback(null);
}
function saveData(data,callback) {
data.id = document.getElementById('node-id').value;
data.label = document.getElementById('node-label').value;
data.title = document.getElementById('node-title').value;
data.group = document.getElementById('node-group').value;
data.color = document.getElementById('node-color').value;
data.shape = document.getElementById('node-shape').value;
clearPopUp();
callback(data);
}
</script>
<script src=«../../googleAnalytics.js» ></script>
</head>
<body onload=«draw(); » >
<h2>Редактор графовой модели</h2>
<p style=«width: 700px; font-size:14px; text-align: justify; » >
</p>
<div id=«network-popUp» >
<span id=«operation» >node</span> <br>
<table style=«margin:auto; » ><tr>
<td>id</td><td><input id=«node-id» value=«new value» /></td>
</tr>
<tr>
<td>Название</td><td><input id=«node-label» value=«new value» /></td>
</tr>
<tr>
<td>Подсказка</td><td><input id=«node-title» value=«new value» ></td>
</tr>
<tr>
<td>Группа</td> <td><input id=«node-group» value=«new value» ></td>
</tr>
<tr>
<select title=«Цвет » id=«node-color» >
<option>#B3D1FC</option>
<option >#cfd8e6</option>
<option>#3876c2</option>
<option>#d3d3d3</option>
<option>black</option>
<option>gray</option>
</select>
</tr>
<tr>
<select name=«Форма » id=«node-shape» >
<option>ellipse</option>
<option >database</option>
<option>box</option>
<option>dot</option>
<option>diamond</option>
</select>
</tr>
</table>
<input type=«button» value=«Сохранить » id=«saveButton» />
<input type=«button» value=«Отмена » id=«cancelButton» />
</div>
<br />
<div id=«mynetwork» ></div>
Ы
</body>
</html>
ПРИЛОЖЕНИЕ Ж
(рекомендуемое)
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
