在vue中使用OpenLayers地图 02 绘制点线面等图形

原创已于 2023-03-24 11:32:42 修改

· 2.3k 阅读

6 ·

版权

文章标签：

#vue.js #javascript #前端

于 2022-02-21 09:31:25 首次发布

vue 同时被 2 个专栏收录

33 篇文章

订阅专栏

cesium

20 篇文章

订阅专栏

这篇博客展示了如何在Vue应用中利用OpenLayers库创建交互式地图。通过HTML和Vue方法，实现了地图的初始化、绘制功能的选择（点、线、多边形、圆、正方形、长方形）以及图形绘制的动态更新。用户可以根据下拉菜单选择不同的绘制类型，地图会实时显示所选图形。此外，还提供了清除绘制图形的功能。

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

参考01中的准备工作

1. 先按照01中流程确定你已经创建出了一个能够正常展示的OL，有环境后可直接cv以下绘图操作效果如下

实现效果：

绘制点线面

style样式部分

<!-- 绘制几何图形 -->
  <div id="container">
      <!-- 绘制几何图形 -->
      <div id="menu">
        <label>几何图形类型：&nbsp;</label>
        <select id="type">
          <option value="None">无</option>
          <option value="Point">点</option>
          <option value="LineString">线</option>
          <option value="Polygon">多边形</option>
          <option value="Circle">圆</option>
          <option value="Square">正方形</option>
          <option value="Box">长方形</option>
        </select>
      </div>
    </div>
  </div>

vue方法部分

<script>
import "ol/ol.css";
import ol from "openlayers";
export default {
  methods: {
    // 初始化地图
    initMap() {
      var map = new ol.Map({
        target: "container",
        layers: [
          new ol.layer.Tile({
            source: new ol.source.XYZ({
              url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=0c37299462312e175cab9628d29c7563",
            }),
            visible: true,
          }),
        ],
        view: new ol.View({
          center: [0, 0],
          zoom: 3,
        }),
      });

      var typeSelect = document.getElementById("type"); //绘制类型选择对象
      var draw; //ol.Interaction.Draw类的对象

      //实例化一个矢量图层Vector作为绘制层
      var source = new ol.source.Vector();
      var vectorLayer = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
          fill: new ol.style.Fill({
            //填充样式
            color: "rgba(255, 255, 255, 0.2",
          }),
          stroke: new ol.style.Stroke({
            //线样式
            color: "#ffcc33",
            width: 2,
          }),
          image: new ol.style.Circle({
            //点样式
            radius: 7,
            fill: new ol.style.Fill({
              color: "#ffcc33",
            }),
          }),
        }),
      });
      //将绘制层添加到地图容器中
      map.addLayer(vectorLayer);

      //用户更改绘制类型触发的事件
      typeSelect.onchange = function (e) {
        map.removeInteraction(draw); //移除绘制图形控件
        addInteraction(); //添加绘制图形控件
      };

      function addInteraction() {
        var typeValue = typeSelect.value; //绘制类型
        if (typeValue !== "None") {
          var geometryFunction, maxPoints;
          if (typeValue === "Square") {
            //正方形
            typeValue = "Circle"; //设置绘制类型为Circle
            //设置几何信息变更函数，即创建正方形
            geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
          } else if (typeValue === "Box") {
            //长方形
            typeValue = "LineString"; //设置绘制类型为LineString
            maxPoints = 2; //设置最大点数为2
            //设置几何信息变更函数，即设置长方形的坐标点
            geometryFunction = function (coordinates, geometry) {
              if (!geometry) {
                geometry = new ol.geom.Polygon(null); //多边形
              }
              var start = coordinates[0];
              var end = coordinates[1];
              geometry.setCoordinates([
                [start, [start[0], end[1]], end, [end[0], start[1]], start],
              ]);
              return geometry;
            };
          }
          console.log(typeValue);
          //实例化图形绘制控件对象并添加到地图容器中
          draw = new ol.interaction.Draw({
            source: source,
            type: typeValue, //几何图形类型
            geometryFunction: geometryFunction, //几何信息变更时的回调函数
            maxPoints: maxPoints, //最大点数
          });
          map.addInteraction(draw);
        } else {
          //清空绘制的图形
          source.clear();
        }
      }
    },

    // 列表模式的路由跳转
    gotoMenu() {
      this.$router.replace("/screenage/Fenbianlv");
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>