Как создать анимированный маркер в jVectorMap - PullRequest
Новая
       38

Как создать анимированный маркер в jVectorMap

1 голос
/ 12 февраля 2020

Я хочу создать анимированный маркер на карте Jvector, я хочу использовать этот Bootstrap Растущий спиннер с разными цветами в качестве создателей, как мне это сделать.

Код карты моего Jvector: 

jQuery.noConflict();
jQuery(function(){
  var $ = jQuery;
  $('#map').vectorMap({
    map: 'world_mill_en',
    panOnDrag: true,
    focusOn: {
      x: 0.5,
      y: 0.5,
      scale: 1,
      animate: true
    },
    series: {
      regions: [{
        scale: ['#C8EEFF', '#0071A4'],
        normalizeFunction: 'polynomial',
      }]
    },
    markerStyle: {
  initial: {
    fill: '#F8E23B',
  },
  hover: {
    stroke: '#4d53c9',
    "stroke-width": 2,
    cursor: 'pointer'
  },
  selected: {
    fill: 'blue !importanr'
  },

},

     backgroundColor: '#13acbf',
    markers: [
  {latLng: [41.90, 12.45], name: 'Location: Vatican City'},
  {latLng: [43.73, 7.41], name: ' Location: Monaco'},
  {latLng: [44.73, 7.42], name: ' Location: Monaco', style:{fill:'#ff1100'}},
  {latLng: [12.9716, 77.5946], name: 'Location: Bengaluru', style: {fill: '#258210'}},
  ]
  });
})

Я пробовал многие, добавив css, но это не сработало.

1 Ответ

1 голос
/ 13 февраля 2020

Я хотел делать это годами, но у меня никогда не было времени.

DEMO # 1: 

$(document).ready(function() {

  var animatedIcon = '<svg width="40" height="40" viewbox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" fill="none" r="4" stroke="currentColor" stroke-width="3"><animate attributeName="stroke-width" from="3" to="0" dur="1.5s" begin="0s" repeatCount="indefinite"/> <animate attributeName="r" from="8" to="20" dur="1.5s" begin="0s" repeatCount="indefinite"/><animate attributeName="opacity" from="1" to="0" dur="1.5s" begin="0s" repeatCount="indefinite"/></circle></svg>',
      values = ["0"],
      locations = [{latLng: [35.45582, 139.68187], name: 'Diamond Princess'}];

  function addAniMarkers(map, locations, values) {
    var svg = $(animatedIcon)[0],
        circle = svg.firstChild,
        mapObj = $(map).vectorMap('get', 'mapObject'),
        svgRoot = mapObj.canvas.node,
        g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    mapObj.aniMarkers = [];
    for(var i=0, l=locations.length; i<l; i++) {
      var marker = locations[i],
          clone = circle.cloneNode(true);
      mapObj.addMarker(i, marker, []);
      mapObj.aniMarkers.push(clone);
      g.appendChild(clone);
    }
    svgRoot.appendChild(g);
    mapObj.series.markers[0].setValues(values); 
    $(mapObj.container).trigger("viewportChange");
  }

  function repositionAniMarkers(map) {
    var mapObj = $(map).vectorMap('get', 'mapObject'),
        markers = mapObj.markers,
        aniMarkers = mapObj.aniMarkers;
    for (var i in markers) {
      var point = mapObj.getMarkerPosition(markers[i].config),
          el = markers[i].element,
          cx = el.shape.node.getAttribute("cx"),
          cy = el.shape.node.getAttribute("cy"),
          clone = aniMarkers[i];
      clone.setAttribute("cx", cx);
      clone.setAttribute("cy", cy);
    }
  }

  $("#map").vectorMap({
    map: "world_mill_en",
    backgroundColor: "aliceblue",
    zoomOnScroll: true,
    regionStyle: {initial: {fill: "lightgrey"}},
    markerStyle: {initial: {fill: '#F8E23B', stroke: '#383f47'}},
    markers: [],
    series: {
        markers: [{
            attribute: 'fill',
            scale: {
                '0': '#ff0000'
            },
            values: [],
            }]
    },
    onViewportChange: function(event, scaleFactor) {
      repositionAniMarkers("#map");
    }
  });

  addAniMarkers("#map", locations, values);

});
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
</head>

<body>
  <div id="map" style="width: 600px; height: 400px"></div>
</body>

</html>

Объяснение:

Вам нужно взять анимированный значок SVG и клонировать содержимое в ту же позицию, что и маркеры карты. После этого вы можете использовать опцию jVectorMap fill для маркеров. Вот и все.

DEMO # 2: 

$(document).ready(function() {

  var markerIcon = '<svg width="40" height="40" viewbox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" fill="none" r="10" stroke="#000000" stroke-width="2"><animate attributeName="r" from="8" to="20" dur="1.5s" begin="0s" repeatCount="indefinite"/><animate attributeName="opacity" from="1" to="0" dur="1.5s" begin="0s" repeatCount="indefinite"/></circle><circle cx="20" cy="20" fill="pointColor" stroke="#000000" stroke-width="1" r="6"/></svg>';

  function imgFromSVG(svg, pointColor) {
    var newSVG = svg.replace(/pointColor/gi, pointColor);
    return 'data:image/svg+xml;charset=UTF-8,' + escape(newSVG);
  }

  $("#map").vectorMap({
    map: "world_mill_en",
    backgroundColor: "aliceblue",
    zoomOnScroll: true,
    regionStyle: {initial: {fill: "lightgrey"}},
    markerStyle: {initial: {fill: '#F8E23B', stroke: '#383f47'}},
    markers: [{latLng: [35.45582, 139.68187], name: 'Diamond Princess'}],
    series: {
      markers: [{
        attribute: 'image',
        scale: {
          '0': imgFromSVG(markerIcon, '#ff0000')
        },
        values: ['0'],
      }]
    }
  });

});
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
</head>

<body>
  <div id="map" style="width: 600px; height: 400px"></div>
</body>

</html>

Объяснение:

Вам нужно взять анимированный значок SVG и использовать изображение jVectorMap опция для маркеров. Таким образом, вы можете настроить атрибуты svg в соответствии со значениями вашей шкалы.

Кстати, благодаря bjornd за отличный jVectorMap.
...