openlayers 지도 에 영역 부상 창 을 그 려 서 마 우 스 를 따라 이동 합 니 다.

오늘 은 openlayers 를 기반 으로 지도 에 영역 을 그립 니 다. 마우스 가 영역 내 에 팝 업 표시 창 을 뜨 고 표시 창 이 마우스 의 이동 에 따라 이동 하 는 것 을 실현 합 니 다.나 는 ol. Overlay 방식 을 채택 했다. 우선 overlay 를 새로 추가 했다.

function addOverlay(center){
	document.getElementById('overlay').style.display = "block";
	//   overlayLayer      ，         
	overlayLayer = new ol.Overlay({
		element: document.getElementById('overlay'),
		position: center,
		positioning: 'center-center',
		stopEvent: false
	});
	map.addOverlay(overlayLayer); 
}
//           
map.on('pointermove', function(evt) {
	var pixel = map.getEventPixel(evt.originalEvent);
	overlayMove(evt.coordinate, pixel)
})
//    ol.Overlay
function moveOverlay(coorC,pixel){
	if(!overlayLayer){
		addOverlay(coorC)
	}
	var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
		return feature;
	});
	if (feature) {
		if ('        ') {
			overlayLayer.getElement().innerHTML = '        '
			overlayLayer.setPosition(coorC)
		}
	}
}

해결 ~ ~, 향 이 안 좋아!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

React가 지원되지 않는 UI 라이브러리에서도 구성 요소로 그리기

캔버스에서 그림과 도형을 그릴 수 있지만, 캔버스에서 Element을 그릴 수 있는 Overlay 기능이 있습니다. 다만, 오픈라이어스는 리액트를 지원하지 않기 때문에 일반적으로 설치하면 document.create...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다