Openlayers 지도 표시 그리 기
9094 단어 Openlayers지도 표시
1.표 시 된 안내
레이 블 은 쉽게 말 하면 아이콘,문자 등 방식 으로 우리 가 보 여주 고 싶 은 내용 을 지도 에 표시 하고 사람들 이 주목 하 는 주제 내용 을 강조 하여 사용자 에 게 개성 화 된 지도 서 비 스 를 제공 하 는 것 이다.
2.레이 블 방식
Openlayers 3 에 서 는 지리 적 위치 점 을 표시 하 는 두 가지 방법 이 있 습 니 다.하 나 는 벡터 그래 픽 을 만 든 다음 에 스타일 을 설정 하 는 방법 이 고 다른 하 나 는 Overlay 커버 층 을 만 드 는 방법 입 니 다.첫 번 째 방식 에 대해 본질 적 으로 벡터 대상 을 만 들 었 고 그 표현 형식 을 바 꾸 었 을 뿐 Style 스타일 로 포장 했다.두 번 째 방식 은 하나의 단독 커버 층 을 만 든 다음 에 그 속성 을 설정 하여 특정한 정 보 를 보 여 주 는 것 이다.어떤 방식 을 구체 적 으로 사용 하 는 지 는 구체 적 으로 보아 야 한다.
3.코드 구현
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../lib/jquery/jquery.js"></script>
<script src="../lib/ol/ol.js"></script>
<link href="../css/ol.css" rel="stylesheet" />
<style type="text/css">
body, html, div, ul, li,img
{
border:none;
padding:0px;
margin:0px;
}
#menu
{
width:100%;
height:20px;
padding:5px 10px;
left:10px;
font-size:14px;
font-family:" ";
}
.checkbox
{
margin:5px 15px;
}
.marker
{
width:20px;
height:20px;
border:1px solid #088;
border-radius:10px;
background-color:#0FF;
opacity:0.5;
}
.address
{
text-decoration:none;
color:#aa3300;
font-size:14px;
font-weight:bold;
text-shadow:black 0.1em 0.1em 0.2em;
}
</style>
<script type="text/javascript">
$(function () {
//
var beijing = ol.proj.fromLonLat([116.28, 39.54]);
//
var wuhan = ol.proj.fromLonLat([114.21,30.37]);
//
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source:new ol.source.OSM()
})
],
view: new ol.View({
center: beijing,
zoom: 6,
minZoom:2
})
});
//
var createLabelStyle = function (feature) {
//
return new ol.style.Style({
// ICON
image: new ol.style.Icon({
//
anchor: [0.5, 60],
//
anchorOrigin: 'top-right',
//X ：
anchorXUnits: 'fraction',
//Y ：
anchorYUnits: 'pixels',
//
offsetOrigin: 'top-right',
//
opacity: 0.75,
//
src: '../images/label/blueIcon.png'
}),
//
text: new ol.style.Text({
//
textAlign: 'center',
//
textBaseline: 'middle',
//
font: 'normal 14px ',
//
text: feature.get('name'),
//
fill: new ol.style.Fill({
color: '#aa3300'
}),
//
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
})
})
});
};
//
var iconFeature = new ol.Feature({
//
geometry: new ol.geom.Point(beijing),
//
name: ' ',
//
population: 2115
});
//
iconFeature.setStyle(createLabelStyle(iconFeature));
//
var vectorSource = new ol.source.Vector({
//
features:[iconFeature]
});
//
var vectorLayer = new ol.layer.Vector({
//
source:vectorSource
});
// map
map.addLayer(vectorLayer);
//
var marker = new ol.Overlay({
//
position: wuhan,
//
positioning: 'center-center',
//
element: document.getElementById('marker'),//ToDo JQuery $('#marker')
//
stopEvent:false
});
// map
map.addOverlay(marker);
// title
marker.getElement().title = ' ';
//
var text = new ol.Overlay({
//
position: wuhan,
//
element: document.getElementById('address')
});
// map
map.addOverlay(text);
// title
text.getElement().innerText = marker.getElement().title;
//
map.on('click', function (evt) {
//
var type = $('input[name="label"]:checked').val();
//
var point = evt.coordinate;
// ，
if (type == 'vector') {
addVectorLabel(point);
} else if (type == 'overlay') {
addOverlayLabel(point);
}
});
//
function addVectorLabel(coordinate) {
//
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(coordinate),
name: ' '
});
//
newFeature.setStyle(createLabelStyle(newFeature));
//
vectorSource.addFeature(newFeature);
}
//
function addOverlayLabel(coordinate) {
// div
var elementDiv = document.createElement('div');
// div
elementDiv.className = 'marker';
// div title
elementDiv.title = ' ';
// id label div
var overlay = document.getElementById('label');
// div overlay
overlay.appendChild(elementDiv);
// a
var elementA = document.createElement('a');
// a
elementA.className = 'address';
// a
elementA.href = '#';
// a
setInnerText(elementA, elementDiv.title);
// a div
elementDiv.appendChild(elementA);
//
var newMarker = new ol.Overlay({
//
position: coordinate,
//
positioning: 'center-center',
//
element: elementDiv,
//
stopEvent:false
});
// map
map.addOverlay(newMarker);
//
var newText = new ol.Overlay({
//
position: coordinate,
//
element:elementA
});
// map
map.addOverlay(newText);
}
//
function setInnerText(element,text) {
if (typeof element.textContent == 'string') {
element.textContent = text;
} else {
element.innerText = text;
}
}
});
</script>
</head>
<body>
<div id="menu">
<label class="checkbox">
<input type="radio" name="label" value="vector" checked="checked" />
Vector Label
</label>
<label class="checkbox">
<input type="radio" name="label" value="overlay" />
Overlay Label
</label>
</div>
<div id="map"></div>
<div id="label" style="display:none">
<div id="marker" class="marker" title="Marker">
<a class="address" id="address" target="_blank" href="http://www.openlayers.org"> </a>
</div>
</div>
</body>
</html>페이지 초기 화
첫 번 째 체크 단 추 를 선택 하고 맵 페이지 의 어느 곳 에서 든 클릭 하면 벡터 레이 블 이 추 가 됩 니 다.
두 번 째 체크 단 추 를 선택 하면 페이지 의 임의의 곳 에서 누 르 면 덮어 쓰기 레이 블 을 추가 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
React가 지원되지 않는 UI 라이브러리에서도 구성 요소로 그리기캔버스에서 그림과 도형을 그릴 수 있지만, 캔버스에서 Element을 그릴 수 있는 Overlay 기능이 있습니다. 다만, 오픈라이어스는 리액트를 지원하지 않기 때문에 일반적으로 설치하면 document.create...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
