OpenLayers3를 사용하여 지도 오른쪽 클릭 menu_javascript 기술 추가

오른쪽 클릭 메뉴를 추가하려면 먼저 마우스 오른쪽 클릭 동작을 모니터링해야 합니다. 마우스가 html 요소에 있을 때 마우스 오른쪽 클릭 이벤트 이름이 contextmenu라는 것을 알고 있습니다. 마우스 오른쪽 버튼을 클릭하면 contextmenu 이벤트가 트리거됩니다. contextmenu 이벤트의 콜백 함수에서 해당 표시 메뉴 기능을 구현하면 됩니다.

그렇다면 openlayers에서는 이 이벤트를 지도에 추가하여 어디서부터 시작할까요? 먼저 우리는 openlayers 페이지를 초기화하는 과정을 이해해야 합니다.

openlayers 초기화 페이지 프로세스

Openlayers도 프런트 엔드 라이브러리이므로 html 사용과 확실히 분리될 수 없습니다. 예를 들어 먼저 페이지에 지도를 표시하는 html 요소, div 요소(id 속성이 다음과 같다고 가정)를 배치해야 합니다. "map"(map div라고 함)으로 설정하고 지도가 초기화될 때 이 요소를 지정합니다. Openlayers는 먼저 이 요소에 ol-viewport 클래스를 사용하여 크기가 동일하게 유지되는 div 요소를 생성합니다. 지도 div를 만든 다음 ol-viewport div에 div 요소를 만들고, 이 캔버스 요소에 요청된 지도를 렌더링하고, 두 번째로 ol-overlaycontainer 클래스가 있는 div 요소가 추가되어 오버레이를 배치합니다. ol-overlaycontainer-stopevent 클래스가 있는 div 요소가 추가될 예정입니다. 이는 주로 openlayer를 배치하기 위한 컨트롤입니다. 이전 기사의 시작 부분에서 사용자 정의 확장 컨트롤 추가에 대해 언급한 바 있으므로 여기서는 중점적으로 다루지 않겠습니다. 상세히.

최종 html dom 구조는 아래와 같습니다.

그림 1 형성된 DOM 구조

이 지도 div 요소에 이벤트를 추가한 다음 마우스 오른쪽 버튼을 클릭하여 메뉴를 팝업하는 것을 생각해 보겠습니다. 이 아이디어는 자연스럽고 실제로 실현될 수 있습니다. 그러나 다음 사항을 생각하고 최소한 가지고 있어야 합니다. 시작하기 전에 문제에 대한 전반적인 이해를 보여드리겠습니다. 메뉴가 나온 후 해당 지도의 위치를 ​​기반으로 특정 작업이 수행되는 경우가 많습니다. 그런 다음 컨텍스트 메뉴의 이벤트 개체에는 클릭이 발생한 화면 좌표가 포함되어 있습니다. 화면 좌표를 기준으로 지도에서 해당 좌표계의 좌표를 구하는 난이도를 비교하겠습니다.

어려움은 무엇인가요? 크게 세 가지 사항이 있습니다:

우선 이벤트 객체에 포함된 좌표는 전체 브라우저의 뷰포트, 페이지 또는 전체 화면을 기준으로 합니다.
둘째, 지도를 표시하는 요소의 크기와 위치가 무작위인 경우가 많습니다.
마지막으로, 화면의 좌표계와 지도의 좌표계가 완전히 다른 경우가 많습니다. 지도 요소에 대한 좌표를 지도 좌표계의 좌표로 변환하는 방법은 무엇입니까?

먼저 지도 div(지도를 포함하는 요소)를 기준으로 이벤트 좌표의 좌표를 가져온 다음 지도 div를 기준으로 한 좌표를 지도의 실제 좌표로 변환해야 합니다. 첫 번째 단계에서는 계산을 통해 얻을 수 있지만 두 번째 단계는 Openlayer를 통해 완료해야 합니다. 왜냐하면 Openlayer만이 지도의 좌표계를 가장 잘 알고 있으며 Openlayer에도 관련 기능이 있기 때문입니다. 다행스럽게도 openlayers에서는 위의 작업을 한 단계로 완료할 수 있으며 map.getEventCoordinate(event)라는 함수 하나만 필요합니다. 아래의 특정 구현에서 이 함수에 대해 자세히 설명하겠습니다.

어떻게 구현하는지 살펴보겠습니다.

마우스 우클릭 메뉴 상세 구현

편의상 기사의 코드는 JQuery를 사용합니다.

기사에 포함된 예제의 전체 코드는 내 GitHub에서 보거나 다운로드할 수 있습니다. 유용하다면 별표를 클릭하는 것을 잊지 마세요.

마우스 오른쪽 버튼 클릭 메뉴 기능을 단계별로 추가해 보겠습니다.

html 요소에 컨텍스트 메뉴 이벤트 추가

지도에서 해당 클릭 좌표를 가져옵니다.

지도의 해당 위치에 메뉴를 추가합니다.

html 요소에 컨텍스트 메뉴 이벤트 추가

html 요소의 마우스 오른쪽 버튼 이벤트를 contextmenu라고 합니다. 이 이벤트는 모든 주류 브라우저에서 지원됩니다. 여기서는 새로운 html 속성인 contextmenu를 혼동하지 마세요. 현재는 oncontextmenu만 사용합니다. 이벤트. 이 이벤트를 지도가 포함된 모든 html 요소에 바인딩할 수 있으며 openlayers는 좌표 변환 문제를 처리합니다. 아래와 같이 map.getViewport()는 openlayers가 페이지를 초기화할 때 생성된 ol-viewport 클래스의 div 요소, 즉 지도를 직접 포함하는 요소를 반환합니다. 브라우저에는 기본 오른쪽 클릭 메뉴가 있으므로 e.preventDefault();를 호출하여 기본 메뉴를 취소해야 합니다.

$(map.getViewport()).on("contextmenu", function(event){
  e.preventDefault();
  // 书写事件触发后的函数
});

지도에서 해당 클릭 좌표 가져오기

지도에서 해당 클릭 좌표를 얻으려면 다음과 같은 한 문장만 필요합니다.

var coordinate = map.getEventCoordinate(event);

      函数参数是 oncontextmenu 对应的事件对象，该函数包含对 map.getCoordinateFromPixel() 的调用，map.getCoordinateFromPixel() 参数为 ol.pixel，是一个坐标，数组格式[x, y]，其实现中又调用了 ol.vec.Mat4.multVec2()，该函数完成处理坐标转换的实际工作。

地图相应位置添加菜单

      这里我们结合 overlay 添加菜单，之前的文章介绍过 overlay，这里就不再具体展开了。首先，我们在 html 页面添加一个目录，具体的 css 样式可以自己设定，想看完整源码的可以到我的 GitHub 中查看或者下载完整的代码：

<div id="contextmenu_container" class="contextmenu">
  <ul>
    <li><a href="#">设置中心</a></li>
    <li><a href="#">添加地标</a></li>
    <li><a href="#">距离丈量</a></li>
  </ul>
</div>

使用这个 html 元素初始化一个 overlay，并将 overlay 添加到地图中：

var menu_overlay = new ol.Overlay({
  element: document.getElementById("contextmenu_container"),
  positioning: 'center-center'
});
menu_overlay.setMap(map);

接下来，我们就可以在鼠标右键菜单的事件回调函数中，根据获取的地图坐标位置，设置 overlay 的显示位置：

menu_overlay.setPosition(coordinate);

菜单隐藏

      当我们鼠标点击右键，菜单出现，但是我们不能让菜单总是显示在地图中，这时我们可以添加鼠标左键单击，菜单消失功能，或者当选择某项功能时，菜单消失。这个比较容易实现，只要一句便可以实现，放在鼠标左键事件的回调函数或者菜单功能执行函数中就行，如下：

menu_overlay.setPosition(undefined);

总结

      这篇文章中，主要讲了 openlayers 初始化页面地图元素的过程，并介绍了在地图上实现“鼠标右键菜单功能”，和隐藏菜单的实现。我们并没有对菜单中的条目绑定事件，因为我们的重点在于实现右键菜单，对于菜单的条目要绑定什么功能，和普通的 javascript 事件绑定并无二致，所以没有展开。