openlayers - 02 区域绘制功能

原创

已于 2023-08-25 09:23:10 修改 · 633 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #vue.js #前端

于 2023-05-22 10:33:18 首次发布

本文介绍了在OpenLayers中实现区域绘制的功能，包括定义容器、声明方法和配置项解释。详细阐述了Draw的四种绘制模式（Point, LineString, Polygon, Circle），以及创建Draw对象时可设置的属性，如type、features、source等。此外，还讲解了方法如createBox、createRegularPolygon、finishDrawing等，并提到了drawend和drawstart等关键事件。最后展示了绘制效果。" 108807534,1418187,Linux PCIE驱动开发详解,"['Linux开发', '硬件驱动', 'PCI Express', '数据传输']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.定义容器

  <div class="ol-map" id="map"></div>
  <div class="tool">
    <div class="tool-item" @click="drawCircle()">
      <el-icon :size="20"><Aim /></el-icon
      ><span class="operation">圆形框选</span>
    </div>
    <div class="tool-item" @click="drawPolygon()">
      <el-icon :size="20"><Crop /></el-icon
      ><span class="operation">多边形框选</span>
    </div>

2.声明方法


  // 地图资源图层
  tileLayer = new TileLayer({
    // source: new OSM(), //不建议使用，实际开发中会有问题
    source: new XYZ({
      url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}", // 高德瓦片资源
    }),
  });

  // 区域绘制图层
  vectorLayer = new VectorLayer({
    source: this.source,
    style: new Style({
      fill: new Fill({
        //填充样式
        color: "rgba(252,85,49, 0.2)",
      }),