Openlayers 거리 면적 측정 실현
7697 단어 Openlayers측량 하 다.
CSS
.ol-tooltip {
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
color: white;
padding: 4px 8px;
opacity: 0.7;
white-space: nowrap;
font-size: 12px;
}
.ol-tooltip-measure {
opacity: 1;
font-weight: bold;
}
.ol-tooltip-static {
background-color: #ffcc33;
color: black;
border: 1px solid white;
}
.ol-tooltip-measure:before,
.ol-tooltip-static:before {
border-top: 6px solid rgba(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%;
}
.ol-tooltip-static:before {
border-top-color: #ffcc33;
}
구체 적 실현
let layer_1 =new ol.layer.Tile({
source: new ol.source.OSM()
});
let source = new ol.source.Vector();
let 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'
})
})
})
});
let map=new ol.Map({
layers: [
layer_1 ,vector
],
view: new ol.View({
center: [-11000000, 4600000],
zoom: 5,
}),
target: 'map'
});
let count=0;
let draw;
let sketch=new ol.Feature();
let listener;
let helpTooltipElement;
let helpTooltip;
let measureTooltipElement;
let measureTooltip;
let continuePolygonMsg=" ";
let continueLineMsg=" ";
createMeasureTooltip();
createHelpTooltip();
let pointerMoveHandler=function(evt){
if (evt.dragging) {
return;
}
/** @type {string} */
let helpMsg = 'Click to start drawing';
if (sketch) {
let geom = (sketch.getGeometry());
if (geom instanceof ol.geom.Polygon) {
helpMsg = continuePolygonMsg;
} else if (geom instanceof ol.geom.LineString) {
helpMsg = continueLineMsg;
}
}
helpTooltipElement.classList.remove('hidden');
};
map.on('pointermove', pointerMoveHandler);
map.getViewport().addEventListener('mouseout', function() {
});
let formatLength=function (line) {
let length = ol.sphere.getLength(line);
let output;
if(length>100){
output=(Math.round(length/1000*100)/100)+''+'km'
}else{
output=(Math.round(length*100)/100)+''+'m'
}
return output;
};
let formatArea=function (polygon) {
let area = ol.sphere.getArea(polygon);
let output;
if(area>10000){
output=(Math.round(area/1000000*100)/100)+''+'km<sup>2</sup>'
}else{
output=(Math.round(area*100)/100)+''+'m<sup>2</sup>'
}
return output;
};
function addInteraction(){
let type="Polygon";
draw=new ol.interaction.Draw({
source:source,
type: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)'
})
})
}),
snapTolerance:50
});
map.addInteraction(draw);
map.on('singleclick',function (evt) {
measureTooltip.setPosition(evt.coordinate);
if(count==0){
measureTooltipElement.innerHTML=' '
}else{
measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
measureTooltip.setOffset([0, -20]);
// unset sketch
sketch = null;
// unset tooltip so that a new one can be created
measureTooltipElement = null;
createMeasureTooltip();
//map.removeInteraction(draw);
}
createMeasureTooltip();
//
count++;
});
draw.on('drawstart',function (evt) {
sketch=evt.feature;
let tooltipCoord=evt.coordinate;
listener=sketch.getGeometry().on('change',function (evt) {
let geom=evt.target;
let output;
if(geom instanceof ol.geom.Polygon){
map.removeEventListener('singleclick');
output=formatArea(geom);
tooltipCoord=geom.getInteriorPoint().getCoordinates();
}else if(geom instanceof ol.geom.LineString){
output=formatLength(geom);
tooltipCoord=geom.getLastCoordinate();
}
measureTooltipElement.innerHTML = output;
measureTooltip.setPosition(tooltipCoord);
})
});
draw.on('drawend',
function() {
measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
measureTooltip.setOffset([0, -7]);
// unset sketch
sketch = null;
// unset tooltip so that a new one can be created
measureTooltipElement = null;
createMeasureTooltip();
map.removeInteraction('singleclick');
count=0;
ol.Observable.unByKey(listener);
});
}
function createHelpTooltip() {
if (helpTooltipElement) {
helpTooltipElement.parentNode.removeChild(helpTooltipElement);
}
helpTooltipElement = document.createElement('div');
helpTooltipElement.className = 'ol-tooltip hidden';
helpTooltip = new ol.Overlay({
element: helpTooltipElement,
offset: [15, 0],
positioning: 'center-left'
});
map.addOverlay(helpTooltip);
}
/**
* Creates a new measure tooltip
*/
function createMeasureTooltip() {
if (measureTooltipElement) {
measureTooltipElement.parentNode.removeChild(measureTooltipElement);
}
measureTooltipElement = document.createElement('div');
measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
measureTooltip = new ol.Overlay({
element: measureTooltipElement,
offset: [-30, -30],
positioning: 'center-center'
});
map.addOverlay(measureTooltip);
}
/**
* Let user change the geometry type.
*/
addInteraction();
참조 온라인 참조 주소
<link rel="stylesheeth" ref="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
거리 측정 시 각 선분 노드 에서 시작 점 까지 의 거 리 를 표시 하기 위해 singleclick 이 하나 더 생 겼 습 니 다.타 입 을 그립 니 다.Polygon 으로 죽 었 습 니 다.수정 하 세 요.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
React가 지원되지 않는 UI 라이브러리에서도 구성 요소로 그리기캔버스에서 그림과 도형을 그릴 수 있지만, 캔버스에서 Element을 그릴 수 있는 Overlay 기능이 있습니다. 다만, 오픈라이어스는 리액트를 지원하지 않기 때문에 일반적으로 설치하면 document.create...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.