openlayers5.x封装绘制图形控件

一、编写drawtool模块

/**
 * @module {ol/control/Drawtool}
 */
import PluggableMap from '../PluggableMap.js';
import Control from '../control/Control.js';
import Draw  from  '../interaction/Draw.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../layer.js';
import {OSM, Vector as VectorSource} from '../source.js';

/**
 * @typedef {Object} Options
 * @property {string} default:[className='ol-control-drawtool'] CSS class name.
 */

class Drawtool extends Control{
	/**
   * @param {module:ol/control/Drawtool~Options=} opt_options Drawtool options.
   */
	 constructor(opt_options){
    
		const options = opt_options ? opt_options : {};
		
		const element = document.createElement('form');
		
		const elementSelect = document.createElement('select');
		
		elementSelect.id="type";
		/**
		*构建绘制图形可选类型,包括点、线、面、圆; ~Option(text,value)
		*/
		elementSelect.options.add(new Option("None","None"));
		
		elementSelect.options.add(new Option("点","Point"));
		
		elementSelect.options.add(new Option("线","LineString"));
		
		elementSelect.options.add(new Option("面","Polygon"));
		
		elementSelect.options.add(new Option("圆","Circle"));
		
		element.appendChild(elementSelect);  
		/**
		*设置空间容器元素类名,默认 CSS样式:'ol-control-drawtool'
		*/
		element.className = options.className!== undefined  ? options.className : 'ol-control-drawtool';
		
        document.body.appendChild(element);
		
		/**
		*调用父类的构造器,否则无法创建本类构造器
		*/
		super({
			element: element,
			render: options.render,
			target: options.target
		});
		
		/**
		* @module {ol/Map}
		*/
	   const map = options.map;  
    
	   const typeSelect = document.getElementById('type');
	   /**
	   *global so we can remove it later
	   */
	   var draw; 
       
	/**
		*绘制点目标存储图层 VectorLayer  @module {ol/source}
		*/
	   var source = new VectorSource();
	   var layer=new VectorLayer({
			source: source	
			});
	   
		/**
		* @module {ol/PluggableMap}
		*/
	   map.addLayer(layer);
	   /**
	   *通过select元素onchange事件控制map是否具有交互中的绘制功能
	   */
	   elementSelect.onchange = function() {
		map.removeInteraction(draw);
        addInteraction();
	   };
	   
       addInteraction();
	  
	   function addInteraction() {
		const value = typeSelect.value;
         
		if (value !== 'None') {
			draw = new Draw({
				source: source,
				type: typeSelect.value
			});
			map.addInteraction(draw);
			}  
	   }
	}  
}
export default Drawtool;

二、编写实例调用该模块

 import Map from './ol/Map.js';
 import View from './ol/View.js';
 import {Tile as TileLayer, Vector as VectorLayer} from './ol/layer.js';
 import OSM from './ol/source/OSM.js';
 import VectorSource from './ol/source/Vector.js';
 import Drawtool from  './ol/control/drawtool.js';
 
  var raster = new TileLayer({
        source: new OSM()
      });

  var map = new Map({  
        layers: [raster],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 6
        })
      });
 var drawPoint=new Drawtool({map:map});

 

三、index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Using OpenLayers with Webpack</title>
	<link rel="stylesheet" type="text/css" href="./dist/ol.css"/>
</head>
  <body>
    <div id="map">
	</div>	
	<script src="./dist/test.js" type="text/javascript"></script>
  </body>
</html>

四、结果展示:

转载自:https://blog.csdn.net/xlp789/article/details/83758935

You may also like...