一、编写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>
四、结果展示: