javascript - how can I set markers with different colours depending on the markertype, and how to determinate their coordinates?, Im using openlayers.org library -
i starting using openlayers javascript library openlayers.org.
i want set dinamic markers diferent colours each device type(cam marker, server marker , on), , tried different ways set this, doesn't work actually. map im developing: http://manotazsoluciones.com/map/.
another problem im facing when set coordinates. example: if set [0,0] coordinates on marker, when use click event, marker coordinates [30000,-7.081154551613622e-10].
this code im using display map on manotazsoluciones.com/map
<!doctype html> <html> <head> <title>manotaz soluciones</title> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js"></script> </head> <body> <div class="container-fluid"> <div class="row-fluid"> <div class="col-md-10 col-md-offset-1"> <div id="map" class="map"> <div id="popup"> <div id="popup-content"></div> </div> </div> </div> </div> </div> <script> $( document ).ready(function() { /**************** drag , drop events ****************/ /** * define namespace application. */ window.app = {}; var app = window.app; /** * @constructor * @extends {ol.interaction.pointer} */ app.drag = function() { ol.interaction.pointer.call(this, { handledownevent: app.drag.prototype.handledownevent, handledragevent: app.drag.prototype.handledragevent, handlemoveevent: app.drag.prototype.handlemoveevent, handleupevent: app.drag.prototype.handleupevent }); /** * @type {ol.pixel} * @private */ this.coordinate_ = null; /** * @type {string|undefined} * @private */ this.cursor_ = 'pointer'; /** * @type {ol.feature} * @private */ this.feature_ = null; /** * @type {string|undefined} * @private */ this.previouscursor_ = undefined; }; ol.inherits(app.drag, ol.interaction.pointer); /** * @param {ol.mapbrowserevent} evt map browser event. * @return {boolean} `true` start drag sequence. */ app.drag.prototype.handledownevent = function(evt) { var map = evt.map; var feature = map.foreachfeatureatpixel(evt.pixel, function(feature, layer) { return feature; }); if (feature) { this.coordinate_ = evt.coordinate; this.feature_ = feature; } return !!feature; }; /** * @param {ol.mapbrowserevent} evt map browser event. */ app.drag.prototype.handledragevent = function(evt) { var map = evt.map; var feature = map.foreachfeatureatpixel(evt.pixel, function(feature, layer) { return feature; }); var deltax = evt.coordinate[0] - this.coordinate_[0]; var deltay = evt.coordinate[1] - this.coordinate_[1]; var geometry = /** @type {ol.geom.simplegeometry} */ (this.feature_.getgeometry()); geometry.translate(deltax, deltay); this.coordinate_[0] = evt.coordinate[0]; this.coordinate_[1] = evt.coordinate[1]; }; /** * @param {ol.mapbrowserevent} evt event. */ app.drag.prototype.handlemoveevent = function(evt) { if (this.cursor_) { var map = evt.map; var feature = map.foreachfeatureatpixel(evt.pixel, function(feature, layer) { return feature; }); var element = evt.map.gettargetelement(); if (feature) { if (element.style.cursor != this.cursor_) { this.previouscursor_ = element.style.cursor; element.style.cursor = this.cursor_; } } else if (this.previouscursor_ !== undefined) { element.style.cursor = this.previouscursor_; this.previouscursor_ = undefined; } } }; /** * @param {ol.mapbrowserevent} evt map browser event. * @return {boolean} `false` stop drag sequence. */ app.drag.prototype.handleupevent = function(evt) { this.coordinate_ = null; this.feature_ = null; return false; }; /*************** drag , drop events end *************/ you can ignore drag , drop events above, because works fine
var devices = [ { 'id' : 1, 'device' : 'cam', 'brand' : 'dahua', 'coordinates' : [0,0] }, { 'id' : 2, 'device' : 'cam', 'brand' : 'vivotes', 'coordinates' : [0,1] }, { 'id' : 3, 'device' : 'cam', 'brand' : 'dahua', 'coordinates' : [0, 2] }, { 'id' : 4, 'device' : 'rack', 'brand' : 'dahua', 'coordinates' : [0, 3] } ]; the code above example of resource want display
var circle = []; (var = 0; < devices.length; i++) { circle[i] = new ol.feature( new ol.geom.circle( ol.proj.transform(devices[i].coordinates, 'epsg:4326', 'epsg:3857'),//usar latitud, longitud, coord sys 30000 ) ); } on var circle im saving coordinates , size each marker.
var styles = [ new ol.style.style({ image: new ol.style.icon({ //@type {olx.style.iconoptions} anchor: [0.5, 46], anchorxunits: 'fraction', anchoryunits: 'pixels', opacity: 1, population: 4000, rainfall: 500 }), fill: new ol.style.fill({ color: [150, 150, 255, 1] }) }) ]; in styles im setting color markers, want change values depending on device type
// render devices var objects = new ol.source.vector({ features: circle }) var bullets = new ol.layer.vector({ source : objects, style: styles }); above im setting markers , styles.
//layers-capaimagen, propiedades imagen principal var extent = ol.proj.transformextent([-50, 50, 50, -40], 'epsg:4326', 'epsg:3857'); var imgprojection = new ol.proj.projection({ code: 'xkcd-image', units: 'pixels', extent: [0, 0, 1024, 968] }); var capaimagen = new ol.layer.image(); source = new ol.source.imagestatic({ url: 'plano-vertical-knits.jpg', imageextent: extent, projection: imgprojection, center: ol.extent.getcenter(imgprojection.getextent()), extent: imgprojection.getextent() }); capaimagen.setsource(source); //end propiedades imagen principal //map features before render var features = { controls : ol.control.defaults({attribution : false}).extend([ new ol.control.fullscreen() ]), interactions: ol.interaction.defaults().extend([new app.drag()]), layers : [capaimagen, bullets], view: new ol.view({ center: [0, 0], zoom: 3 }), target : 'map' }; var map = new ol.map(features); above im rendering map features
// display popup on click var pops = document.getelementbyid('popup'); var popupcontent = document.getelementbyid('popup-content'); var popup = new ol.overlay({/** @type {olx.overlayoptions} */ element: pops, autopan: true, stopevent: false, positioning: 'bottom-center', autopananimation: { duration: 250 } }); map.addoverlay(popup); /* events on map */ map.on('click', function(evt) { var feature = map.foreachfeatureatpixel(evt.pixel, function(feature, layer) { return feature; }); if (feature) { var geometry = feature.getgeometry(); var firstcoord = geometry.getfirstcoordinate(); var lastcoord = geometry.getlastcoordinate(); popup.setposition(firstcoord); $(pops).popover({ 'placement': 'top', 'html': true, 'content': feature.get('name') }); //var latlong = ol.proj.transform([firstcoord, lastcoord], 'epsg:4326', 'epsg:3857'); popupcontent.innerhtml = '<p>you clicked here:</p><p>'+lastcoord+'</p>'; $(pops).popover('show'); } }); // change mouse cursor when on marker map.on('pointermove', function(e) { if (e.dragging) { $('#popup-content').empty(); return; } }); /* events on map end */ }); </script> </body> </html> on click function im trying coordinates, , coordinates shows me values.
i extracted of codes , added modifications.
- style problem
each feature needs have reference properties saved in array devices:
(var = 0; < devices.length; i++) { circle[i] = new ol.feature( {geometry: new ol.geom.circle( ol.proj.transform(devices[i].coordinates, ), 'epsg:4326', 'epsg:3857'),//usar latitud, longitud, coord sys 1 ), device: devices[i].device} ); } additionally, necessary set different style each desired property. should work:
var bullets = new ol.layer.vector({ source: objects, style: function (el, resolution) {//this style function console.log(el, el.getproperties().device); if (el.getproperties().device === 'cam') return styles; return styles2; } }); problem coordinates think problem in case due projection. defined custom projection (based on pixel) , applied image. map view don't define projection (so remains default epsg:3857). coordinates of circle converted 'epsg:4326' 'epsg:3857'. therefore, values see in popup in epsg:3857 (not longitude , latitude). if decide continue use epsg:3857, should adapt static image coordinates system via:
source = new ol.source.imagestatic({ ...............
imageextent: .....
as can find in documentation imageextent extent of image in map coordinates. in code imageextent extent in pixel of image.......
Comments
Post a Comment