Openlayersは図形描画を実現します。

5923 ワード

本論文の例では、Openlayersの図形描画を実現するための具体的なコードを共有します。
1、htmlページを新規作成し、ol.jsファイルを導入して、bodyの中にdivタグ、labelタグとselectドロップタブを作成します。
2、コード実現


<!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');
  //               ，             、     
  var draw;
 
  //       
  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
  })
  });
 
  //          
  //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 });
  //         
  var vector = new ol.layer.Vector({
  //   
  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
   }),
   //    ，        
   image: new ol.style.Circle({
   //    
   radius: 7,
   //  
   fill: new ol.style.Fill({
    //    
    color: '#e81818'
   })
   })
  })
  });
 
  //        map 
  map.addLayer(vector);
 
  //         
  function addInteraction() {
  //           
  var value = typeSelect.value;
  //             "None"  ，         
  //            "None"  ，        
  if (value !== 'None') {
   //              ，           
   //            "None" ，      
   if (source == null) {
   source = new ol.source.Vector({ wrapX: false });
   vector.setSource(source);
   }
   //geometryFunction  ，              
   //maxPoints  ，          
   var geometryFunction, maxPoints;
   //            "Square"  ，  value   Circle
   //    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.
   //           
   geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
   } else if (value === 'Rectangle') {
   //            "Square"  ，  value   LineString
   value = 'LineString';
   //       2
   maxPoints = 2;
   geometryFunction = function (coordinates, geometry) {
    //  geometry         ，   
    if (!geometry) {
    geometry = new ol.geom.Polygon(null);
    }
    //      
    var start = coordinates[0];
    //      
    var end = coordinates[1];
    //                  
    geometry.setCoordinates([
    [start, [start[0], end[1]], end, [end[0], start[1]], start]
    ]);
    return geometry;
   };
   }
 
   //         draw  
   //         
   draw = new ol.interaction.Draw({
   //   
   source: source,
   //    
   type: value,
   //    
   //Function that is called when a geometry's coordinates are updated
   geometryFunction: geometryFunction,
   //    
   maxPoints: maxPoints
   });
   // draw     map ，            
   map.addInteraction(draw);
  } else {
   //       
   source = null;
   //            
   vector.setSource(source);
  }
  }
 
  //                    
  typeSelect.onchange = function (e) {
  // map         
  //     ，                      ，      draw  
  map.removeInteraction(draw);
  //           
  addInteraction();
  };
  //         
  //           ，                     
  addInteraction();
 };
 </script>
</head>
<body>
 <div id="menu">
 <label>      ：</label>
 <select id="type">
  <option value="None"> </option>
  <option value="Point"> </option>
  <option value="LineString"> </option>
  <option value="Polygon">   </option>
  <option value="Circle"> </option>
  <option value="Square">   </option>
  <option value="Rectangle">   </option>
 </select>
 </div>
 <div id="map"></div>
</body>
</html>

3、結果の展示
点図を描く