Как изменить openlayer 2 маркеров openlayer 3

Question

Рабочего кода 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>

Answer 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 
}); 

и вы сохранить тот же код для взаимодействия с ползуном

Answer 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> 

Answer 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>