0

tengo un problema con el siguiente codigo, ya que no puedo cambiar los puntos que aparecen por iconos e insertale el evento clic como para que me salga un mensaje. Si alguien me puede ayudar aunque sea a cambiar los puntos por iconos se los agradecería porque sinceramente me está costando mucho.

<script type="text/javascript">
var latitud = <?php echo $lati;?>;
var longitud = <?php echo $longi;?>;
var coord= "<?php echo $coord;?>";			
var coord_arr=coord.split('*');
var iconoParada = new Array(coord_arr.legth); 	

var iconFeature = new ol.Feature({});

var iconStyle = new ol.style.Style({});

var vectorSource = new ol.source.Vector({
  features: [iconFeature]
});

var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

var layer = new ol.layer.Vector({ /*layer con los poligonos*/
  source: new ol.source.Vector()
})

function crearMarcadores(centroPoligono, CentroCosto) {

  var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(centroPoligono),
    name: CentroCosto
  });

  vectorSource.addFeature(iconFeature);

  iconFeature.setStyle(iconStyle);

  //------------start creation popup
  var div = document.createElement('div');
  div.setAttribute("id", CentroCosto);
  document.body.appendChild(div);

  var element = document.getElementById(CentroCosto);
  var popup = new ol.Overlay({
    element: element,
    positioning: 'bottom-center',
    stopEvent: false
  });
  map.addOverlay(popup);

  //------------end creation popup

  // --------------display popup on click
  map.on('click', function(evt) {
    //console.log("Click");
    var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature, layer) {
        return feature;
      });

    //console.log("name:");
    var tag = feature.get('name');
    var indice = tag.indexOf("-");
    var substring = tag.substring(0, indice);
    $('.agregar').tagsinput('add', substring);

    //console.log(feature.get('name'));
    if (feature.get('name') == CentroCosto) {
      var geometry = feature.getGeometry();
      var coord = geometry.getCoordinates();
      popup.setPosition(coord);
      $(element).popover({
        'placement': 'top',
        'html': true,
        'content': feature.get('name')
      });
      $(element).popover('show');
    } else {
      $(element).popover('destroy');
    }
  });
  //---------------end display popup on click
} //termina funcion crearMarcadores


function crearPoligonos(coordenada, cc) {

  iconStyle = new ol.style.Style({
    image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      opacity: 0.75,
      src: 'img/parabus2.png'
    })),
    text: new ol.style.Text({
      text: cc,
      fill: new ol.style.Fill({
        color: 'white'
      }),
      stroke: new ol.style.Stroke({
        color: 'black',
        width: 1
      }),
      offsetX: -30,
      offsetY: 30
    })
  });
  iconFeature.setStyle(iconStyle);

 var coordenadas = coordenada.split(' ') // Separamos por espacio
    .map(function(data) {
      var info = data.split(','), // Separamos por coma
        coord = { // Creamos el obj de coordenada
          lat: parseFloat(info[1]),
          lng: parseFloat(info[0])
        };
      return coord;
    });
  console.log(coordenada);
  //var parserJSTS = new jsts.io.OL3Parser();

  var poly = new ol.Feature({
    geometry: new ol.geom.Polygon([coordenadas.map(function(_ref) {
      var lng = _ref.lng,
        lat = _ref.lat;
      return [lng, lat];
    })])
  });

  var boundingBox = poly.getGeometry().getExtent()
  
  layer.getSource().addFeature(poly)

  var centro = ol.extent.getCenter(boundingBox);
  console.log("Centro:");
  console.log(centro);
  console.log(cc);
  crearMarcadores(centro, cc);

}

function errores(msg) {
  alert('Error: ' + msg.responseText);
}
//------------start creation map
var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM({
        key: 'AudCyoI6al0eAZmQhwmI1IG9AOdGH8DHHk6PsiGta1faEACulxawFU9KV-XAvZ8f',
        imagerySet: 'AerialWithLabels'
      })
    }),
    layer, vectorLayer
  ],
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions: ({
      collapsible: false
    })
  }),
  view: new ol.View({
    center: [longitud, latitud],
    zoom: 14,
    projection: 'EPSG:4326'
  })
});
// --------------end creation map

//generar mapas-------------------------------
function generarMapas() {

	for (var i=0;i<coord_arr.length;i++){
		var data=coord_arr[i].split(',');
		var nombre_parada= data[0];
		var longi_parada= parseFloat(data[1]);
		var lati_parada= parseFloat(data[2]);
		    crearPoligonos(longi_parada+','+latiparada, nombre_parada);
		    alert(crearPoligonos);
		    
	 }

	
  /*coordenadas1 = '-90.833910,13.994037 -90.833918,13.994095 -90.833924,13.994152 -90.833930,13.994207 -90.833936,13.994263 -90.833943,13.994322 -90.833951,13.994382 -90.833959,13.994440 -90.833965,13.994494 -90.833971,13.994548 -90.833978,13.994608 -90.833984,13.994671 -90.833993,13.994741 -90.834001,13.994811 -90.834010,13.994877 -90.834019,13.994940 -90.834028,13.995003 -90.834036,13.995060 -90.834044,13.995110 -90.834052,13.995162 -90.834061,13.995222 -90.834067,13.995281 -90.834074,13.995336 -90.834080,13.995390 -90.834086,13.995442 -90.834092,13.995495 -90.834100,13.995553 -90.834105,13.995610 -90.834110,13.995665 -90.834116,13.995718 -90.834122,13.995769 -90.834127,13.995820 -90.834134,13.995871 -90.834141,13.995924 -90.834146,13.995974 -90.834149,13.996008 -90.834192,13.996161 -90.834732,13.996091 -90.835519,13.995989 -90.836038,13.995931 -90.836696,13.995846 -90.836677,13.995819 -90.836660,13.995674 -90.836610,13.995123 -90.836480,13.994146 -90.836461,13.994126 -90.836370,13.994036 -90.836287,13.994044 -90.836194,13.994035 -90.836012,13.993789 -90.836003,13.993753 -90.835995,13.993581 -90.836245,13.993529 -90.836375,13.993521 -90.836386,13.993516 -90.836394,13.993512 -90.836394,13.993503 -90.836395,13.993404 -90.836309,13.992635 -90.836266,13.992318 -90.836207,13.991926 -90.836192,13.991927 -90.836170,13.991932 -90.836125,13.991938 -90.836074,13.991943 -90.836010,13.991951 -90.835936,13.991961 -90.835862,13.991968 -90.835791,13.991976 -90.835722,13.991980 -90.835658,13.991985 -90.835597,13.991994 -90.835533,13.992003 -90.835471,13.992011 -90.835408,13.992018 -90.835346,13.992025 -90.835285,13.992033 -90.835228,13.992040 -90.835173,13.992045 -90.835118,13.992051 -90.835062,13.992057 -90.835002,13.992063 -90.834936,13.992071 -90.834868,13.992078 -90.834800,13.992086 -90.834733,13.992094 -90.834663,13.992102 -90.834588,13.992111 -90.834523,13.992120 -90.834474,13.992123 -90.834421,13.992129 -90.834361,13.992133 -90.834298,13.992140 -90.834229,13.992149 -90.834160,13.992161 -90.834092,13.992171 -90.834022,13.992180 -90.833954,13.992185 -90.833889,13.992191 -90.833824,13.992198 -90.833761,13.992205 -90.833709,13.992212 -90.833680,13.992216 -90.833683,13.992242 -90.833693,13.992300 -90.833704,13.992370 -90.833712,13.992445 -90.833720,13.992518 -90.833727,13.992591 -90.833736,13.992661 -90.833745,13.992730 -90.833755,13.992795 -90.833764,13.992855 -90.833772,13.992913 -90.833779,13.992971 -90.833786,13.993033 -90.833792,13.993092 -90.833799,13.993149 -90.833807,13.993202 -90.833815,13.993251 -90.833823,13.993302 -90.833830,13.993358 -90.833837,13.993410 -90.833843,13.993462 -90.833849,13.993518 -90.833857,13.993579 -90.833864,13.993641 -90.833870,13.993700 -90.833876,13.993760 -90.833881,13.993817 -90.833887,13.993871 -90.833894,13.993927 -90.833902,13.993982 -90.833910,13.994037';

  coordenadas2 = '-90.833434,13.990260 -90.833444,13.990321 -90.833452,13.990383 -90.833461,13.990446 -90.833470,13.990509 -90.833479,13.990572 -90.833486,13.990635 -90.833494,13.990697 -90.833501,13.990760 -90.833510,13.990823 -90.833520,13.990886 -90.833530,13.990948 -90.833538,13.991006 -90.833545,13.991061 -90.833552,13.991112 -90.833557,13.991165 -90.833561,13.991220 -90.833567,13.991282 -90.833572,13.991348 -90.833580,13.991414 -90.833587,13.991476 -90.833593,13.991536 -90.833601,13.991597 -90.833608,13.991662 -90.833617,13.991727 -90.833627,13.991790 -90.833633,13.991853 -90.833640,13.991914 -90.833648,13.991972 -90.833654,13.992029 -90.833661,13.992086 -90.833668,13.992140 -90.833673,13.992172 -90.833702,13.992167 -90.833755,13.992160 -90.833819,13.992153 -90.833884,13.992146 -90.833950,13.992140 -90.834017,13.992135 -90.834085,13.992127 -90.834153,13.992116 -90.834222,13.992105 -90.834292,13.992095 -90.834356,13.992088 -90.834417,13.992084 -90.834470,13.992078 -90.834518,13.992075 -90.834582,13.992066 -90.834658,13.992058 -90.834727,13.992049 -90.834795,13.992041 -90.834863,13.992034 -90.834931,13.992027 -90.834996,13.992018 -90.835057,13.992012 -90.835114,13.992006 -90.835168,13.992000 -90.835223,13.991995 -90.835280,13.991988 -90.835340,13.991981 -90.835403,13.991973 -90.835465,13.991966 -90.835527,13.991958 -90.835590,13.991949 -90.835653,13.991940 -90.835718,13.991935 -90.835787,13.991931 -90.835857,13.991923 -90.835930,13.991916 -90.836003,13.991906 -90.836068,13.991898 -90.836120,13.991893 -90.836162,13.991887 -90.836187,13.991882 -90.836204,13.991875 -90.836197,13.991794 -90.836145,13.991395 -90.836119,13.991187 -90.836033,13.990464 -90.835948,13.989722 -90.835879,13.989197 -90.835811,13.988582 -90.835741,13.988067 -90.835732,13.988048 -90.835714,13.988048 -90.835371,13.988126 -90.834888,13.988240 -90.834481,13.988308 -90.834036,13.988350 -90.833573,13.988409 -90.833208,13.988448 -90.833210,13.988464 -90.833219,13.988531 -90.833229,13.988598 -90.833236,13.988664 -90.833244,13.988729 -90.833251,13.988790 -90.833258,13.988849 -90.833264,13.988906 -90.833270,13.988964 -90.833278,13.989023 -90.833288,13.989081 -90.833295,13.989133 -90.833301,13.989185 -90.833307,13.989231 -90.833315,13.989282 -90.833321,13.989336 -90.833327,13.989388 -90.833332,13.989440 -90.833339,13.989494 -90.833348,13.989551 -90.833354,13.989613 -90.833361,13.989674 -90.833369,13.989737 -90.833378,13.989800 -90.833386,13.989863 -90.833393,13.989926 -90.833399,13.989988 -90.833408,13.990049 -90.833415,13.990102 -90.833422,13.990155 -90.833427,13.990208 -90.833429,13.990227 -90.833432,13.990221 -90.833439,13.990218 -90.833445,13.990221 -90.833448,13.990227 -90.833445,13.990233 -90.833440,13.990236 -90.833433,13.990235 -90.833430,13.990230 -90.833434,13.990260';

  coordenadas3 = '-90.832897,13.988475 -90.832609,13.988518 -90.832313,13.988560 -90.831989,13.988602 -90.831516,13.988661 -90.831053,13.988720 -90.830599,13.988780 -90.830545,13.988793 -90.830547,13.988811 -90.830552,13.988849 -90.830557,13.988886 -90.830563,13.988926 -90.830569,13.988968 -90.830575,13.989010 -90.830582,13.989052 -90.830588,13.989092 -90.830593,13.989132 -90.830598,13.989173 -90.830605,13.989216 -90.830610,13.989257 -90.830616,13.989298 -90.830622,13.989341 -90.830628,13.989385 -90.830634,13.989431 -90.830640,13.989474 -90.830646,13.989517 -90.830654,13.989561 -90.830662,13.989607 -90.830670,13.989651 -90.830677,13.989692 -90.830684,13.989732 -90.830691,13.989774 -90.830697,13.989819 -90.830703,13.989863 -90.830709,13.989903 -90.830715,13.989945 -90.830722,13.989989 -90.830727,13.990031 -90.830733,13.990072 -90.830739,13.990113 -90.830745,13.990153 -90.830752,13.990194 -90.830758,13.990233 -90.830762,13.990268 -90.830767,13.990308 -90.830774,13.990356 -90.830779,13.990398 -90.830783,13.990436 -90.830787,13.990475 -90.830789,13.990515 -90.830793,13.990559 -90.830797,13.990600 -90.830802,13.990639 -90.830807,13.990680 -90.830813,13.990723 -90.830820,13.990768 -90.830826,13.990818 -90.830832,13.990868 -90.830839,13.990921 -90.830846,13.990976 -90.830853,13.991032 -90.830862,13.991089 -90.830869,13.991147 -90.830878,13.991208 -90.830883,13.991271 -90.830890,13.991334 -90.830901,13.991393 -90.830912,13.991453 -90.830920,13.991509 -90.830927,13.991560 -90.830937,13.991615 -90.830947,13.991684 -90.830957,13.991751 -90.830965,13.991806 -90.830970,13.991852 -90.830978,13.991898 -90.830987,13.991951 -90.830995,13.992004 -90.831004,13.992060 -90.831012,13.992112 -90.831019,13.992163 -90.831029,13.992218 -90.831039,13.992278 -90.831048,13.992334 -90.831055,13.992389 -90.831062,13.992444 -90.831069,13.992497 -90.831069,13.992500 -90.831099,13.992493 -90.831143,13.992483 -90.831190,13.992476 -90.831240,13.992471 -90.831285,13.992467 -90.831330,13.992463 -90.831381,13.992456 -90.831435,13.992449 -90.831488,13.992444 -90.831540,13.992437 -90.831594,13.992430 -90.831649,13.992424 -90.831703,13.992419 -90.831757,13.992414 -90.831811,13.992407 -90.831866,13.992400 -90.831919,13.992394 -90.831974,13.992387 -90.832032,13.992383 -90.832090,13.992379 -90.832146,13.992371 -90.832204,13.992362 -90.832274,13.992351 -90.832348,13.992340 -90.832412,13.992331 -90.832469,13.992325 -90.832522,13.992320 -90.832583,13.992314 -90.832647,13.992303 -90.832713,13.992295 -90.832779,13.992289 -90.832840,13.992283 -90.832901,13.992278 -90.832964,13.992270 -90.833029,13.992263 -90.833090,13.992253 -90.833153,13.992247 -90.833212,13.992241 -90.833260,13.992236 -90.833306,13.992230 -90.833360,13.992222 -90.833413,13.992215 -90.833461,13.992207 -90.833516,13.992196 -90.833569,13.992187 -90.833617,13.992180 -90.833627,13.992178 -90.833622,13.992147 -90.833615,13.992092 -90.833608,13.992034 -90.833602,13.991977 -90.833594,13.991919 -90.833587,13.991858 -90.833581,13.991796 -90.833571,13.991733 -90.833563,13.991667 -90.833555,13.991603 -90.833547,13.991541 -90.833541,13.991481 -90.833534,13.991419 -90.833526,13.991353 -90.833521,13.991285 -90.833515,13.991224 -90.833511,13.991169 -90.833506,13.991117 -90.833499,13.991066 -90.833492,13.991012 -90.833484,13.990955 -90.833474,13.990893 -90.833464,13.990830 -90.833455,13.990765 -90.833448,13.990702 -90.833440,13.990640 -90.833433,13.990578 -90.833424,13.990515 -90.833415,13.990452 -90.833406,13.990389 -90.833398,13.990328 -90.833388,13.990267 -90.833381,13.990213 -90.833375,13.990160 -90.833370,13.990108 -90.833362,13.990055 -90.833353,13.989994 -90.833347,13.989931 -90.833340,13.989868 -90.833332,13.989806 -90.833323,13.989743 -90.833315,13.989680 -90.833308,13.989618 -90.833302,13.989557 -90.833293,13.989500 -90.833286,13.989445 -90.833281,13.989393 -90.833275,13.989341 -90.833269,13.989288 -90.833261,13.989238 -90.833255,13.989190 -90.833249,13.989139 -90.833242,13.989087 -90.833233,13.989030 -90.833224,13.988969 -90.833218,13.988910 -90.833212,13.988854 -90.833205,13.988795 -90.833198,13.988734 -90.833191,13.988670 -90.833183,13.988604 -90.833173,13.988537 -90.833165,13.988471 -90.833162,13.988452 -90.832897,13.988475';

  coordenadas4 = '-90.833577,13.992231 -90.833525,13.992241 -90.833470,13.992251 -90.833420,13.992260 -90.833367,13.992267 -90.833312,13.992275 -90.833266,13.992280 -90.833217,13.992286 -90.833158,13.992291 -90.833097,13.992298 -90.833035,13.992308 -90.832970,13.992315 -90.832906,13.992323 -90.832845,13.992328 -90.832783,13.992334 -90.832718,13.992339 -90.832654,13.992348 -90.832589,13.992358 -90.832527,13.992365 -90.832473,13.992370 -90.832418,13.992376 -90.832355,13.992385 -90.832281,13.992396 -90.832212,13.992406 -90.832153,13.992416 -90.832114,13.992421 -90.832217,13.993235 -90.832124,13.993315 -90.831292,13.993421 -90.831303,13.993471 -90.831313,13.993521 -90.831325,13.993573 -90.831338,13.993629 -90.831352,13.993686 -90.831365,13.993742 -90.831378,13.993797 -90.831393,13.993854 -90.831407,13.993911 -90.831420,13.993966 -90.831435,13.994022 -90.831451,13.994080 -90.831464,13.994137 -90.831477,13.994193 -90.831491,13.994249 -90.831506,13.994307 -90.831521,13.994366 -90.831534,13.994425 -90.831547,13.994481 -90.831558,13.994534 -90.831571,13.994588 -90.831585,13.994644 -90.831598,13.994700 -90.831611,13.994752 -90.831623,13.994804 -90.831635,13.994856 -90.831647,13.994905 -90.831659,13.994953 -90.831671,13.995002 -90.831683,13.995053 -90.831695,13.995105 -90.831707,13.995159 -90.831718,13.995212 -90.831730,13.995261 -90.831742,13.995311 -90.831751,13.995360 -90.831760,13.995409 -90.831769,13.995459 -90.831783,13.995508 -90.831796,13.995557 -90.831808,13.995607 -90.831819,13.995655 -90.831829,13.995700 -90.831839,13.995746 -90.831851,13.995798 -90.831865,13.995852 -90.831880,13.995907 -90.831895,13.995960 -90.831908,13.996007 -90.831921,13.996054 -90.831929,13.996100 -90.831939,13.996144 -90.831951,13.996189 -90.831964,13.996235 -90.831974,13.996279 -90.832004,13.996404 -90.832165,13.996402 -90.832508,13.996369 -90.832749,13.996335 -90.832879,13.996318 -90.833536,13.996234 -90.833694,13.996217 -90.833722,13.996208 -90.834097,13.996166 -90.834103,13.996011 -90.834100,13.995977 -90.834095,13.995929 -90.834088,13.995877 -90.834082,13.995825 -90.834076,13.995775 -90.834070,13.995723 -90.834064,13.995669 -90.834059,13.995614 -90.834054,13.995558 -90.834046,13.995500 -90.834040,13.995447 -90.834035,13.995395 -90.834028,13.995342 -90.834021,13.995286 -90.834015,13.995228 -90.834006,13.995168 -90.833999,13.995117 -90.833990,13.995067 -90.833982,13.995009 -90.833973,13.994946 -90.833964,13.994883 -90.833955,13.994816 -90.833947,13.994747 -90.833938,13.994676 -90.833932,13.994613 -90.833925,13.994553 -90.833919,13.994498 -90.833913,13.994445 -90.833905,13.994388 -90.833897,13.994328 -90.833890,13.994268 -90.833884,13.994212 -90.833878,13.994156 -90.833872,13.994100 -90.833864,13.994044 -90.833856,13.993988 -90.833848,13.993933 -90.833841,13.993876 -90.833835,13.993821 -90.833830,13.993764 -90.833824,13.993705 -90.833818,13.993645 -90.833811,13.993584 -90.833803,13.993523 -90.833797,13.993467 -90.833791,13.993416 -90.833784,13.993363 -90.833778,13.993309 -90.833769,13.993258 -90.833761,13.993208 -90.833753,13.993155 -90.833746,13.993097 -90.833740,13.993037 -90.833733,13.992976 -90.833726,13.992918 -90.833718,13.992862 -90.833709,13.992801 -90.833699,13.992736 -90.833690,13.992667 -90.833681,13.992596 -90.833674,13.992522 -90.833666,13.992450 -90.833658,13.992376 -90.833648,13.992307 -90.833638,13.992249 -90.833634,13.992223 -90.833577,13.992231';

  cc1 = "2740301";
  cc2 = "2740306";
  cc3 = "2740304";
  cc4 = "2740302";


  crearPoligonos(coordenadas3, cc3);
  crearPoligonos(coordenadas4, cc4);
  crearPoligonos(coordenadas1, cc1);
  crearPoligonos(coordenadas2, cc2);*/
}

  generarMapas();

  
<title>Custom Animation</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>

<div id="map" class="map"></div>

1
  • Necesitas específicamente que te ayude en el ejemplo que muestras? ya que he visto que has hecho varias preguntas referente a open layers con distintos ejemplos. Así para ayudarte y tratar de encerrar todo lo que has preguntando en una sola respuesta. Commented el 12 abr. 2018 a las 0:02

1 respuesta 1

1

Con el siguiente código trato de encerrar la mayor parte de las consultas que has realizado. Espero te sea de ayuda.

Te agregué como cambiar los iconos, mostrar poligonos, evento clic en marcador. Con las coordenadas las dejé en un variable pero puedes facilitar el trabajo, si las recibes en un Json.

var iconFeature = new ol.Feature({});

var iconStyle = new ol.style.Style({});

var vectorSource = new ol.source.Vector({
  features: [iconFeature]
});

var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

var layer = new ol.layer.Vector({ /*layer con los poligonos*/
  source: new ol.source.Vector()
})

function crearMarcadores(centroPoligono, CentroCosto) {

  var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(centroPoligono),
    name: CentroCosto
  });

  vectorSource.addFeature(iconFeature);

  iconFeature.setStyle(iconStyle);

  //------------start creation popup
  var div = document.createElement('div');
  div.setAttribute("id", CentroCosto);
  document.body.appendChild(div);

  var element = document.getElementById(CentroCosto);
  var popup = new ol.Overlay({
    element: element,
    positioning: 'bottom-center',
    stopEvent: false
  });
  map.addOverlay(popup);

  //------------end creation popup

  // --------------display popup on click
  map.on('click', function(evt) {
    //console.log("Click");
    var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature, layer) {
        return feature;
      });

    //console.log("name:");
    var tag = feature.get('name');
    var indice = tag.indexOf("-");
    var substring = tag.substring(0, indice);
    $('.agregar').tagsinput('add', substring);

    //console.log(feature.get('name'));
    if (feature.get('name') == CentroCosto) {
      var geometry = feature.getGeometry();
      var coord = geometry.getCoordinates();
      popup.setPosition(coord);
      $(element).popover({
        'placement': 'top',
        'html': true,
        'content': feature.get('name')
      });
      $(element).popover('show');
    } else {
      $(element).popover('destroy');
    }
  });
  //---------------end display popup on click
} //termina funcion crearMarcadores


function crearPoligonos(coordenada, cc) {

  iconStyle = new ol.style.Style({
    image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      opacity: 0.75,
      src: 'http://openlayers.org/en/v3.9.0/examples/data/icon.png'
    })),
    text: new ol.style.Text({
      text: cc,
      fill: new ol.style.Fill({
        color: 'white'
      }),
      stroke: new ol.style.Stroke({
        color: 'black',
        width: 1
      }),
      offsetX: -30,
      offsetY: 30
    })
  });
  iconFeature.setStyle(iconStyle);

  var coordenadas = coordenada.split(' ') // Separamos por espacio
    .map(function(data) {
      var info = data.split(','), // Separamos por coma
        coord = { // Creamos el obj de coordenada
          lat: parseFloat(info[1]),
          lng: parseFloat(info[0])
        };
      return coord;
    });
  console.log(coordenada);
  //var parserJSTS = new jsts.io.OL3Parser();

  var poly = new ol.Feature({
    geometry: new ol.geom.Polygon([coordenadas.map(function(_ref) {
      var lng = _ref.lng,
        lat = _ref.lat;
      return [lng, lat];
    })])
  });

  var boundingBox = poly.getGeometry().getExtent()
  
  layer.getSource().addFeature(poly)

  var centro = ol.extent.getCenter(boundingBox);
  console.log("Centro:");
  console.log(centro);
  console.log(cc);
  crearMarcadores(centro, cc);

}

function errores(msg) {
  alert('Error: ' + msg.responseText);
}
//------------start creation map
var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.BingMaps({
        key: 'AudCyoI6al0eAZmQhwmI1IG9AOdGH8DHHk6PsiGta1faEACulxawFU9KV-XAvZ8f',
        imagerySet: 'AerialWithLabels'
      })
    }),
    layer, vectorLayer
  ],
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions: ({
      collapsible: false
    })
  }),
  view: new ol.View({
    center: [-90.833434, 13.990260],
    zoom: 14,
    projection: 'EPSG:4326'
  })
});
// --------------end creation map

//generar mapas-------------------------------
function generarMapas() {
  coordenadas1 = '-90.833910,13.994037 -90.833918,13.994095 -90.833924,13.994152 -90.833930,13.994207 -90.833936,13.994263 -90.833943,13.994322 -90.833951,13.994382 -90.833959,13.994440 -90.833965,13.994494 -90.833971,13.994548 -90.833978,13.994608 -90.833984,13.994671 -90.833993,13.994741 -90.834001,13.994811 -90.834010,13.994877 -90.834019,13.994940 -90.834028,13.995003 -90.834036,13.995060 -90.834044,13.995110 -90.834052,13.995162 -90.834061,13.995222 -90.834067,13.995281 -90.834074,13.995336 -90.834080,13.995390 -90.834086,13.995442 -90.834092,13.995495 -90.834100,13.995553 -90.834105,13.995610 -90.834110,13.995665 -90.834116,13.995718 -90.834122,13.995769 -90.834127,13.995820 -90.834134,13.995871 -90.834141,13.995924 -90.834146,13.995974 -90.834149,13.996008 -90.834192,13.996161 -90.834732,13.996091 -90.835519,13.995989 -90.836038,13.995931 -90.836696,13.995846 -90.836677,13.995819 -90.836660,13.995674 -90.836610,13.995123 -90.836480,13.994146 -90.836461,13.994126 -90.836370,13.994036 -90.836287,13.994044 -90.836194,13.994035 -90.836012,13.993789 -90.836003,13.993753 -90.835995,13.993581 -90.836245,13.993529 -90.836375,13.993521 -90.836386,13.993516 -90.836394,13.993512 -90.836394,13.993503 -90.836395,13.993404 -90.836309,13.992635 -90.836266,13.992318 -90.836207,13.991926 -90.836192,13.991927 -90.836170,13.991932 -90.836125,13.991938 -90.836074,13.991943 -90.836010,13.991951 -90.835936,13.991961 -90.835862,13.991968 -90.835791,13.991976 -90.835722,13.991980 -90.835658,13.991985 -90.835597,13.991994 -90.835533,13.992003 -90.835471,13.992011 -90.835408,13.992018 -90.835346,13.992025 -90.835285,13.992033 -90.835228,13.992040 -90.835173,13.992045 -90.835118,13.992051 -90.835062,13.992057 -90.835002,13.992063 -90.834936,13.992071 -90.834868,13.992078 -90.834800,13.992086 -90.834733,13.992094 -90.834663,13.992102 -90.834588,13.992111 -90.834523,13.992120 -90.834474,13.992123 -90.834421,13.992129 -90.834361,13.992133 -90.834298,13.992140 -90.834229,13.992149 -90.834160,13.992161 -90.834092,13.992171 -90.834022,13.992180 -90.833954,13.992185 -90.833889,13.992191 -90.833824,13.992198 -90.833761,13.992205 -90.833709,13.992212 -90.833680,13.992216 -90.833683,13.992242 -90.833693,13.992300 -90.833704,13.992370 -90.833712,13.992445 -90.833720,13.992518 -90.833727,13.992591 -90.833736,13.992661 -90.833745,13.992730 -90.833755,13.992795 -90.833764,13.992855 -90.833772,13.992913 -90.833779,13.992971 -90.833786,13.993033 -90.833792,13.993092 -90.833799,13.993149 -90.833807,13.993202 -90.833815,13.993251 -90.833823,13.993302 -90.833830,13.993358 -90.833837,13.993410 -90.833843,13.993462 -90.833849,13.993518 -90.833857,13.993579 -90.833864,13.993641 -90.833870,13.993700 -90.833876,13.993760 -90.833881,13.993817 -90.833887,13.993871 -90.833894,13.993927 -90.833902,13.993982 -90.833910,13.994037';

  coordenadas2 = '-90.833434,13.990260 -90.833444,13.990321 -90.833452,13.990383 -90.833461,13.990446 -90.833470,13.990509 -90.833479,13.990572 -90.833486,13.990635 -90.833494,13.990697 -90.833501,13.990760 -90.833510,13.990823 -90.833520,13.990886 -90.833530,13.990948 -90.833538,13.991006 -90.833545,13.991061 -90.833552,13.991112 -90.833557,13.991165 -90.833561,13.991220 -90.833567,13.991282 -90.833572,13.991348 -90.833580,13.991414 -90.833587,13.991476 -90.833593,13.991536 -90.833601,13.991597 -90.833608,13.991662 -90.833617,13.991727 -90.833627,13.991790 -90.833633,13.991853 -90.833640,13.991914 -90.833648,13.991972 -90.833654,13.992029 -90.833661,13.992086 -90.833668,13.992140 -90.833673,13.992172 -90.833702,13.992167 -90.833755,13.992160 -90.833819,13.992153 -90.833884,13.992146 -90.833950,13.992140 -90.834017,13.992135 -90.834085,13.992127 -90.834153,13.992116 -90.834222,13.992105 -90.834292,13.992095 -90.834356,13.992088 -90.834417,13.992084 -90.834470,13.992078 -90.834518,13.992075 -90.834582,13.992066 -90.834658,13.992058 -90.834727,13.992049 -90.834795,13.992041 -90.834863,13.992034 -90.834931,13.992027 -90.834996,13.992018 -90.835057,13.992012 -90.835114,13.992006 -90.835168,13.992000 -90.835223,13.991995 -90.835280,13.991988 -90.835340,13.991981 -90.835403,13.991973 -90.835465,13.991966 -90.835527,13.991958 -90.835590,13.991949 -90.835653,13.991940 -90.835718,13.991935 -90.835787,13.991931 -90.835857,13.991923 -90.835930,13.991916 -90.836003,13.991906 -90.836068,13.991898 -90.836120,13.991893 -90.836162,13.991887 -90.836187,13.991882 -90.836204,13.991875 -90.836197,13.991794 -90.836145,13.991395 -90.836119,13.991187 -90.836033,13.990464 -90.835948,13.989722 -90.835879,13.989197 -90.835811,13.988582 -90.835741,13.988067 -90.835732,13.988048 -90.835714,13.988048 -90.835371,13.988126 -90.834888,13.988240 -90.834481,13.988308 -90.834036,13.988350 -90.833573,13.988409 -90.833208,13.988448 -90.833210,13.988464 -90.833219,13.988531 -90.833229,13.988598 -90.833236,13.988664 -90.833244,13.988729 -90.833251,13.988790 -90.833258,13.988849 -90.833264,13.988906 -90.833270,13.988964 -90.833278,13.989023 -90.833288,13.989081 -90.833295,13.989133 -90.833301,13.989185 -90.833307,13.989231 -90.833315,13.989282 -90.833321,13.989336 -90.833327,13.989388 -90.833332,13.989440 -90.833339,13.989494 -90.833348,13.989551 -90.833354,13.989613 -90.833361,13.989674 -90.833369,13.989737 -90.833378,13.989800 -90.833386,13.989863 -90.833393,13.989926 -90.833399,13.989988 -90.833408,13.990049 -90.833415,13.990102 -90.833422,13.990155 -90.833427,13.990208 -90.833429,13.990227 -90.833432,13.990221 -90.833439,13.990218 -90.833445,13.990221 -90.833448,13.990227 -90.833445,13.990233 -90.833440,13.990236 -90.833433,13.990235 -90.833430,13.990230 -90.833434,13.990260';

  coordenadas3 = '-90.832897,13.988475 -90.832609,13.988518 -90.832313,13.988560 -90.831989,13.988602 -90.831516,13.988661 -90.831053,13.988720 -90.830599,13.988780 -90.830545,13.988793 -90.830547,13.988811 -90.830552,13.988849 -90.830557,13.988886 -90.830563,13.988926 -90.830569,13.988968 -90.830575,13.989010 -90.830582,13.989052 -90.830588,13.989092 -90.830593,13.989132 -90.830598,13.989173 -90.830605,13.989216 -90.830610,13.989257 -90.830616,13.989298 -90.830622,13.989341 -90.830628,13.989385 -90.830634,13.989431 -90.830640,13.989474 -90.830646,13.989517 -90.830654,13.989561 -90.830662,13.989607 -90.830670,13.989651 -90.830677,13.989692 -90.830684,13.989732 -90.830691,13.989774 -90.830697,13.989819 -90.830703,13.989863 -90.830709,13.989903 -90.830715,13.989945 -90.830722,13.989989 -90.830727,13.990031 -90.830733,13.990072 -90.830739,13.990113 -90.830745,13.990153 -90.830752,13.990194 -90.830758,13.990233 -90.830762,13.990268 -90.830767,13.990308 -90.830774,13.990356 -90.830779,13.990398 -90.830783,13.990436 -90.830787,13.990475 -90.830789,13.990515 -90.830793,13.990559 -90.830797,13.990600 -90.830802,13.990639 -90.830807,13.990680 -90.830813,13.990723 -90.830820,13.990768 -90.830826,13.990818 -90.830832,13.990868 -90.830839,13.990921 -90.830846,13.990976 -90.830853,13.991032 -90.830862,13.991089 -90.830869,13.991147 -90.830878,13.991208 -90.830883,13.991271 -90.830890,13.991334 -90.830901,13.991393 -90.830912,13.991453 -90.830920,13.991509 -90.830927,13.991560 -90.830937,13.991615 -90.830947,13.991684 -90.830957,13.991751 -90.830965,13.991806 -90.830970,13.991852 -90.830978,13.991898 -90.830987,13.991951 -90.830995,13.992004 -90.831004,13.992060 -90.831012,13.992112 -90.831019,13.992163 -90.831029,13.992218 -90.831039,13.992278 -90.831048,13.992334 -90.831055,13.992389 -90.831062,13.992444 -90.831069,13.992497 -90.831069,13.992500 -90.831099,13.992493 -90.831143,13.992483 -90.831190,13.992476 -90.831240,13.992471 -90.831285,13.992467 -90.831330,13.992463 -90.831381,13.992456 -90.831435,13.992449 -90.831488,13.992444 -90.831540,13.992437 -90.831594,13.992430 -90.831649,13.992424 -90.831703,13.992419 -90.831757,13.992414 -90.831811,13.992407 -90.831866,13.992400 -90.831919,13.992394 -90.831974,13.992387 -90.832032,13.992383 -90.832090,13.992379 -90.832146,13.992371 -90.832204,13.992362 -90.832274,13.992351 -90.832348,13.992340 -90.832412,13.992331 -90.832469,13.992325 -90.832522,13.992320 -90.832583,13.992314 -90.832647,13.992303 -90.832713,13.992295 -90.832779,13.992289 -90.832840,13.992283 -90.832901,13.992278 -90.832964,13.992270 -90.833029,13.992263 -90.833090,13.992253 -90.833153,13.992247 -90.833212,13.992241 -90.833260,13.992236 -90.833306,13.992230 -90.833360,13.992222 -90.833413,13.992215 -90.833461,13.992207 -90.833516,13.992196 -90.833569,13.992187 -90.833617,13.992180 -90.833627,13.992178 -90.833622,13.992147 -90.833615,13.992092 -90.833608,13.992034 -90.833602,13.991977 -90.833594,13.991919 -90.833587,13.991858 -90.833581,13.991796 -90.833571,13.991733 -90.833563,13.991667 -90.833555,13.991603 -90.833547,13.991541 -90.833541,13.991481 -90.833534,13.991419 -90.833526,13.991353 -90.833521,13.991285 -90.833515,13.991224 -90.833511,13.991169 -90.833506,13.991117 -90.833499,13.991066 -90.833492,13.991012 -90.833484,13.990955 -90.833474,13.990893 -90.833464,13.990830 -90.833455,13.990765 -90.833448,13.990702 -90.833440,13.990640 -90.833433,13.990578 -90.833424,13.990515 -90.833415,13.990452 -90.833406,13.990389 -90.833398,13.990328 -90.833388,13.990267 -90.833381,13.990213 -90.833375,13.990160 -90.833370,13.990108 -90.833362,13.990055 -90.833353,13.989994 -90.833347,13.989931 -90.833340,13.989868 -90.833332,13.989806 -90.833323,13.989743 -90.833315,13.989680 -90.833308,13.989618 -90.833302,13.989557 -90.833293,13.989500 -90.833286,13.989445 -90.833281,13.989393 -90.833275,13.989341 -90.833269,13.989288 -90.833261,13.989238 -90.833255,13.989190 -90.833249,13.989139 -90.833242,13.989087 -90.833233,13.989030 -90.833224,13.988969 -90.833218,13.988910 -90.833212,13.988854 -90.833205,13.988795 -90.833198,13.988734 -90.833191,13.988670 -90.833183,13.988604 -90.833173,13.988537 -90.833165,13.988471 -90.833162,13.988452 -90.832897,13.988475';

  coordenadas4 = '-90.833577,13.992231 -90.833525,13.992241 -90.833470,13.992251 -90.833420,13.992260 -90.833367,13.992267 -90.833312,13.992275 -90.833266,13.992280 -90.833217,13.992286 -90.833158,13.992291 -90.833097,13.992298 -90.833035,13.992308 -90.832970,13.992315 -90.832906,13.992323 -90.832845,13.992328 -90.832783,13.992334 -90.832718,13.992339 -90.832654,13.992348 -90.832589,13.992358 -90.832527,13.992365 -90.832473,13.992370 -90.832418,13.992376 -90.832355,13.992385 -90.832281,13.992396 -90.832212,13.992406 -90.832153,13.992416 -90.832114,13.992421 -90.832217,13.993235 -90.832124,13.993315 -90.831292,13.993421 -90.831303,13.993471 -90.831313,13.993521 -90.831325,13.993573 -90.831338,13.993629 -90.831352,13.993686 -90.831365,13.993742 -90.831378,13.993797 -90.831393,13.993854 -90.831407,13.993911 -90.831420,13.993966 -90.831435,13.994022 -90.831451,13.994080 -90.831464,13.994137 -90.831477,13.994193 -90.831491,13.994249 -90.831506,13.994307 -90.831521,13.994366 -90.831534,13.994425 -90.831547,13.994481 -90.831558,13.994534 -90.831571,13.994588 -90.831585,13.994644 -90.831598,13.994700 -90.831611,13.994752 -90.831623,13.994804 -90.831635,13.994856 -90.831647,13.994905 -90.831659,13.994953 -90.831671,13.995002 -90.831683,13.995053 -90.831695,13.995105 -90.831707,13.995159 -90.831718,13.995212 -90.831730,13.995261 -90.831742,13.995311 -90.831751,13.995360 -90.831760,13.995409 -90.831769,13.995459 -90.831783,13.995508 -90.831796,13.995557 -90.831808,13.995607 -90.831819,13.995655 -90.831829,13.995700 -90.831839,13.995746 -90.831851,13.995798 -90.831865,13.995852 -90.831880,13.995907 -90.831895,13.995960 -90.831908,13.996007 -90.831921,13.996054 -90.831929,13.996100 -90.831939,13.996144 -90.831951,13.996189 -90.831964,13.996235 -90.831974,13.996279 -90.832004,13.996404 -90.832165,13.996402 -90.832508,13.996369 -90.832749,13.996335 -90.832879,13.996318 -90.833536,13.996234 -90.833694,13.996217 -90.833722,13.996208 -90.834097,13.996166 -90.834103,13.996011 -90.834100,13.995977 -90.834095,13.995929 -90.834088,13.995877 -90.834082,13.995825 -90.834076,13.995775 -90.834070,13.995723 -90.834064,13.995669 -90.834059,13.995614 -90.834054,13.995558 -90.834046,13.995500 -90.834040,13.995447 -90.834035,13.995395 -90.834028,13.995342 -90.834021,13.995286 -90.834015,13.995228 -90.834006,13.995168 -90.833999,13.995117 -90.833990,13.995067 -90.833982,13.995009 -90.833973,13.994946 -90.833964,13.994883 -90.833955,13.994816 -90.833947,13.994747 -90.833938,13.994676 -90.833932,13.994613 -90.833925,13.994553 -90.833919,13.994498 -90.833913,13.994445 -90.833905,13.994388 -90.833897,13.994328 -90.833890,13.994268 -90.833884,13.994212 -90.833878,13.994156 -90.833872,13.994100 -90.833864,13.994044 -90.833856,13.993988 -90.833848,13.993933 -90.833841,13.993876 -90.833835,13.993821 -90.833830,13.993764 -90.833824,13.993705 -90.833818,13.993645 -90.833811,13.993584 -90.833803,13.993523 -90.833797,13.993467 -90.833791,13.993416 -90.833784,13.993363 -90.833778,13.993309 -90.833769,13.993258 -90.833761,13.993208 -90.833753,13.993155 -90.833746,13.993097 -90.833740,13.993037 -90.833733,13.992976 -90.833726,13.992918 -90.833718,13.992862 -90.833709,13.992801 -90.833699,13.992736 -90.833690,13.992667 -90.833681,13.992596 -90.833674,13.992522 -90.833666,13.992450 -90.833658,13.992376 -90.833648,13.992307 -90.833638,13.992249 -90.833634,13.992223 -90.833577,13.992231';

  cc1 = "2740301";
  cc2 = "2740306";
  cc3 = "2740304";
  cc4 = "2740302";


  crearPoligonos(coordenadas3, cc3);
  crearPoligonos(coordenadas4, cc4);
  crearPoligonos(coordenadas1, cc1);
  crearPoligonos(coordenadas2, cc2);
}
//finaliza generar mapas----------------------------

$(document).ready(function() {
  generarMapas();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.min.js"></script>

<script src="https://openlayers.org/en/v4.5.0/build/ol-debug.js"></script>
<link href="https://openlayers.org/en/v4.5.0/css/ol.css" rel="stylesheet" />
<div id="map">
</div>
<div id="popup">
</div>

5
  • Amigo muchisimas gracias!! La verdad estoy medio verde en el tema y solo necesitaria los iconos y el evento clic.Lo que no termino de entender es como puedo adaptar la funcion adaptarMapas por el for que tengo en mi codigo, ya que lo que traigo son datos de una base de datos y la voy recorriendo (traigo data[0 ] que son los nombres de las paradas de colectivo, data [1] longitud y el data [2] latitud. Pero en tu caso traes todas las coordenadas para armar un poligono y a partir de ahi centras el icono (por lo menos eso es lo que logro entender). Desde ya agradezco inmensamente tu ayuda.
    – Sama
    Commented el 12 abr. 2018 a las 13:27
  • 1
    Los iconos se cambian en el iconStyle: src: 'openlayers.org/en/v3.9.0/examples/data/icon.png' y el evento clic ya está agregado cuando le das clic sobre el marcador, aunque puedes crear un manejador para todos los marcadores. Ahora bien con la función generarMapas(); ahí debes agregar tu ciclo para obtener las coordenadas de la Db y las envías a crearPoligonos(); por cada row que encuentres. Dependiendo como tengas almacenadas las coordenadas, así las procesaras antes de enviarlas a crearPoligonos(); Commented el 12 abr. 2018 a las 15:18
  • ahí lo intente editar pero no me trae ningún icono, no se porque no me trae los elementos si lo único que hago es generar el for dentro de la función que me indicaste. Edite tambièn la pregunta principal con lo que me pasaste y el intento de edición que hice. De verdad gracias por tu inmensa ayuda
    – Sama
    Commented el 12 abr. 2018 a las 17:41
  • 1
    Puede ser que las coordenadas que estas recibiendo, no son correctas para el procedimiento y por eso no muestra nada en la pantalla. Sería bueno que subas una pregunta nueva, para no extender aquí como un chat, con un ejemplo de como tienes las coordenadas en la db, como las recibes y las demás modificaciones. También indica exactamente que deseas lograr al final. Commented el 12 abr. 2018 a las 20:29
  • Perfecto amigo, ahì hice lo que me comentaste. Espero haberlo explicado bien. es.stackoverflow.com/questions/155549/…
    – Sama
    Commented el 13 abr. 2018 a las 14:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.