Openlayersは距離面積測定を実現します。
7682 ワード
本論文の実例はOpenlayersの距離面積測定を実現する具体的なコードを共有しています。
CSS
オンラインアドレス
絵を描くタイプはPolygonと書いています。自分で直してください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
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と書いています。自分で直してください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。