Openlayers實(shí)現(xiàn)圖形繪制
更新時(shí)間：2020年09月28日 11:46:30 作者：桃李不言_下自成蹊
這篇文章主要為大家詳細(xì)介紹了Openlayers實(shí)現(xiàn)圖形繪制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Openlayers實(shí)現(xiàn)圖形繪制的具體代碼，供大家參考，具體內(nèi)容如下
1、新建一個(gè)html頁(yè)面，引入ol.js文件，然后在body中創(chuàng)建一個(gè)div標(biāo)簽、label標(biāo)簽和一個(gè)select下拉選項(xiàng)卡；
2、代碼實(shí)現(xiàn)
<!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/ol/ol.js"></script>
<script type="text/javascript">
window.onload = function () {
//獲取下拉列表框
var typeSelect = document.getElementById('type');
//定義一個(gè)用來(lái)接收繪制對(duì)象的對(duì)象，方便以后對(duì)繪制對(duì)象進(jìn)行添加、移除等操作
var draw;
//初始化地圖對(duì)象
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
//初始化矢量數(shù)據(jù)源對(duì)象
//wrapX:Wrap the world horizontally. Default is true.
//For vector editing across the -180° and 180° meridians to work properly, this should be set to false
var source = new ol.source.Vector({ wrapX: false });
//實(shí)例化矢量數(shù)據(jù)圖層
var vector = new ol.layer.Vector({
//數(shù)據(jù)源
source: source,
//樣式
style: new ol.style.Style({
//樣式填充
fill: new ol.style.Fill({
//填充顏色
color: 'rgba(37,241,239,0.2)'
}),
//筆觸
stroke: new ol.style.Stroke({
//筆觸顏色
color: '#264df6',
//筆觸寬度
width:2
}),
//圖形樣式，主要適用于點(diǎn)樣式
image: new ol.style.Circle({
//半徑大小
radius: 7,
//填充
fill: new ol.style.Fill({
//填充顏色
color: '#e81818'
})
})
})
});
//將矢量圖層加載到map中
map.addLayer(vector);
//添加繪圖交互的函數(shù)
function addInteraction() {
//獲取當(dāng)前選擇的繪圖類型
var value = typeSelect.value;
//如果當(dāng)前選擇的繪圖類型不為"None"的話，則進(jìn)行相應(yīng)繪圖操作
//如果當(dāng)前選擇的繪圖類型為"None"的話，則清空矢量數(shù)據(jù)源
if (value !== 'None') {
//如果當(dāng)前的矢量數(shù)據(jù)源為空的話，則重新創(chuàng)建和設(shè)置數(shù)據(jù)源
//因?yàn)楫?dāng)你選擇的繪圖類型為"None"時(shí)，會(huì)清空數(shù)據(jù)源
if (source == null) {
source = new ol.source.Vector({ wrapX: false });
vector.setSource(source);
}
//geometryFunction變量，用來(lái)存儲(chǔ)繪制圖形時(shí)的回調(diào)函數(shù)
//maxPoints變量，用來(lái)存儲(chǔ)最大的點(diǎn)數(shù)量
var geometryFunction, maxPoints;
//如果當(dāng)前選擇的繪圖類型是"Square"的話，則將value設(shè)置為Circle
//然后調(diào)用createRegularPolygon()方法
if (value === 'Square') {
value = 'Circle';
//Create a geometryFunction for type: 'Circle'
//that will create a regular polygon with a user specified number of sides and start angle instead of an ol.geom.
//根據(jù)圓來(lái)創(chuàng)建一個(gè)四邊形
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
} else if (value === 'Rectangle') {
//如果當(dāng)前選擇的繪圖類型是"Square"的話，則將value設(shè)置為L(zhǎng)ineString
value = 'LineString';
//設(shè)置最大點(diǎn)數(shù)為2
maxPoints = 2;
geometryFunction = function (coordinates, geometry) {
//如果geometry對(duì)象不存在或者為空，則創(chuàng)建
if (!geometry) {
geometry = new ol.geom.Polygon(null);
}
//開始點(diǎn)的坐標(biāo)
var start = coordinates[0];
//結(jié)束點(diǎn)的坐標(biāo)
var end = coordinates[1];
//根據(jù)開始坐標(biāo)和結(jié)束坐標(biāo)設(shè)置繪圖點(diǎn)坐標(biāo)
geometry.setCoordinates([
[start, [start[0], end[1]], end, [end[0], start[1]], start]
]);
return geometry;
};
}
//將交互繪圖對(duì)象賦給draw對(duì)象
//初始化交互繪圖對(duì)象
draw = new ol.interaction.Draw({
//數(shù)據(jù)源
source: source,
//繪制類型
type: value,
//回調(diào)函數(shù)
//Function that is called when a geometry's coordinates are updated
geometryFunction: geometryFunction,
//最大點(diǎn)數(shù)
maxPoints: maxPoints
});
//將draw對(duì)象添加到map中，然后就可以進(jìn)行圖形繪制了
map.addInteraction(draw);
} else {
//清空矢量數(shù)據(jù)源
source = null;
//設(shè)置矢量圖層的數(shù)據(jù)源為空
vector.setSource(source);
}
}
//當(dāng)繪制類型下拉列表框的選項(xiàng)發(fā)生改變時(shí)執(zhí)行
typeSelect.onchange = function (e) {
//從map中移除交互繪圖對(duì)象
//如果不移除，則會(huì)在下拉列表框選項(xiàng)發(fā)生改變時(shí)再次進(jìn)行繪制時(shí)，保留上一次的draw對(duì)象
map.removeInteraction(draw);
//執(zhí)行添加繪圖交互的函數(shù)
addInteraction();
};
//添加繪圖交互的函數(shù)
//此處是為保證刷新頁(yè)面后，仍然能夠根據(jù)下拉列表框框的選項(xiàng)進(jìn)行圖形繪制
addInteraction();
};
</script>
</head>
<body>
<div id="menu">
<label>幾何圖形繪制：</label>
<select id="type">
<option value="None">無(wú)</option>
<option value="Point">點(diǎn)</option>
<option value="LineString">線</option>
<option value="Polygon">多邊形</option>
<option value="Circle">圓</option>
<option value="Square">正方形</option>
<option value="Rectangle">長(zhǎng)方形</option>
</select>
</div>
<div id="map"></div>
</body>
</html>
3、結(jié)果展示
繪制點(diǎn)圖形
繪制線圖形
繪制多邊形
繪制圓形
繪制正方形
繪制矩形
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
gameboy網(wǎng)頁(yè)闖關(guān)游戲(riddle webgame)--仿微信聊天的前端頁(yè)面設(shè)計(jì)和難點(diǎn)
本文講如何在網(wǎng)頁(yè)端實(shí)現(xiàn)一個(gè)仿微信的聊天窗口界面, 以及其中涉及到的一些技術(shù)點(diǎn). 對(duì)gameboy闖關(guān)游戲相關(guān)知識(shí)感興趣的朋友參考下2016-02-02
這篇文章主要介紹了js實(shí)現(xiàn)圖片翻書效果,代碼簡(jiǎn)單，效果很棒，感興趣的小伙伴們可以參考一下2015-08-08
Javascript實(shí)現(xiàn)網(wǎng)絡(luò)監(jiān)測(cè)的方法
這篇文章主要介紹了Javascript實(shí)現(xiàn)網(wǎng)絡(luò)監(jiān)測(cè)的方法,可實(shí)現(xiàn)檢測(cè)網(wǎng)絡(luò)連接及網(wǎng)速的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了JavaScript對(duì)象原型鏈原理解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
值得分享的輕量級(jí)Bootstrap Table表格插件
這篇文章為大家分享了輕量級(jí)Bootstrap Table表格插件，以表格的形式顯示的數(shù)據(jù)，支持單選，復(fù)選框，排序，分頁(yè),顯示/隱藏列等操作，感興趣的小伙伴們可以參考一下2016-05-05
JavaScript中的Array對(duì)象是一個(gè)動(dòng)態(tài)的數(shù)組，也是一個(gè)Stack,還是一個(gè)Dictionary2011-01-01
UniApp使用manifest.json應(yīng)用配置的超詳細(xì)教學(xué)
這篇文章主要給大家介紹了關(guān)于uni-app應(yīng)用配置manifest.json最全最詳細(xì)配置,manifest.json文件是應(yīng)用的配置文件,用于指定應(yīng)用的名稱、圖標(biāo)、權(quán)限等,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
原生js和jQuery隨意改變div屬性style的名稱和值
用原生js和jQuery實(shí)現(xiàn)改變隨意改變div屬性style的名稱和值的結(jié)果，這個(gè)實(shí)例比較實(shí)用，新手朋友們可以看看2014-10-10
這篇文章主要介紹了微信小程序從注冊(cè)賬號(hào)到上架詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07