여기에 드래그 가능하고 편집 가능한 반지름 지 셰이프 (예 : 서클)

이 코드를 수정하여 원을 드래그 가능하고 편집 가능한 반지름으로 만들려면 도움이 필요합니다.여기에 드래그 가능하고 편집 가능한 반지름 지 셰이프 (예 : 서클)

예 : 사용자는 서클을 다른 위치로 드래그하여 반경을 변경할 수 있어야합니다.

이 기능을 활성화하기 위해 매개 변수 또는 값을 전달할 수있는 옵션이 있는지 확실하지 않으므로 어느 것이 나를 도와 줄 수 있다면 정말 큰 도움이 될 것입니다.

미리 감사드립니다. 원 개체를 끌어 시작할 때

function addCircleToMap(map){ 
 
    map.addObject(new H.map.Circle(
 
    // The central point of the circle 
 
    {lat:36.178699, lng:-115.146171}, 
 
    // The radius of the circle in meters 
 
    1000, 
 
    { 
 
     style: { 
 
     strokeColor: 'rgba(55, 85, 170, 0.6)', // Color of the perimeter 
 
     lineWidth: 2, 
 
     fillColor: 'rgba(0, 128, 0, 0.7)' // Color of the circle 
 
     } 
 
    } 
 
)); 
 
} 
 

 

 
//Step 1: initialize communication with the platform 
 
var platform = new H.service.Platform({ 
 
    app_id: 'DemoAppId01082013GAL', 
 
    app_code: 'AJKnXv84fjrb0KIHawS0Tg', 
 
    useCIT: true, 
 
    useHTTPS: true 
 
}); 
 
var defaultLayers = platform.createDefaultLayers(); 
 

 
//Step 2: initialize a map - this map is centered over las vegas 
 
var map = new H.Map(document.getElementById('map'), 
 
    defaultLayers.normal.map,{ 
 
    center: {lat:36.178699, lng:-115.146171}, 
 
    zoom: 13 
 
}); 
 

 
//Step 3: make the map interactive 
 
// MapEvents enables the event system 
 
// Behavior implements default interactions for pan/zoom (also on mobile touch environments) 
 
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 
 

 
// Create the default UI components 
 
var ui = H.ui.UI.createDefault(map, defaultLayers); 
 

 
// Now use the map as required... 
 
addCircleToMap(map);

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="initial-scale=1.0, width=device-width" /> 
 
<link rel="stylesheet" type="text/css" href="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.css" /> 
 
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-core.js"></script> 
 
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-service.js"></script> 
 
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.js"></script> 
 
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-mapevents.js"></script> 
 

 
</head> 
 
<body> 
 
    <div id="map" style="width: 100%; height: 400px; background: grey" /> 
 

 
</body> 
 
</html>

출처

2017-10-16 suman mainali

이 HERE map API에 따르면, 당신은 기본지도의 기본 draggability을 해제해야합니다 원 드래그하는 동안

map.addEventListener('dragstart', (ev) => { 
    const target = ev.target; 
    if (target instanceof H.map.Circle) { 
     behavior.disable(); 
    } 
}, false);

을, 당신은 필요 드래그 이벤트를 듣고 서클의 위치를 이동합니다.

map.addEventListener('drag', (ev) => { 
    const target = ev.target, 
     pointer = ev.currentPointer; 
    if (target instanceof H.map.Circle) { 
     target.setCenter(map.screenToGeo(pointer.viewportX, pointer.viewportY)); 
    } 
}, false);

드래그를 마친 후에는 기본 맵의 기본 드래그 기능을 다시 활성화해야합니다.

map.addEventListener('dragend', (ev) => { 
    const target = ev.target; 
    if (target instanceof H.map.Circle) { 
     behavior.enable(); 
    } 
}, false);

당신은 당신의 원 객체에 setRadius를 호출하여 원 반경을 조정할 수 있습니다.

출처

2018-01-28 21:22:16

여기에 드래그 가능하고 편집 가능한 반지름 지 셰이프 (예 : 서클)

답변

관련 문제