openlayers在vue中做底图裁剪，行政区划剪裁

最新推荐文章于 2023-06-05 14:33:48 发布

林宇程

最新推荐文章于 2023-06-05 14:33:48 发布

阅读量639

点赞数 1

分类专栏： vue 文章标签：前端 javascript vue 大数据 html

本文链接：https://blog.csdn.net/weixin_54988062/article/details/125478609

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

let _this = this;
      var osm = new TileLayer({source: new OSM(),});//创建新底图放在当前底图下层
      var clipLayer = new VectorLayer({
        style: null,
        source: new VectorSource({
          url: '../../static/Nanjing.geojson',//南京政区数据
          format: new GeoJSON(),
        }),
      });
      clipLayer.getSource().on('addfeature', function () {
        osm.setExtent(clipLayer.getSource().getExtent());
      });
      osm.on('postrender', function (e) {
        e.context.globalCompositeOperation = 'destination-in';
        clipLayer.getSource().forEachFeature(function (feature) {
        getVectorContext(e).drawFeature(feature, new Style({fill: new Fill({color: 'red'})}));
        });
        e.context.globalCompositeOperation = 'source-over';
      });
        _this.map.addLayer(osm)
        _this.map.addLayer(clipLayer)

裁剪效果如下