如何将 openlayer 2 标记更改为 openlayer 3答案

【问题标题】：How to change openlayer 2 marker to openlayer 3如何将 openlayer 2 标记更改为 openlayer 3
【发布时间】：2016-07-25 07:22:14
【问题描述】：

openlayer 2工作代码Working copy

需要 - new ol.Map 而不是 new OpenLayers.Map 以获得完整代码

我正在尝试使用 openlayer 3 进行转换。但是有很多变化，openlayer 3 中没有标记。任何人都可以建议如何更改这个工作示例jsfiddle（类似于ol.Style.Icon）

下面是代码

function updateIcon(f) {
    f.style.externalGraphic = "marker.png";
    vector.drawFeature(f);
}

 options = {
    div: "map",
    zoom: 2,
    center: [0, 0],
    layers: [
        new OpenLayers.Layer.OSM()
    ]
};
map = new OpenLayers.Map(options);
vector = new OpenLayers.Layer.Vector();
map.addLayer(vector);


var point1 = new OpenLayers.Geometry.Point(0,0);
var point2 = new OpenLayers.Geometry.Point(1000000, 1000000);
var point3 = new OpenLayers.Geometry.Point(2000000, 2000000);
var radius = $( "#amount" ).val();
 var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon(point2,radius,40,0);
     var featurecircle = new OpenLayers.Feature.Vector(mycircle);
     


// var selected_polygon_style = {
//     strokeWidth: 5,
//     strokeColor: '#ff0000'
//     // add more styling key/value pairs as your need
// };

// featurecircle.style = selected_polygon_style;

marker1 = new OpenLayers.Feature.Vector(point1, null, {
    externalGraphic: "marker.png",
    graphicWidth: 32,
    graphicHeight: 32,
    fillOpacity: 1
});
marker1.style = { display: 'none' };

marker2 = new OpenLayers.Feature.Vector(point2, null, {
    externalGraphic: "marker.png",
    graphicWidth: 32,
    graphicHeight: 32,
    fillOpacity: 1
});

marker3 = new OpenLayers.Feature.Vector(point3, null, {
    externalGraphic: "marker.png",
    graphicWidth: 32,
    graphicHeight: 32,
    fillOpacity: 1
});
vector.addFeatures([marker1, marker2, marker3, featurecircle]);



$( "#slider-range-max" ).slider({
      range: "max",
      min: 1000000,
      max: 3000000,
      value: 1000000,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
         radius =  $( "#amount" ).val();

     vector.removeFeatures([featurecircle]);
var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon
(
    point2,
    radius,
    40,
    0
);

featurecircle = new OpenLayers.Feature.Vector(mycircle);
vector.addFeatures([featurecircle]);

         console.log(radius);

      }
    });
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
$( radius ).val( $( "#slider-range-max" ).slider( "value" ) );

html, body {
    height:100%;
    width: 100%;
    padding:5px;
    margin:0px;
}
#map {
    height:90%;
    width: 95%;
}

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="http://openlayers.org/en/v3.16.0/css/ol.css" rel="stylesheet"/>
<script src="http://openlayers.org/api/OpenLayers.js"></script>


<p>
  <label for="amount">Minimum number</label>
  <input type="text" id="amount" value="1000000"  style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-max"></div>
<div id="map" style="width:600px;height:600px;"></div>

【问题讨论】：

标签： openlayers openlayers-3

【解决方案1】：

在 OL3 中，您必须将点添加为矢量图层。

创建你必须使用的点：

var point1 = new ol.geom.Point([coord1, coord2]);
var marker1 = new ol.Feature({
    geometry: point1
});
marker1.setStyle(
    new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            anchor: [0.5, 0],
            anchorOrigin: 'bottom-left',
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            src: 'yourImage.png'
        }))
    })

);

现在您将点添加到这样的矢量图层：

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

还有其他方法可以做到这一点，例如为每个特征赋予其自己的层

编辑

现在要更新你的圆的半径，你必须先创建它：

var radius=10;
var circle = new ol.geom.Circle([coord1, coord2], radius);
var featureCircle = new ol.Feature({
     geometry: circle
});

并且您保留与滑块交互的相同代码

【讨论】：

感谢您提供开放层 3 代码，但它不会使用 html 滑块更改圆半径.. 将发布我的代码..

【解决方案2】：

用于点、圆和样式

<!DOCTYPE html>
<html>
<head>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.17.1/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>
</head>
<body>
    <div id="map" class="map"></div>
    <script>

        // create map
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })


        ],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });


        // points     


       pointFeatures = [];

      var point1 = new ol.Feature({
          geometry: new ol.geom.Point([0, 0]),
          name: 'point 1'
      })

      var point2 = new ol.Feature({
          geometry: new ol.geom.Point([1000000, 1000000]),
          name: 'point2'
      })

      var point3 = new ol.Feature({
          geometry: new ol.geom.Point([2000000, 2000000]),
          name: 'point3'
      })


      pointFeatures.push(point1)
      pointFeatures.push(point2)
      pointFeatures.push(point3)

      var vectorSource = new ol.source.Vector({
          features: pointFeatures
      });

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

      map.addLayer(vectorLayer)


        // circle
      var circle = new ol.Feature({
          geometry: new ol.geom.Circle(point2.getGeometry().getCoordinates(), 100000),
          name: 'circle uno'
      })

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

      var circleLayer = new ol.layer.Vector({
          source: circleSource
      });

      map.addLayer(circleLayer)




        // style

      var marker1 = new ol.style.Style({
          image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
              anchor: [0.5, 46],
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              src: 'marker.png'
          }))
      });

      var marker2 = new ol.style.Style({
          image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
              anchor: [0.5, 46],
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              src: 'marker.png'
          }))
      });

      var marker3 = new ol.style.Style({
          image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
              anchor: [0.5, 46],
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              src: 'marker.png'
          }))
      });

      var circleStyle = new ol.style.Style({
          image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
              anchor: [0.5, 46],
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              src: 'marker.png'
          }))
      });


      point1.setStyle(marker1);
      point2.setStyle(marker2);
      point3.setStyle(marker3);
      circle.setStyle(circleStyle);

    </script>
</body>
</html>

【讨论】：

【解决方案3】：

var features = [];
var radius = 100000;
var longitude = 400000;
var latitude = 300000;
var point1 = new ol.Feature(
    new ol.geom.Point([400000, 400000])
);
//console.log(point1);
//alert(radius);
//var point1 = new ol.geom.Point(400000,400000);

var circle = new ol.geom.Circle([longitude, latitude], radius);
features.push(new ol.Feature({
    geometry: circle
}));
var vectorSource = new ol.source.Vector({
    features: features
});
var layer = new ol.layer.Vector({
    source: vectorSource,
    style: [
    new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'blue',
            width: 3
        }),
        fill: new ol.style.Fill({
            color: 'rgba(0, 0, 255, 0.1)'
        })
    })]
});
   // create map
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })


        ],
        target: 'map',
        view: new ol.View({
          center: [400000, 300000],
          zoom: 6
        })
      });
       map.addLayer(layer);

      function updateTextInput(val) {
          document.getElementById('range').value=val; 
          radius  = $( "#range" ).val();
        }

html, body {
    height:100%;
    width: 100%;
    padding:5px;
    margin:0px;
}
#map {
    height:90%;
    width: 95%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.17.1/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>

<div>
  <input type="range" class="slider" name="rangeInput" min="10" max="50" onchange="updateTextInput(this.value);">
                 <input type="text" id="range" value="10">
</div>
<div id="map"></div>

【讨论】：

我想在函数updateTextInput(val)中改变半径——在滑块改变值之后