一、基本概念

交互式绘制的两个基本概念

  • 画布
  • 画笔

画布就是一个数据源，加载到矢量图层。
画笔就是交互式控件ol.interaction.Draw

二、操作步骤

  1. 1、创建画布(矢量图层，数据源)
  2. 2、创建画笔(交互式控件)
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../../lib/include-openlayers-local.js"></script>
  9.     <script src="../../js/Tian.js"></script>
  10. </head>
  11. <body>
  12.     <div id="map_container"></div>
  13.     <script>
  14.         const map = new ol.Map({
  15.             target:"map_container",
  16.             layers:[TianDiMap_vec,TianDiMap_cva],
  17.             view:new ol.View({
  18.                 center:[114,30],
  19.                 projection:'EPSG:4326',
  20.                 zoom:4
  21.             })
  22.         })
  23.         /* 1、创建画布 */
  24.         const source = new ol.source.Vector({
  25.             wrapX:false
  26.         })
  27.         const layer = new ol.layer.Vector({
  28.             source:source
  29.         })
  30.         map.addLayer(layer)
  31.         /* 2、新建画笔 */
  32.         let draw = new ol.interaction.Draw({
  33.             source:source,
  34.             type:'Point'
  35.         })
  36.         map.addInteraction(draw);
  37.         draw.on("drawend",function(e){
  38.             console.log("绘制完成")
  39.         })
  40.     </script>
  41. </body>
  42. </html>

2-1、点击事件-激活画笔

关键步骤创建画笔和激活画笔

  1. # 创画笔
  2. // 1、 创建画笔
  3. const draw = new ol.interaction.Draw({
  4.   // 在哪个画布上绘制
  5.   source: source,
  6.   // 绘制的类型
  7.   type: 'Point',
  8. })
  1. 2、 激活画笔
  2. map.addInteraction(draw)
  1. <body>
  2.     <button id="addPoint" onclick="addPoint()">激活</button>
  3.     <button id="exit" onclick="exit()">退出</button>
  4.     <button id="reset" onclick="reset()">清除</button>
  6.     <div id="map_container"></div>
  8.     <script>
  10.         const map = new ol.Map({
  11.             target: 'map_container',
  12.             layers: [TianDiMap_vec, TianDiMap_cva],
  13.             view: new ol.View({
  14.                 projection: 'EPSG:4326',
  15.                 center: [0, 0],
  16.                 zoom: 2,
  17.             }),
  18.         })
  19.          // 一. 创建画布
  20.         // 1-1、创建矢量数据源
  21.         let source = new ol.source.Vector({
  22.             wrapX: false
  23.         })
  24.         // 1-2、创建矢量图层
  25.         let vector = new ol.layer.Vector({
  26.             source: source
  27.         })
  28.         // 1-3、 添加失量图层到map对象中
  29.         map.addLayer(vector)
  31.         // 二. 创建画笔
  32.         let draw = null
  34.         function addPoint() {
  35.             draw = new ol.interaction.Draw({
  36.                 // 在哪个画布上绘制
  37.                 source: source,
  38.                 // 绘制的类型
  39.                 type: 'Point',
  40.             })
  41.             map.addInteraction(draw)
  43.             // 三. 监听绘制完成事件
  44.             draw.on('drawend', function (e) {
  45.                 console.log('绘制完成')
  46.             })
  47.         }
  48.     </script>
  49. </body>

2-2、移除画笔

map.removeInteraction()

  1. function exit() {
  2.     map.removeInteraction(draw)
  3. }

2-3、清除

  1. function reset(){
  2.   source.clear();
  3. }

2-4、代码优化

  1. <body>
  2.     <button onclick="active()">激活画笔</button>
  3.     <button onclick="remove()">移除画笔</button>
  4.     <button onclick="reset()">清除</button>
  5.     <div id="map_container">
  6.     </div>
  7. <script>
  8.     var map = new ol.Map({
  9.         target:"map_container",
  10.         layers:[gaode],
  11.         view:new ol.View({
  12.             projection:'EPSG:4326',
  13.             center:[114.30,30.50],
  14.             zoom:4
  15.         })
  16.     })
  17.     /* 1、创建画布 */
  18.     var source = new ol.source.Vector({
  19.         wrapX:false
  20.     })
  21.     var layer = new ol.layer.Vector({
  22.         source
  23.     })
  24.     map.addLayer(layer)
  25.     /* 2、激活画笔 */
  26.     let draw;
  27.     function active(){
  28.         draw = new ol.interaction.Draw({
  29.             type:"Point",
  30.             source
  31.         })
  32.         map.addInteraction(draw);
  33.     }
  34.     function remove(){
  35.         map.removeInteraction(draw);
  36.     }
  37.     function reset(){
  38.         source.clear();
  39.     }
  40. </script>
  41. </body>