OpenLayers 3 측정 기능 실현
12908 단어 OpenLayers3측량 하 다.
1.머리말
측정 기능 은 면적 의 측정 과 길이 의 측정 을 실현 한다.마우스 로 영역 과 길 이 를 그립 니 다.OpenLayers 3 프레임 워 크 는 측정 컨트롤 을 제공 하지 않 았 으 나 해당 하 는 인 터 페 이 스 를 제공 하 였 으 며 기하학 적 대상 의 해당 인 터 페 이 스 를 바탕 으로 도형 그리 기 기능 과 결합 하여 이 루어 져 야 합 니 다.
2.사고의 실현
(1)새 웹 페이지 를 만 들 고 openlayers 3 개발 라 이브 러 리,jQuery 라 이브 러 리 와 boottstrap 라 이브 러 리 를 참조 하 며 앞 에 지 도 를 표시 하 는 글 을 참조 하여 OSM 기와 그림 을 불 러 옵 니 다.
(2)지도 용기 에 측정 유형 선택 컨트롤 을 만 들 고 거리 측정 과 면적 측정 을 선택한다.
(3)코드 를 작성 하여 측정 기능 을 실현 합 니 다.
3.구현 코드
html 주요 코드
<div id="map">
<div id="menu">
<label> ：</label>
<select id="type">
<option value="length"> </option>
<option value="area"> </option>
</select>
<label class="checkbox"><input type="checkbox" id="geodesic"> </label>
</div>
</div>
#menu {
float: left;
position: absolute;
bottom: 10px;
left: 10px;
z-index: 2000;
}
.checkbox {
left: 20px;
}
/* */
.tooltip {
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
color: white;
padding: 4px 8px;
opacity: 0.7;
white-space: nowrap;
}
.tooltip-measure {
opacity: 1;
font-weight: bold;
}
.tooltip-static {
background-color: #ffcc33;
color: black;
border: 1px solid white;
}
.tooltip-measure::before,
.tooltip-static::before {
border-top: 6px solid rgb(0, 0, 0, 0.5);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
content: "";
position: absolute;
bottom: -6px;
margin-left: -7px;
left: 50%;
}
.tooltip-static::before {
border-top-color: #ffcc33;
}위의 코드 는 boottstrap 라 이브 러 리 와 결합 하여 거품 알림 상자 형식 으로 현재 측정 결 과 를 표시 하고 위의 스타일 은 각각 두 가지 알림 상자 의 스타일 을 설정 합 니 다.
4.측정 기능 을 실현 하 는 핵심 코드
(1)먼저 지도 에 측정 기능 의 그리 기 층,즉 벡터 층 을 불 러 오 면 우리 가 그림 을 그 리 는 것 과 같 고 종이 로 그림 을 그 려 야 한다.이곳 의 벡터 층 은 우리 의 종이 에 해당 한다.코드 는 다음 과 같 습 니 다:
//
var source = new ol.source.Vector(); //
var vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({ //
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)' //
}),
stroke: new ol.style.Stroke({
color: '#ffcc33', //
width: 2 //
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
map.addLayer(vector);4.1 addInteraction 함수 가 그래 픽 측정 을 실현 하 는 코드:
/**
* （ ）
* @param {Event} e Change event.
*/
typeSelect.onchange = function(e) {
map.removeInteraction(draw); //
addInteraction(); //
};
addInteraction(); // ，
var geodesicCheckbox = document.getElementById('geodesic'); //
var typeSelect = document.getElementById('type'); //
var draw; // global so we can remove it later
/**
*
*/
function addInteraction() {
var type = (typeSelect.value == 'area' ? 'Polygon' : 'LineString');
draw = new ol.interaction.Draw({
source: source, //
type: /** @type {ol.geom.GeometryType} */ (type), //
style: new ol.style.Style({ //
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 2
}),
image: new ol.style.Circle({
radius: 5,
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.7)'
}),
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
})
})
})
});
map.addInteraction(draw);
createMeasureTooltip(); //
createHelpTooltip(); //
var listener;
//
draw.on('drawstart',
function(evt) {
// set sketch
sketch = evt.feature; //
/** @type {ol.Coordinate|undefined} */
var tooltipCoord = evt.coordinate; //
// change ， ，
listener = sketch.getGeometry().on('change', function(evt) {
var geom = evt.target; //
var output;
if (geom instanceof ol.geom.Polygon) {
output = formatArea( /** @type {ol.geom.Polygon} */ (geom)); //
tooltipCoord = geom.getInteriorPoint().getCoordinates(); //
} else if (geom instanceof ol.geom.LineString) {
output = formatLength( /** @type {ol.geom.LineString} */ (geom)); //
tooltipCoord = geom.getLastCoordinate(); //
}
measureTooltipElement.innerHTML = output; //
measureTooltip.setPosition(tooltipCoord); //
});
}, this);
//
draw.on('drawend',
function(evt) {
measureTooltipElement.className = 'tooltip tooltip-static'; //
measureTooltip.setOffset([0, -7]);
// unset sketch
sketch = null; //
// unset tooltip so that a new one can be created
measureTooltipElement = null; //
createMeasureTooltip(); //
ol.Observable.unByKey(listener);
}, this);
}먼저 그림 컨트롤(ol.interaction.draw)을 불 러 옵 니 다.즉,우리 의 펜 입 니 다.예제 컨트롤 을 할 때 현재 그림 요소 의 스타일 을 설정 한 다음 에 createHelpTooltop()과 createMeasureTooltip()을 각각 호출 하여 도움말 정보 알림 상자 와 측정 도구 알림 상자 대상 을 만 듭 니 다.마지막 으로 그림 컨트롤 대상 의 draw start 와 draw end 이 벤트 를 연결 하여 그림 측정 기능 을 실현 합 니 다.그 중에서 drawstart 이벤트 처리 함수 에서 이벤트 대상 에서 현재 그 려 진 요소(sketch)를 얻 고 요 소 를 그 리 는 기하학 적 대상 을 통 해 change 사건 을 연결 합 니 다.이벤트 감청 의 기하학 적 대상 유형 에 따라 선 또는 다각형(ol.geom.Polygon 또는 ol.geom.LineString)입 니 다.formatArea()와 formatLength()를 호출 하여 출력 측정 한 면적 값 이나 길 이 를 계산 합 니 다.
4.2 알림 상자 의 코드 만 들 기:
/**
* （tooltip）
*/
function createHelpTooltip() {
if (helpTooltipElement) {
helpTooltipElement.parentNode.removeChild(helpTooltipElement);
}
helpTooltipElement = document.createElement('div');
helpTooltipElement.className = 'tooltip hidden';
helpTooltip = new ol.Overlay({
element: helpTooltipElement,
offset: [15, 0],
positioning: 'center-left'
});
map.addOverlay(helpTooltip);
}
/**
* （tooltip）
*/
function createMeasureTooltip() {
if (measureTooltipElement) {
measureTooltipElement.parentNode.removeChild(measureTooltipElement);
}
measureTooltipElement = document.createElement('div');
measureTooltipElement.className = 'tooltip tooltip-measure';
measureTooltip = new ol.Overlay({
element: measureTooltipElement,
offset: [0, -15],
positioning: 'bottom-center'
});
map.addOverlay(measureTooltip);
}Openlayers 3 의 ol.Overlay 를 기반 으로 도움말 정보 알림 상자 와 측정 도구 알림 상 자 를 만 듭 니 다.각각 createHelpTooltip()과 createMeasureTooltip()을 통 해 도움말 정보 알림 상자 와 측정 도구 알림 상 자 를 만 듭 니 다.ol.Overlay j 는 중첩 층 대상 과 대상 용기(div 층)를 동적 으로 만 들 고 중첩 층 대상 을 지도 용기 에 추가 합 니 다.
4.3 길이 와 면적 을 계산 하 는 코드:
/**
*
* @param {ol.geom.LineString} line
* @return {string}
*/
var formatLength = function(line) {
var length;
if (geodesicCheckbox.checked) { //
var coordinates = line.getCoordinates(); //
length = 0;
var sourceProj = map.getView().getProjection(); //
// ，
for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) {
var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');
var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326');
length += wgs84Sphere.haversineDistance(c1, c2);
}
} else {
length = Math.round(line.getLength() * 100) / 100; //
}
var output;
if (length > 100) {
output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km'; // KM
} else {
output = (Math.round(length * 100) / 100) + ' ' + 'm'; //m
}
return output; //
};
/**
*
* @param {ol.geom.Polygon} polygon
* @return {string}
*/
var formatArea = function(polygon) {
var area;
if (geodesicCheckbox.checked) { //
var sourceProj = map.getView().getProjection(); //
var geom = /** @type {ol.geom.Polygon} */ (polygon.clone().transform(sourceProj, 'EPSG:4326')); // EPSG:4326
var coordinates = geom.getLinearRing(0).getCoordinates(); //
area = Math.abs(wgs84Sphere.geodesicArea(coordinates)); //
} else {
area = polygon.getArea(); //
}
var output;
if (area > 10000) {
output = (Math.round(area / 1000000 * 100) / 100) + ' ' + 'km<sup>2</sup>'; // KM
} else {
output = (Math.round(area * 100) / 100) + ' ' + 'm<sup>2</sup>'; //m
}
return output; //
};
addInteraction(); // ， 위의 코드 는 formatLength()와 formatArea()를 통 해 출력의 길이 와 면적 을 각각 계산한다.길이 값 이나 면적 값 을 계산 할 때 두 가지 방법 으로 계산 할 수 있다.하 나 는 측지 학 의 방법 으로 데이터 의 투영 좌표 계 를 바탕 으로 계산 하 는 것 이 고,다른 하 나 는 기하학 적 대상 이나 다각형 대상 을 호출 하 는 방법 으로 직접 값 을 얻 는 것 이다.
(3)그림 을 그리 기 시 작 했 습 니 다.각각 map 대상 으로 마우스 이동 이벤트(pointermove)와 마우스 제거 이벤트(mouseout)를 연결 합 니 다.
4.4 맵 마우스 이동 이벤트 의 코드 추가:
/**
*
* @type {string}
*/
var continuePolygonMsg = ' ';
/**
*
* @type {string}
*/
var continueLineMsg = ' ';
/**
*
* @param {ol.MapBrowserEvent} evt
*/
var pointerMoveHandler = function(evt) {
if (evt.dragging) {
return;
}
/** @type {string} */
var helpMsg = ' '; //
//
if (sketch) {
var geom = (sketch.getGeometry());
if (geom instanceof ol.geom.Polygon) {
helpMsg = continuePolygonMsg; //
} else if (geom instanceof ol.geom.LineString) {
helpMsg = continueLineMsg; //
}
}
helpTooltipElement.innerHTML = helpMsg; //
helpTooltip.setPosition(evt.coordinate); //
$(helpTooltipElement).removeClass('hidden'); //
};
map.on('pointermove', pointerMoveHandler); // ，
// ，
$(map.getViewport()).on('mouseout', function() {
$(helpTooltipElement).addClass('hidden');
});마우스 이동 이벤트(pointermove)는 리 셋 함수 에서 사용자 가 선택 한 측정 유형 에 따라 팝 업 창 에 도움말 알림 정 보 를 표시 하 는 동시에 지도 용기 에 마우스 제거 이벤트(mouseout)를 연결 합 니 다.이 이벤트 가 발생 한 후 그림자 숨 김 알림 상자 입 니 다.
5.효과 실현
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenLayers 3 로 딩 상용 컨트롤 사용 방법 상세 설명지도 컨트롤 은 지도 크기 조정,전체 화면,좌표 표시 컨트롤 등 으로 우리 가 지 도 를 조작 하 는 데 편리 합 니 다.OpenLayers 3 은 지도 내 비게 이 션,비례 자,매의 눈,측정 도구 등 자주 사용 하...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
