我希望实现这个功能:当我拖动浅蓝色圆圈时,另一个圆圈将根据浅蓝色圆圈的位置改变半径,在Firefox中这个功能运作良好,但在Chrome中它的效果不是很好。当我拖动浅蓝色圆圈时,另一个圆圈的半径没有改变,但当我松开鼠标时,另一个圆圈的半径才发生变化。
<script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script>
<style>
#msg {
position: absolute;
z-index: 10;
left: 50%;
transform: translate(-50%, 5px);
background-color: rgba(40, 40, 40, .8);
padding: 10px;
color: #eee;
width: 350px;
text-align: center;
}
#marker {
width: 20px;
height: 20px;
border: 1px solid #088;
border-radius: 10px;
background-color: #0FF;
opacity: 0.5;
cursor: move;
}
</style>
</head>
<body>
<div id="map" class="map" tabindex="0"></div>
<div id="marker" title="Marker"></div>
<script type="text/javascript">
var pos = ol.proj.fromLonLat([0, 0]);
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [layer],
target: 'map',
view: new ol.View({
center: pos,
zoom: 2
})
});
var marker_el = document.getElementById('marker');
var marker = new ol.Overlay({
position: pos,
positioning: 'center-center',
element: marker_el,
stopEvent: false,
dragging: false
});
map.addOverlay(marker);
var vectorSource = new ol.source.Vector();
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
})
})
});
map.addLayer(vectorLayer);
var cir = new ol.geom.Circle(pos, 0);
var f = new ol.Feature(cir);
vectorSource.addFeature(f);
var dragPan;
map.getInteractions().forEach(function(interaction) {
if (interaction instanceof ol.interaction.DragPan) {
dragPan = interaction;
}
});
marker_el.addEventListener('mousedown', function(evt) {
dragPan.setActive(false);
marker.set('dragging', true);
console.info('start dragging');
});
map.on('pointerdrag', function(evt) {
if (marker.get('dragging') === true) {
marker.setPosition(evt.coordinate);
var dis = Math.abs(evt.coordinate[0]);
cir.setRadius(dis);
}
});
map.on('pointerup', function(evt) {
if (marker.get('dragging') === true) {
console.info('stop dragging');
dragPan.setActive(true);
marker.set('dragging', false);
}
});
</script>
</html>
示例为:示例。