Openlayers 如何将openlayer 2标记更改为openlayer 3
openlayer 2的工作代码 需要-Openlayers 如何将openlayer 2标记更改为openlayer 3,openlayers,openlayers-3,Openlayers,Openlayers 3,openlayer 2的工作代码 需要-new ol.Map而不是new OpenLayers.Map获取完整代码 我正在尝试使用openlayer 3来转换它。但是有很多变化，openlayer 3中没有标记。。任何人都可以建议如何更改这个工作示例（例如ol.Style.Icon） 下面是代码 函数更新（f）{ f、 style.externalGraphic=“marker.png”； 矢量特征（f）； } 选项={ 分区：“地图”， 缩放：2， 中间：[0,0]， 图层：[ 新的Open
new ol.Mapnew OpenLayers.Mapol.Style.Icon函数更新（f）{
f、 style.externalGraphic=“marker.png”；
矢量特征（f）；
}
选项={
分区：“地图”，
缩放：2，
中间：[0,0]，
图层：[
新的OpenLayers.Layer.OSM（）
]
};
map=新的OpenLayers.map（选项）；
vector=新的OpenLayers.Layer.vector（）；
map.addLayer（向量）；
var point1=新的OpenLayers.Geometry.Point（0,0）；
var point2=新的OpenLayers.Geometry.Point（1000000，1000000）；
var point3=新的OpenLayers.Geometry.Point（2000000，2000000）；
变量半径=$（“#金额”）.val（）；
var mycircle=OpenLayers.Geometry.Polygon.createRegularPolygon（点2，半径40,0）；
var featurecircle=新的OpenLayers.Feature.Vector（mycircle）；
//选择的变量\u多边形\u样式={
//冲程宽度：5，
//strokeColor:“#ff0000”
////根据需要添加更多样式键/值对
// };
//featurecircle.style=选定的\u多边形\u样式；
marker1=新的OpenLayers.Feature.Vector（点1，null{
外部图形：“marker.png”，
宽度：32，
身高：32，
不透明度：1
});
marker1.style={display:'none'}；
marker2=新的OpenLayers.Feature.Vector（点2，空{
外部图形：“marker.png”，
宽度：32，
身高：32，
不透明度：1
});
marker3=新的OpenLayers.Feature.Vector（点3，空{
外部图形：“marker.png”，
宽度：32，
身高：32，
不透明度：1
});
addFeatures（[marker1，marker2，marker3，featurecircle]）；
$（“#滑块最大范围”）.滑块({
射程：“最大”，
最低：1000000，
最高限额：300万，
价值：1000000，
幻灯片：功能（事件、用户界面）{
美元（“#金额”）.val（ui.value）；
半径=$（“#金额”）.val（）；
vector.removeFeatures（[featurecircle]）；
var mycircle=OpenLayers.Geometry.Polygon.createRegularPolygon
(
第2点，
半径
40,
0
);
featurecircle=新的OpenLayers.Feature.Vector（mycircle）；
vector.addFeatures（[featurecircle]）；
控制台日志（半径）；
}
});
$（“金额”）.val（$（“滑块范围最大”）.slider（“值”）；
$（半径）.val（$（“#滑块范围最大值”）。滑块（“值”）
html，正文{
身高：100%；
宽度：100%；
填充物：5px；
边际：0px；
}
#地图{
身高：90%；
宽度：95%；
}
最小数
在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
});
在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
});
对于点、圆和样式，保持与滑块交互的相同代码
<!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>
简单地图
//创建地图
var map=新ol.map({
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
})
],
目标：“地图”，
视图：新ol.view({
中间：[0,0]，
缩放：2
})
});
//要点
pointFeatures=[]；
var point1=新的ol.功能({
几何体：新的ol.geom.Point（[0,0]），
名称：“第1点”
})
变量点2=新的ol.特性({
几何：新的ol.geom.Point（[1000000,1000000]），
名称：“点2”
})
变量点3=新的ol.特性({
几何：新的ol.几何点（[2000000，2000000]），
名称：'point3'
})
pointFeatures.push（点1）
pointFeatures.push（点2）
pointFeatures.push（点3）
var vectorSource=新的ol.source.Vector({
功能：点功能
});
var vectorLayer=新ol.layer.Vector({
来源：矢量源
});
map.addLayer（矢量层）
//圈
变量圆=新的ol.特征({
几何：新的ol.geom.Circle（point2.getGeometry（）.getCoordinates（），100000），
名称：'circle uno'
})
var circleSource=新的ol.source.Vector({
特写：[圆圈]
});
var circleLayer=新ol.layer.Vector({
资料来源：circleSource
});
map.addLayer（circleLayer）
//风格
var marker1=新的ol.style.style({
图片：新的ol.style.Icon（/**@type{olx.style.IconOptions}*/({
主播：[0.5,46]，
主播：“分数”，
anchorYUnits:'像素'，
src:'marker.png'
}))
});
var marker2=新的ol.style.style({
图片：新的ol.style.Icon（/**@type{olx.style.IconOptions}*/({
主播：[0.5,46]，
主播：“分数”，
anchorYUnits:'像素'，
src:'marker.png'
}))
});
var marker3=新的ol.style.style({
图片：新的ol.style.Icon（/**@type{olx.style.IconOptions}*/({
主播：[0.5,46]，
主播：“分数”，
anchorYUnits:'像素'，
src:'marker.png'
}))
});
var circleStyle=新ol