Javascript 如何根据标记类型设置不同颜色的标记，以及如何确定它们的坐标？我使用openlayers.org库_Javascript_Dictionary_Maps_Openlayers 3

Javascript 如何根据标记类型设置不同颜色的标记，以及如何确定它们的坐标？我使用openlayers.org库

javascript dictionary maps openlayers-3

Javascript 如何根据标记类型设置不同颜色的标记，以及如何确定它们的坐标？我使用openlayers.org库,javascript,dictionary,maps,openlayers-3,Javascript,Dictionary,Maps,Openlayers 3,我开始使用openlayers.org上的openlayers javascript库我想为每种设备类型（cam标记、服务器标记等）设置不同颜色的dinamic标记，我尝试了不同的方法来设置它，但实际上它不起作用。这是我正在开发的地图：我面临的另一个问题是当我设置坐标时。例如：如果我在一个标记上设置[0,0]坐标，当我使用click事件时，标记会得到另一个坐标，如 [30000，-7.081154551613622e-10] 这是我用来在manotazsoliciones.com/map上

我开始使用openlayers.org上的openlayers javascript库

我想为每种设备类型（cam标记、服务器标记等）设置不同颜色的dinamic标记，我尝试了不同的方法来设置它，但实际上它不起作用。这是我正在开发的地图：

我面临的另一个问题是当我设置坐标时。例如：如果我在一个标记上设置[0,0]坐标，当我使用click事件时，标记会得到另一个坐标，如 [30000，-7.081154551613622e-10]

这是我用来在manotazsoliciones.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 AND DROP EVENTS ****************/
  /**
   * Define a namespace for the 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` to start the 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` to stop the drag sequence.
   */
  app.Drag.prototype.handleUpEvent = function(evt) {
    this.coordinate_ = null;
    this.feature_ = null;
    return false;
  };
  /*************** DRAG AND DROP EVENTS END *************/

上面的代码只是我想要显示的资源的一个示例

  var circle = [];
  for (var i = 0; i < 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
      )
    );
  }

在样式中，我设置所有标记的颜色，但我想根据设备类型更改他的值

  // RENDER DEVICES
  var objects = new ol.source.Vector({ features: circle })
  var bullets = new ol.layer.Vector({
    source : objects,
    style: 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);

上面我正在用它们的特征渲染地图

  // 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 over marker
  map.on('pointermove', function(e) {
    if (e.dragging) {

      $('#popup-content').empty();
      return;
    }
  });
  /* events ON map  END */

});
</script>
</body>
</html>

//单击后显示弹出窗口
var pops=document.getElementById（'popup'）；
var popupContent=document.getElementById（'popup-content'）；
var popup=new ol.Overlay（{/**@type{olx.OverlayOptions}*/
要素：持久性有机污染物，
自动扫描：是的，
stopEvent:false，
定位：'底部中心'，
自动规划：{
持续时间：250
}
});
map.addOverlay（弹出窗口）；
/*地图上的事件*/
映射打开（'click'，函数（evt）{
var feature=map.forEachFeatureAtPixel（evt.pixel，函数（特征，层）{
返回特性；
});
如果（功能）{
var geometry=feature.getGeometry（）；
var firstCoord=geometry.getFirstCoordinate（）；
var lastCoord=geometry.getlastcoardine（）；
弹出。设置位置（第一坐标）；
$（pops）popover({
“位置”：“顶部”，
“html”：是，
“内容”：功能。获取（'name'）
});
//var latlong=ol.proj.transform（[firstCoord，lastCoord]，'EPSG:4326'，'EPSG:3857'）；
popupContent.innerHTML='您单击此处：
'+lastCoord+''；
$（pops.popover（'show'）；
}
});
//在标记上更改鼠标光标
map.on（'pointermove'，函数（e）{
如果（如拖动）{
$（“#弹出内容”）.empty（）；
回来
}
});
/*地图上的事件结束*/
});

单击函数，我试图获取坐标，坐标会显示另一个值。

我提取了一些代码，并添加了一些修改

风格问题

每个功能都需要引用您保存在阵列设备中的属性：

            for (var i = 0; i < 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}
                );
            }

坐标问题 我认为这个问题是由于投影造成的。您定义了自定义投影（基于像素）并将其应用于图像。对于地图视图，您不定义任何投影（因此它仍然是默认的EPSG:3857）。圆的所有坐标都从“EPSG:4326”转换为“EPSG:3857”。因此，您在弹出窗口中看到的值是EPSG:3857（不是经度和纬度）。如果决定继续使用EPSG:3857，还应通过以下方式使静态图像适应此坐标系：

source=新ol.source.ImageStatic({
图像范围：

正如您可以在文档中找到的那样，imageExtent是以地图坐标表示的图像范围。但在您的代码中，imageExtent只是以像素表示的图像范围……

非常感谢您的回答。我解决了问题，并且在出现问题之前，它按照我的意愿工作。我在坐标上意识到当我测试我的lat时，我正在重新将[lat，long]从3857转换为3857，ol.proj.transform（3857format），'EPSG:4326'，'EPSG:3857'），1），这样长：设备[{'coordinates'：3857format}]

  // 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 over marker
  map.on('pointermove', function(e) {
    if (e.dragging) {

      $('#popup-content').empty();
      return;
    }
  });
  /* events ON map  END */

});
</script>
</body>
</html>

            for (var i = 0; i < 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}
                );
            }

var bullets = new ol.layer.Vector({
                source: objects,
                style: function (el, resolution) {//this is a style function
                    console.log(el, el.getProperties().device);
                    if (el.getProperties().device === 'cam')
                        return styles;
                    return styles2;

                }
            });