Openlayers實(shí)現(xiàn)圖形繪制-創(chuàng)新互聯(lián)

本文實(shí)例為大家分享了Openlayers實(shí)現(xiàn)圖形繪制的具體代碼，供大家參考，具體內(nèi)容如下

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比樂至網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式樂至網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋樂至地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴。

1、新建一個(gè)html頁面，引入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è)用來接收繪制對(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變量，用來存儲(chǔ)繪制圖形時(shí)的回調(diào)函數(shù)
   //maxPoints變量，用來存儲(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ù)圓來創(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ù)
  //此處是為保證刷新頁面后，仍然能夠根據(jù)下拉列表框框的選項(xiàng)進(jìn)行圖形繪制
  addInteraction();
 };
 </script>
</head>
<body>
 <div id="menu">
 <label>幾何圖形繪制：</label>
 <select id="type">
  <option value="None">無</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>

新聞標(biāo)題：Openlayers實(shí)現(xiàn)圖形繪制-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://muchs.cn/article10/cochgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站排名、手機(jī)網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化