openlayers6实现可拖拽点位
实现功能:需要实现地图上点击出现点位,此点位可拖拽,并且点击移动,从而实现地图选点的功能
使用技术:openlayers6 + react + 高德地图底图
1. 第一步:初始化地图容器
html代码:新增dom节点
<div id="testMap" style={
{width: '100vw', height: '100vh'}}></div>
2. 第二步:初始化地图
js代码:初始化时调用方法初始化高德地图
loadMap = () =>{
// 添加点位图层
var vectorSource = new VectorSource({
features: [],
});
this.vectorLayer = new VectorLayer({
source: vectorSource,
zIndex: 100
});
// 需要转换坐标系 - 将4326转化为3857坐标系
let m_center = [lngCenter, latCenter];//地图中心点-经纬度坐标
m_center = olProj.transform(m_center, 'EPSG:4326', 'EPSG:3857');
// 使用高德道路图
this.map = new Map({
target: 'testMap',
layers: [
new TileLayer({
source: new XYZ({
url: mapURL["aMap-vec-d"]
})
}),
this.vectorLayer
],
view: new View({
center: m_center,
zoom: 10,
minZoom: 5,
maxZoom: 18,
expandZoomRange: true,
projection: 'EPSG:3857'
}),
});
// 调用选点方法
this.mapClick();
}
3. 第三步:增加地图选点方法
mapClick = () => {
this.map.on('singleclick', (e) => {
// 获取当前点位坐标
let point = e.coordinate;
if(this.iconFeature){
// 将地图回中
// this.map.getView().setCenter(point);
// 将点位清除再绘制