Openlayers描画地図の表示
8835 ワード
本論文の例では、Openlayersの地図表示の具体的なコードを共有します。参考にしてください。具体的な内容は以下の通りです。
1、表示の概要
表示の簡単な点はアイコン、文字などの方式で私達の展示したい内容を地図の上で表示して、重点的に人々の関心を持つ特定のテーマの内容を際立たせて、それによってユーザーのために個性的な地図のサービスを提供します。
2、表示方式
Openlayers 3には地理的位置点を表示する方法が二つあります。ベクトルレイヤーを作成してそのスタイルを設定する方法と、Overlayカバー層を作成する方法があります。第一の方式に対して、本質的に作成されたのはまだベクトルオブジェクトで、その表現形式を交換しただけで、スタイルで包装します。第二の方法は、個々のカバー層を作成し、属性を設定することによって、いくつかの情報を表示することである。具体的にどの方式を使うかは具体的に見てみます。
3、コード実現
初期化ページ
最初のラジオボタンを選択して、地図ページのどこをクリックしても、ベクトル表示を追加します。
第二のラジオボタンを選択すると、ページの任意の場所をクリックし、上書き表示を追加します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
1、表示の概要
表示の簡単な点はアイコン、文字などの方式で私達の展示したい内容を地図の上で表示して、重点的に人々の関心を持つ特定のテーマの内容を際立たせて、それによってユーザーのために個性的な地図のサービスを提供します。
2、表示方式
Openlayers 3には地理的位置点を表示する方法が二つあります。ベクトルレイヤーを作成してそのスタイルを設定する方法と、Overlayカバー層を作成する方法があります。第一の方式に対して、本質的に作成されたのはまだベクトルオブジェクトで、その表現形式を交換しただけで、スタイルで包装します。第二の方法は、個々のカバー層を作成し、属性を設定することによって、いくつかの情報を表示することである。具体的にどの方式を使うかは具体的に見てみます。
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>初期化ページ
最初のラジオボタンを選択して、地図ページのどこをクリックしても、ベクトル表示を追加します。
第二のラジオボタンを選択すると、ページの任意の場所をクリックし、上書き表示を追加します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。