разный стиль для разных портов на векторной карте

Привет, ребята, это мой код JavaScript, чтобы сделать маркер IP для векторной карты, чтобы показать онлайн IP..

все ips имеют 3 разных порта, например: ip1:1020 или ip2:5050 или ip3:6969

формат для моих ips, который я могу прочитать из файла ip.txt, например:

{"relays":[{
"or_addresses":["2.176.82.122:1020"],"latitude":35.6961059570313,"longitude":51.423095703125},
{"or_addresses":["2.177.37.250:5050"],"latitude":35.6961059570313,"longitude":51.423095703125},
{"or_addresses":["2.178.57.250:6969"],"latitude":35.6961059570313,"longitude":51.423095703125},
{"or_addresses":["2.18.5.20:5050"],"latitude":35.6961059570313,"longitude":51.423095703125},
{"or_addresses":["2.78.7.25:1020"],"latitude":35.6961059570313,"longitude":51.423095703125}
]}

и это мой основной скрипт

<script>
$(document).ready(function(){
$('#worldmap').vectorMap({
map: 'world_mill_en',
scaleColors: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
hoverOpacity: 0.7,
hoverColor: false,
markerStyle: {
  initial: {
    fill: '#cc6600',
    stroke: '#222222',
    r: 2
  }
},
backgroundColor: '#CCC',
markers: [
]
});

map = $('#worldmap').vectorMap('get', 'mapObject');
$.getJSON('http://127.0.0.1/bantools/ip/ip.txt', function(data){
$.each(data.relays, function(idx, relay)
    {
        map.addMarker(relay.or_addresses[0], {'latLng' : [relay.latitude, relay.longitude], "name" : relay.or_addresses[0]});
    });
});
});
</script>

мой вопрос в том, как я могу сделать разные стили для разных ПОРТОВ ????! я имею в виду, что хочу использовать этот стиль для порта = 1020:

markerStyle: {
  initial: {
    fill: '#cc6600',
    stroke: '#222222',
    r: 2
  }
}

и для порта = 5050 я хочу использовать этот стиль:

markerStyle: {
  initial: {
    fill: '#aaa',
    stroke: '#bbb',
    r: 2
  }
}

и для другого порта...


javascript jvectormap
person MaxDome    schedule 02.08.2015    source источник
comment
возможный дубликат различные цветные маркеры с JvectorMaps   -  person rafaelcastrocouto    schedule 02.08.2015

Ответы (2)


arrow_upward
2
arrow_downward

http://jsbin.com/womoqa/edit?js,output

$(function(){
  $('#world-map-markers').vectorMap({
    map: 'world_mill_en',
    scaleColors: ['#C8EEFF', '#0071A4'],
    normalizeFunction: 'polynomial',
    hoverOpacity: 0.7,
    hoverColor: false,
    backgroundColor: '#383f47',
    markers: [
      {latLng: [41.90, 12.45], name: 'Vatican City', 
       style: {
         fill: '#cc6600',
         stroke: '#222222',
         r: 5
       }},
      {latLng: [17.11, -61.85], name: 'Antigua and Barbuda',
       style: {
         fill: '#ff0000',
         stroke: '#222222',
         r: 8
       }},
      {latLng: [0.33, 6.73], name: 'São Tomé and Príncipe',
       style:{
        fill: '#F8E23B',
        stroke: '#383f47'
      }}
    ]
  });
});
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>  
    <script src="http://jvectormap.com/js/jquery-jvectormap-2.0.2.min.js"></script>
    <script src="http://jvectormap.com/js/jquery-jvectormap-world-mill-en.js"></script>
    <link rel="stylesheet" href="http://jvectormap.com/css/jquery-jvectormap-2.0.2.css">
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <div id="world-map-markers" style="width: 720px; height: 400px"></div>
  </body>
</html>

person rafaelcastrocouto    schedule 02.08.2015
comment
хорошо, но как я могу использовать для другого порта? как я могу обнаружить другой порт в js? пожалуйста, вы можете сделать пример для моего вопроса? - person MaxDome; 03.08.2015
comment
это более длинная тема ... 1-й вы должны получить доступ к содержимому файла ... вы можете сделать эту клиентскую сторону с помощью <input type="file"> или обслужить ее и использовать XMLHTTPRequest от клиента ... 2-й с содержимым файла в виде строки, которую вы можете использовать JSON, чтобы проанализировать его как объект... 3-й, затем вы можете использовать несколько if или switch .. case для правильного заполнения массива, который вы можете сохранить в переменной, а затем использовать в качестве массива маркеров. - person rafaelcastrocouto; 04.08.2015

arrow_upward
0
arrow_downward

Я думаю, чтобы установить начальный стиль маркера, вам нужно будет просмотреть все данные и построить шкалу (группировку), которая затем используется jvectormap для получения значений для маркера.

Ваш скрипт для получения данных json выглядит хорошо, поэтому вы сначала показываете карту, а затем ставите над ними маркеры. Я думаю, что это хороший подход, и в вашем скрипте просто отсутствует простая функция для подготовки стиля маркеров, если я не ошибаюсь.

Я немного изменил ваши данные, потому что все координаты указывают на одно и то же место, а маркеры перекрываются. Было бы также полезно, если бы вы объяснили, с чем вам приходится иметь дело.

Это простая функция для получения стилей маркеров, она похожа на скучный переключатель:

function getMarkerStyle(port) {
    var styles = {'1020': {fill: '#cc6600', stroke: '#222222',r: 2},
                  '5050': {fill: '#aaa',stroke: '#bbb',r: 2}};
    var unknown = {fill: '#F00',stroke: '#000',r: 2};
    return styles[port] || unknown;
}

Это должно быть внутри вашей функции обратного вызова getJSON, вместо $.each я использую здесь классический цикл for:

for (var i = 0, l = logFile.relays.length; i < l; i++) {
    var port = logFile.relays[i].or_addresses[0].split(':')[1];
    var id = logFile.relays[i].or_addresses[0].split(':')[0];
    var coords = [logFile.relays[i].latitude, logFile.relays[i].longitude];
    var name = id;
    var style = getMarkerStyle(port);
    mapObj.addMarker(id, {latLng: coords, name: name, style: style}, null);
}

Вам просто нужно поместить стиль во второй параметр функции addMarker.

Протестировано с jvectormap-2.0.2

person deblocker    schedule 04.08.2015