openlayers 4.6.5 draw 기능 경도 540도 이상 안됨

Question

오픈레이어 4.6.5 사용중입니다.draw 기능을 이용해서 lineString을 그리고 있는데 기능 구현후에 테스트 중에 오류를 발견했는데 오픈레이어 버그인지 코드 문제인지 알 수 있을까요?오류 내용은 다음과 같습니다.경도 -540 ~ 540를 벗어난 선은 map zoom 2이상일 때 표출이 안 됨.다음은 코드입니다.--맵 생성 함수 function LoadMAP(){ var view &#61; new ol.View({ center: ol.proj.fromLonLat([130.41, 36.82]), zoom: 3 }); var mapLayer &#61; new ol.layer.Tile({ source: new ol.source.OSM() }); var vectorSource &#61; new ol.source.Vector(); var vectorLayer &#61; new ol.layer.Vector({ source: vectorSource, style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgb(170, 211, 223)' }) }) }); var lonLatCoordinates &#61; [[136.9, 44.8], [140.0, 44.8], [139.9, 42.8], [136.1, 42.8], [136.9, 44.8]]; var EastFeature &#61; new ol.Feature({ geometry: new ol.geom.Polygon([lonLatCoordinates]).transform('EPSG:4326', 'EPSG:3857') }); var lonLatCoordinates2 &#61; [[139.919540, 43.182910], [139.647826, 42.799183]]; var polyline &#61; new ol.Feature({ geometry: new ol.geom.LineString(lonLatCoordinates2).transform('EPSG:4326', 'EPSG:3857') }); var lineStyle &#61; new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(167, 169, 192, 1)', width: 3 }) }); polyline.setStyle(lineStyle); vectorSource.addFeature(EastFeature); vectorSource.addFeature(polyline); var map &#61; new ol.Map({ view: view, layers: [mapLayer,vectorLayer], target: 'map', pixelRatio: 1 }); var container &#61; document.getElementById('popup'); var content &#61; document.getElementById('popup-content'); var overlay &#61; new ol.Overlay({ element: container, autoPan: { animation: { duration: 250, positioning:'bottom-center' }, }, }); map.addOverlay(overlay); } --draw 함수 function drawDistance(map) { var sketch; var measureTooltipElement; var measureTooltip; var continueLineMsg &#61; 'Click to continue drawing the line'; var draw; var drawResult; var listener; var source &#61; new ol.source.Vector(); var measureLayer &#61; new ol.layer.Vector({ source: source, style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }) }) }); map.addLayer(measureLayer); var formatLength &#61; function(line) { var unitValue &#61; $(&#34;#unitSelect&#34;).val(); var length &#61; ol.Sphere.getLength(line); var output; if (unitValue &#61;&#61; &#34;km&#34;) { output &#61; (Math.round((length / 1000) * 100) / 100) &#43; ' ' &#43; 'KM'; } else { output &#61; (Math.round(((length / 1000) * 1.852) * 100) / 100) &#43; ' ' &#43; 'NM'; } return output; }; var draw &#61; new ol.interaction.Draw({ source: source, type: &#34;LineString&#34;, 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(); draw.on('drawstart', function(evt) { sketch &#61; evt.feature; var tooltipCoord &#61; evt.coordinate; listener &#61; sketch.getGeometry().on('change', function(evt) { var geom &#61; evt.target; var output&#61; formatLength(geom); tooltipCoord &#61; geom.getLastCoordinate(); measureTooltipElement.innerHTML &#61; output; measureTooltip.setPosition(tooltipCoord); }); }, this); draw.on('drawend', function(evt) { measureTooltipElement.className &#61; 'tooltip tooltip-static'; measureTooltip.setOffset([0, -7]); var geom &#61; evt.feature.getGeometry(); // 맵의 반복을 고려하여 좌표를 변환 var coords &#61; geom.getCoordinates(); var transformedCoords &#61; coords.map(function(coord) { var transCoord &#61; ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326'); var lon &#61; transCoord[0]; var lati &#61; transCoord[1]; return ol.proj.transform([lon, lati], 'EPSG:4326', 'EPSG:3857'); }); geom.setCoordinates(transformedCoords); var output &#61; formatLength(geom); var tooltipCoord &#61; geom.getLastCoordinate(); measureTooltipElement.innerHTML &#61; output; measureTooltip.setPosition(tooltipCoord); sketch &#61; null; }); function createMeasureTooltip() { if (measureTooltipElement) return; // 이미 생성되어 있으면 중복 생성 방지 measureTooltipElement &#61; document.createElement('div'); measureTooltipElement.className &#61; 'tooltip tooltip-measure'; measureTooltip &#61; new ol.Overlay({ element: measureTooltipElement, offset: [0, -15], positioning: 'bottom-center' }); map.addOverlay(measureTooltip); } }

openlayers 4.6.5 draw 기능 경도 540도 이상 안됨

0개의 답변

Q&A 목록