openlayers - 02 区域绘制功能

VIP文章大兵的猫

已于 2023-08-25 09:23:10 修改

阅读量390

点赞数

分类专栏： openlayers Vue 文章标签： javascript html vue.js 前端

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

本文链接：https://blog.csdn.net/Error_ABC/article/details/130801918

版权

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