openlayers - 02 区域绘制功能

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}", // 高德瓦片资源
    }),
  });