Bing Maps v8 JS API

나는 사용자가지도에서 하나의 모양을 그리도록 허용하는 매우 단순한 Bing 맵 프로그램을 가지고 있습니다. 그러나 그림 도구와 모든 것이 설정되었지만 Bing의 이벤트는 보이지 않습니다. 올바른 방법 화재 -Bing Maps v8 JS API

그리기 시작 - 불을 내 그리기 도구를 변경할 때에 선 또는 변경 다각형

도면 중 - 내 그리기 도구를 변경 화재에 선 또는 다각형 중 하나

새로운 폴리곤을 그리기 시작할 때 기존의 폴리곤을 맵에서 지우고 싶지만 - t에서 getPrimitives 함수를 호출하면됩니다. 드로잉 관리자가 드로잉 모드를 지운 다음 드로잉 모드를 캐싱하여 드로잉 모드를 다시 설정 한 다음 드로잉 모드를 다시 설정하는 방법을 생각했지만 드로잉 관리자의 setDrawingMode 메서드는 드로잉을 다시 시작하여 전체 프로세스를 다시 트리거합니다 .

누구든지 이것을 극복하는 방법을 알고 있습니까?

출처

2017-05-05 Lee Francis Williams

모드를 클릭하면 그리기 시작 이벤트가 발생하는 것으로 보입니다. 팀이 그 점을 조사하게합니다.

그러나 수행 할 작업에는 잠재적 인 문제가 있습니다. 사용자가지도에서 다각형 그리기를 시작할 때 도면 관리자를 지우면 해당 다각형도지도에서 제거됩니다. 여러분이 할 수있는 것은 다각형 그리기를 끝내고 그것을 별도의 레이어로 이동 한 다음 드로잉 관리자에 영향을 미치지 않고 그 레이어를 지울 수 있다는 것입니다. 다각형 그리기에만 관심이있는 경우 그리기 도구와 버튼을 사용하여 직접 다룰 수 있으므로 그리기 관리자가 필요하지 않습니다. 예를 들면 다음과 같습니다

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script type='text/javascript'> 
    var map, baseLayer, drawingManager; 

    function GetMap() { 
     map = new Microsoft.Maps.Map('#myMap', { 
      credentials: 'YourBingMapsKey' 
     }); 

     //Load the DrawingTools module 
     Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function() { 
      //Create a base layer to add drawn shapes. 
      baseLayer = new Microsoft.Maps.Layer(); 
      map.layers.insert(baseLayer); 

      //Create an instance of the DrawingTools class and bind it to the map. 
      var tools = new Microsoft.Maps.DrawingTools(map); 

      //Show the drawing toolbar and enable editting on the map. 
      tools.showDrawingManager(function (manager) { 
       drawingManager = manager; 

       Microsoft.Maps.Events.addHandler(drawingManager, 'drawingEnded', function (e) { 
        //When use finisihes drawing a shape, removing it from the drawing layer and add it to the base layer. 
        var shapes = drawingManager.getPrimitives(); 

        if (shapes) { 
         drawingManager.clear(); 
         baseLayer.add(shapes); 
        } 
       }); 

       Microsoft.Maps.Events.addHandler(drawingManager, 'drawingChanging', function (e) { 
        //When the drawing is changing, clear the base layer. 
        baseLayer.clear(); 
       }); 
      }) 
     }); 
    } 
    </script> 
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script> 
</head> 
<body> 
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div> 
</body> 
</html>

시작하는 도면 관리자 및 사용자 정의 버튼없이이 작업을 수행 유사한 코드 샘플입니다 : 여기

http://bingmapsv8samples.azurewebsites.net/#DrawingTools_CreateShape는 도면 관리자를 사용하여 요구하고 무엇을 달성하는 코드 샘플입니다 다각형 그리기.

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script type='text/javascript'> 
    var map, baseLayer, tools, currentShape; 

    function GetMap() { 
     map = new Microsoft.Maps.Map('#myMap', { 
      credentials: 'YourBingMapsKey' 
     }); 

     //Create a base layer to add drawn shapes. 
     baseLayer = new Microsoft.Maps.Layer(); 
     map.layers.insert(baseLayer); 

     //Load the DrawingTools module. 
     Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function() { 
      //Create an instance of the DrawingTools class and bind it to the map. 
      tools = new Microsoft.Maps.DrawingTools(map); 

      Microsoft.Maps.Events.addHandler(tools, 'drawingChanging', function (e) { 
       //When the drawing is changing, clear the base layer. 
       baseLayer.clear(); 
      }); 


      //When the user presses 'esc', take the polygon out of edit mode and re-add to base map. 
      document.getElementById('myMap').onkeypress = function (e) { 
       if (e.charCode === 27) { 
        tools.finish(shapeDrawn); 
        currentShape = null; 
       } 
      }; 
     }); 
    } 

    function drawPolygon() { 
     //Stop any current drawing. 
     if (currentShape) { 
      tools.finish(shapeDrawn); 
      currentShape = null; 
     } 

     //Create a new polygon. 
     tools.create(Microsoft.Maps.DrawingTools.ShapeType.polygon, function (s) { 
      currentShape = s; 
     }); 
    } 

    function shapeDrawn(s) { 
     baseLayer.add(s); 
    } 
    </script> 
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script> 
</head> 
<body> 
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div><br /> 
    <input type="button" onclick="drawPolygon()" value="Draw Polygon" /> 
</body> 
</html>

출처

2017-05-05 16:38:06 rbrundritt

감사합니다. 지금이 구현을 사용하고 있습니다. –

Bing Maps v8 JS API

답변

관련 문제