openlayers 지도 창 실현
5387 단어 openlayers지도.탄창
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>Ol3 popup</title>
<style type="text/css">
body, #map {
border: 0px;
margin: 0px;
padding: 0px;
padding: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-size: 13px;
}
.ol-popup {
display: none;
position: absolute;
background-color: white;
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
width: 200px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.popup-title{
font-weight: bold;
border-bottom:1px solid #cccccc;
padding: 5px 8px;
}
.popup-content{
padding: 5px 8px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 6px;
right: 6px;
}
.ol-popup-closer:after {
content: "✖";
}
</style>
<script type="text/javascript">
function init(){
var format = 'image/png';
var bounds = [73.4510046356223, 18.1632471876417,
134.976797646506, 53.5319431522236];
var vectorSource = new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/map/wms?service=WMS&version=1.1.0&request=GetMap&layers=map:capital&styles=&bbox=87.57607938302118,19.97015007757606,126.56705607814561,45.69385655384421&width=768&height=506&srs=EPSG:4326&format=application/openlayers',
params:{
'LAYERS':'capital',
'TILED':false
},
serverType:'geoserver'
});
var untiled = new ol.layer.Tile({
source: vectorSource
});
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var title = document.getElementById('popup-title');
var closer = document.getElementById('popup-closer');
closer.onclick = function(){
container.style.display = 'none';
closer.blur();
return false;
};
var overlay = new ol.Overlay({
element: container
});
var osmsource = new ol.source.OSM()
//console.log(osmsource.getProjection().getCode());
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}),
target: 'map',
layers: [new ol.layer.Tile({
source: osmsource, //
projection:ol.proj.getTransform("EPSG:3857", "EPSG:4326")
}),
untiled],
overlays: [overlay],
view: new ol.View({
center:[117,42],
projection:'EPSG:4326',
zoom:1
})
});
map.addOverlay(overlay);
map.getView().fit(bounds, map.getSize());
map.on('click', function(evt) {
var coordinate = evt.coordinate;
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
coordinate, 'EPSG:4326', 'EPSG:4326'));
overlay.setPosition(coordinate);
content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
'</code>';
container.style.display = 'block';
title.innerHTML = " ";
title.style.display = 'block';
map.getView().setCenter(coordinate);
});
}
</script>
</head>
<body onLoad="init()">
<div id="map">
<div id="popup" class="ol-popup">
<a href="#" rel="external nofollow" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-title" class="popup-title"></div>
<div id="popup-content" class="popup-content"></div>
</div>
</div>
</body>
</html>
효과 그림:이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Setting up everything to use openlayers이제부터는 바로 전 포스팅 마지막에 언급했듯이 html, css, js를 각각 분리해서 관리할 것이다. 파일들을 쪼개보자. 로 들어가서 라이브러리들을 다운받은 후, assets 라는 폴더를 만들어 이 안에 다운 받은...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.