六、OpenLayer矢量绘制

openlayer提供了Draw类来实现地图绘制点、线、面、圆等功能。

//定义绘制图层
var lineLayer = new VectorLayer({
  properties: { name: "lineLayer", isClick: false },
  source: new VectorSource(),
  style: new Style({
    fill: new Fill({
      color: "#ffffffcc",
    }),
    stroke: new Stroke({
      color: "#0099ff",
      size: 1,
    }),
    //image是设置点的样式
    image: new Circle({
      radius: 7,
      fill: new Fill({
        color: "#ffffffcc",
      }),
      stroke: new Stroke({
        color: "#0099ff",
        width: 2,
      }),
    }),
  }),
});
this.map.addLayer(lineLayer);
//定义绘制类
this.lineDraw = new Draw({
  type:  "Polygon", // 默认支持:Point(点)、LineString(线)、Polygon(面)和Circle(圆)。
  source: lineLayer.getSource(),  
  style: new Style({
    fill: new Fill({
      color: "#ffffffcc",
    }),
    stroke: new Stroke({
      color: "#0099ff",
      width: 2,
    }),
    image: new Circle({
      radius: 7,
      fill: new Fill({
        color: "#0099ff",
      }),
    }),
  }),
  // maxPoints: 4    // 限制不超过4个点
});

// 监听线绘制结束事件,获取坐标
this.lineDraw.on("drawstart", (event) => {
  this.overTipLayer.getElement().innerHTML = "提示:右击结束绘制";  //定义的绘制提示框,
  lineLayer.getSource().clear();
});
this.lineDraw.on("drawend", (event) => {
  const geometry = event.feature.getGeometry();
  this.map.selectFeature(geometry); //高亮
  // event.feature 就是当前绘制完成的线的Feature
  //构建查询
  const region = this.getSupermapRegion(geometry);
  this.executeSpatialQuery(dataUrl, region, false).then((query) => {
    const result = query.result.features;
    callback(result);
  });
  this.lineDraw.abortDrawing();  //销毁工具
  this.lineDraw.setActive(false);  //设置状态
  this.map.removeInteraction(this.lineDraw);  //清除绘制监听
  this.removeLineLayer();
  this.overTipLayer.getElement().innerHTML = "";
});
//右键事件 此事件主要关闭右击弹窗
this.map.on("contextmenu", (e) => {
  e.preventDefault();
});
this.map.addInteraction(this.lineDraw);

自定义绘制矩形方法

    drawRectangle() {
      //设置maxPoints及geometryFunction
      var maxPoints, geometryFunction;
      maxPoints = 2;
      geometryFunction = function (coordinates, geometry) {
        //设置起始点及终止点
        var start = coordinates[0];
        var end = coordinates[1];
        if (!geometry) {
          var lonLatArr = [
            [start, [start[0], end[1]], end, [end[0], start[1]], start], //特别注意,长方形终止点与起始点重合
          ];
          geometry = new Polygon(lonLatArr);
        }
        geometry.setCoordinates([
          [start, [start[0], end[1]], end, [end[0], start[1]], start], //特别注意,长方形终止点与起始点重合
        ]);
        return geometry;
      };

      // 添加一个绘制的线使用的layer
      var lineLayer = new VectorLayer({
        source: new VectorSource(),
        properties: { name: "lineLayer", isClick: false },
        style: new Style({
          fill: new Fill({
            color: "#ffffffcc",
          }),
          stroke: new Stroke({
            color: "#0099ff",
            size: 1,
          }),
          //image是设置点的样式
          image: new Circle({
            radius: 7,
            fill: new Fill({
              color: "#ffffffcc",
            }),
            stroke: new Stroke({
              color: "#0099ff",
              width: 2,
            }),
          }),
        }),
      });
      this.map.addLayer(lineLayer);
      this.lineDraw = new Draw({
        source: lineLayer.getSource(),
        style: new Style({
          fill: new Fill({
            color: "#ffffffcc",
          }),
          stroke: new Stroke({
            color: "#0099ff",
            width: 2,
          }),
          image: new Circle({
            radius: 7,
            fill: new Fill({
              color: "#0099ff",
            }),
          }),
        }),
        type: "LineString",
        geometryFunction: geometryFunction,
        maxPoints: maxPoints,
      });

      // 监听线绘制结束事件,获取坐标
      this.lineDraw.on("drawstart", (event) => {
        this.overTipLayer.getElement().innerHTML = "提示:右击结束绘制";
        lineLayer.getSource().clear();
      });
      this.lineDraw.on("drawend", (event) => {
        const geometry = event.feature.getGeometry();
        this.map.selectFeature(geometry); //高亮
        // event.feature 就是当前绘制完成的线的Feature
        //构建查询
        const region = this.getSupermapRegion(geometry);
        this.executeGeojson(region);

        this.lineDraw.abortDrawing();
        this.lineDraw.setActive(false);
        this.map.removeInteraction(this.lineDraw);
        this.map.removeLayer(lineLayer);
        this.overTipLayer.getElement().innerHTML = "";
      });
      //右键事件
      this.map.on("contextmenu", (e) => {
        e.preventDefault();
      });
      //将layer和interaction添加到地图中
      this.map.addLayer(lineLayer);
      this.map.addInteraction(this.lineDraw);
    },

鼠标提示条方法

    //鼠标移动提示条
    addTooltip() {
      let elment = document.createElement("div");
      elment.className = "tipClass";
      this.overTipLayer = new Overlay({
        element: elment,
        positioning: "center-left",  //弹窗位置
        stopEvent: false,
      });
      this.map.addOverlay(this.overTipLayer);

      //地图中鼠标悬浮移动事件
      this.map.on("pointermove", (evt) => {
        if (this.overTipLayer) {
          // this.overlayLayer.getElement().innerHTML = '指示弹窗里的内容'
          this.overTipLayer.setPosition(evt.coordinate);
        }
      });
    },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用OpenLayers绘制面,您可以按照以下步骤操作: 1. 首先,确保您已经在项目中引入了OpenLayers库。您可以从OpenLayers官方网站下载并引入它。 2. 创建一个地图容器,可以是一个div元素,用于显示地图。 3. 初始化一个地图对象,并将其添加到地图容器中。 4. 创建一个矢量图层,用于绘制面。 5. 创建一个绘制交互工具,例如ol.interaction.Draw,指定绘制的几何类型为面geometryType: 'Polygon'。 6. 将绘制交互工具添加到地图中。 7. 在绘制完成后,通过监听drawend事件获取绘制的几何对象。 8. 将绘制的几何对象添加矢量图层中,并更新地图显示。 下面是一个简单的示例代码: ```javascript // 创建地图容器 var mapContainer = document.getElementById('map'); // 初始化地图对象 var map = new ol.Map({ target: mapContainer, layers: [ // 添加一个矢量图层 new ol.layer.Vector({ source: new ol.source.Vector() }) ], view: new ol.View({ center: [0, 0], zoom: 2 }) }); // 创建绘制交互工具 var draw = new ol.interaction.Draw({ source: map.getLayers().item(0).getSource(), type: 'Polygon' }); // 添加绘制交互工具到地图 map.addInteraction(draw); // 监听绘制完成事件 draw.on('drawend', function(event) { var feature = event.feature; // 添加绘制的几何对象到矢量图层 map.getLayers().item(0).getSource().addFeature(feature); // 更新地图显示 map.getView().fit(map.getLayers().item(0).getSource().getExtent()); }); ``` 这样,您就可以在OpenLayers绘制面了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值