OpenLayers - Welcome
A high-performance, feature-packed library for all your mapping needs.
openlayers.org
오픈레이어스에서 example과 api 보며 만들 수 있다.
비주얼 스튜디오로 서버켜서 확인 가능
<!DOCTYPE html>
<html>
<head>
<title>Accessible Map</title>
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet" />
<script src="https://openlayers.org/en/v4.6.5/build/ol-debug.js"></script>
<style>
#popup{
width: 150px;
}
</style>
</head>
<body>
<div id="map" class="map" tabindex="0"><div id="popup"></div></div>
<script>
//아이콘들
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([-0.1277583,51.5073509]).transform('EPSG:4326', 'EPSG:3857'),
name: '런던<br>위도51.5073509<br>경도-0.1277583',
});
var iconFeature1 = new ol.Feature({
geometry: new ol.geom.Point([2.3522219,48.856614]).transform('EPSG:4326', 'EPSG:3857'),
name: '파리<br>위도48.856614<br>경도2.3522219',
});
var iconFeature2 = new ol.Feature({
geometry: new ol.geom.Point([ 13.4081,52.5186]).transform('EPSG:4326', 'EPSG:3857'),
name: '베를린<br>위도52.5186<br>경도13.4081',
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png'
}))
});
iconFeature.setStyle(iconStyle);
iconFeature1.setStyle(iconStyle);
iconFeature2.setStyle(iconStyle);
// 화살표
var points = [
[-0.1277583,51.5073509],
[2.3522219,48.856614],
[13.4081,52.5186],
[-0.1277583,51.5073509]
];
var route = new ol.geom.LineString(points);
route.transform('EPSG:4326', 'EPSG:3857');
var routeFeature = new ol.Feature({
type: 'route',
geometry: route
});
var stylesMap = {
'route': function(feature) {
var geometry = feature.getGeometry();
var styles = [
// linestring
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
})
})
];
geometry.forEachSegment(function(start, end) {
var dx = end[0] - start[0];
var dy = end[1] - start[1];
var rotation = Math.atan2(dy, dx);
// arrows
styles.push(new ol.style.Style({
geometry: new ol.geom.Point(end),
image: new ol.style.Icon({
src: 'https://openlayers.org/en/v4.6.5/examples/data/arrow.png',
anchor: [0.75, 0.5],
rotateWithView: true,
rotation: -rotation
})
}));
});
return styles;
}
};
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [routeFeature]
}),
style: function(feature) {
const myStyle = stylesMap[feature.get('type')];
if (myStyle instanceof Function) {
return myStyle(feature);
}
return myStyle;
}
});
// 지도 설정
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
style: function(feature) {
return feature.get('style');
},
source: new ol.source.Vector({features: [iconFeature, iconFeature1, iconFeature2]})
}),
vectorLayer
],
target: document.getElementById('map'),
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: ol.proj.transform([-0.1277583,51.5073509], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
// 팝업 설정
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, -50]
});
map.addOverlay(popup);
// 팝업 클릭
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature;
});
if (feature) {
var coordinates = feature.getGeometry().getCoordinates();
popup.setPosition(coordinates);
$(element).attr('data-placement', 'top');
$(element).attr('data-html', true);
$(element).attr('data-content', feature.get('name'));
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
// 매개 변수를 사용하여 popover 함수를 호출하는 대신
// 사용자 정의하려는 팝 오버의 각 속성에 대해
// html 데이터 속성을 설정 한 다음 popover()매개 변수없이 호출
// $(element).popover({
// 'placement': 'top',
// 'html': true,
// 'content': feature.get('information')
// });
// change mouse cursor when over marker
map.on('pointermove', function(e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTarget().style.cursor = hit ? 'pointer' : '';
});
</script>
</body>
</html>
'플러그인' 카테고리의 다른 글
| dataTable 플러그인 (0) | 2021.05.02 |
|---|---|
| owlCarousel (0) | 2021.05.02 |
| echarts 차트 그리기 (0) | 2020.09.19 |