【WebGIS实例】（18）MapboxGL 绘制矢量——线、面

已于 2024-10-21 19:55:22 修改
阅读量547 收藏 1
点赞数 5
分类专栏： 【WebGIS实例】 文章标签： WebGIS javascript
于 2024-10-21 19:17:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ReBeX/article/details/143122509
版权

前言

Mapbox GL JS 版本：3.6.0

该博客仅供学习参考，如果您是计划在实际项目中实现该功能，也推荐您直接使用已有的功能库：

绘制线段

请添加图片描述

/**
 * @description: 绘制线
 */
export class DrawLine {
  nodeCoordinateList; // 节点坐标
  pointFeatureCollection; // 点GeoJSON集合
  lineFeatureCollection; // 线GeoJSON集合
  constructor(map, callback) {
    this.map = map;
    this.addPoint = this.addPoint.bind(this);
    this.end = this.end.bind(this);
    this.dynamicAction = this.dynamicAction.bind(this);

    this.callback = callback; // 回调函数
  }
  // 初始化图层
  init() {
    // 添加线图层
    this.map.addLayer({
      id: "_lineLayer",
      type: "line",
      source: {
        type: "geojson",
        data: this.lineFeatureCollection,
      },
      paint: {
        "line-color": "#ffff00",
        "line-width": 2,
        "line-opacity": 1,
        "line-dasharray": [2, 4],
      },
    });

    // 添加动态线图层
    this.map.addLayer({
      id: "_dynamicLineLayer",
      type: "line",
      source: {
        type: "geojson",
        data: this.lineFeatureCollection,
      },
      paint: {
        "line-color": "#ffff00",
        "line-width": 2,
        "line-opacity": 1,
        "line-dasharray": [2, 4],
      },
    });

    // 添加点图层
    this.map.addLayer({
      id: "_pointLayer",
      type: "circle",
      source: {
        type: "geojson",
        data: this.pointFeatureCollection,
      },
      paint: {
        "circle-color": "#ffffff",
        "circle-radius": 3,
        "circle-stroke-width": 2,
        "circle-stroke-color": "#ffff00",
      },
    });
  }

  // 重置数据
  reset() {
    this.nodeCoordinateList = [];
    this.pointFeatureCollection = {
      type: "FeatureCollection",
      features: [],
    };
    this.lineFeatureCollection = {
      type: "FeatureCollection",
      features: [],
    };
  }

  // 开始绘制
  start() {
    this.reset();
    this.init();

    this.map.doubleClickZoom.disable(); // 禁止双击缩放
    this.map.getCanvas().style.cursor = "crosshair"; // 设置鼠标样式

    this.map.on("click", this.addPoint);
    this.map.on("dblclick", this.end);
    this.map.on("mousemove", this.dynamicAction);
  }

  // 结束绘制
  end(e) {
    this.addPoint(e);

    this.map.off("click", this.addPoint);
    this.map.off("dblclick", this.end);
    this.map.off("mousemove", this.dynamicAction);

    // this.map.once('click', (e) => { // ! 连续绘制
    //   this.clear()
    //   this.start()
    // })
    this.map.getCanvas().style.cursor = ""; // 恢复鼠标样式

    this.callback && this.callback(this.nodeCoordinateList);
  }

  // 清除绘制
  clear() {
    this.map.getCanvas().style.cursor = ""; // 恢复鼠标样式

    this.map.doubleClickZoom.enable(); // 恢复双击缩放
    this.map.off("click", this.addPoint);
    this.map.off("dblclick", this.end);
    this.map.off("mousemove", this.dynamicAction);

    if (this.map.getSource("_pointLayer")) {
      this.map.removeLayer("_pointLayer");
      this.map.removeSource("_pointLayer");
    }
    if (this.map.getSource("_lineLayer")) {
      this.map.removeLayer("_lineLayer");
      this.map.removeSource("_lineLayer");
    }
    if (this.map.getSource("_dynamicLineLayer")) {
      this.map.removeLayer("_dynamicLineLayer");
      this.map.removeSource("_dynamicLineLayer");
    }
  }

  // 添加点
  addPoint(e) {
    const lngLat = [e.lngLat.lng, e.lngLat.lat];
    const pointList = this.pointFeatureCollection;
    const lineList = this.lineFeatureCollection;

    if (pointList.features.length > 0) {
      let prev = pointList.features[pointList.features.length - 1];
      lineList.features.push({
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [prev.geometry.coordinates, lngLat],
        },
      });
      this.map.getSource("_lineLayer").setData(lineList);
    }

    pointList.features.push({
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: lngLat,
      },
    });
    this.map.getSource("_pointLayer").setData(pointList);

    this.nodeCoordinateList.push(lngLat);
  }

  // 鼠标移动事件
  dynamicAction(e) {
    const pointList = this.pointFeatureCollection;
    const lngLat = [e.lngLat.lng, e.lngLat.lat];
    if (pointList.features.length > 0) {
      const prev = pointList.features[pointList.features.length - 1];
      const json = {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [prev.geometry.coordinates, lngLat],
        },
      };
      this.map.getSource("_dynamicLineLayer").setData(json);
    }
  }
}

使用方法

import { DrawLine } from "./map/index.js"; // 引入

// 实例化
const drawVector = new DrawLine(map, (data) => {
  console.log('绘制完毕后的回调', data);
});

// 开始绘制
drawVector.start();

// 结束并清除绘制结果
drawVector.clear();

绘制多边形

请添加图片描述

/**
 * @description: 绘制多边形
 */
export class DrawPolygon {
  map; // 地图对象
  nodeCoordinateList; // 节点坐标
  pointFeatureCollection; // 点GeoJSON集合
  lineFeatureCollection; // 线GeoJSON集合
  polygonFeatureCollection; // 面GeoJSON集合
  constructor(map, callback) {
    this.map = map;
    this.addPoint = this.addPoint.bind(this);
    this.end = this.end.bind(this);
    this.dynamicAction = this.dynamicAction.bind(this);

    this.callback = callback; // 回调函数
  }
  // 初始化图层
  init() {
    // 添加面图层
    this.map.addLayer({
      id: "_fillLayer",
      type: "fill",
      source: {
        type: "geojson",
        data: this.lineFeatureCollection,
      },
      paint: {
        "fill-color": "#ff0000",
        "fill-opacity": 0.3,
      },
    });
    // 添加点图层
    this.map.addLayer({
      id: "_pointLayer2",
      type: "circle",
      source: {
        type: "geojson",
        data: this.pointFeatureCollection,
      },
      paint: {
        "circle-color": "#ffffff",
        "circle-radius": 3,
        "circle-stroke-width": 2,
        "circle-stroke-color": "#ff0000",
      },
    });
  }

  // 重置数据
  reset() {
    this.nodeCoordinateList = [];
    this.pointFeatureCollection = {
      type: "FeatureCollection",
      features: [],
    };
    this.lineFeatureCollection = {
      type: "FeatureCollection",
      features: [],
    };
    this.polygonFeatureCollection = {
      type: "FeatureCollection",
      features: [],
    };
  }

  // 开始绘制
  start() {
    this.reset();
    this.init();

    this.map.doubleClickZoom.disable(); // 禁止双击缩放
    this.map.getCanvas().style.cursor = "crosshair"; // 设置鼠标样式

    this.map.on("click", this.addPoint);
    this.map.on("dblclick", this.end);
    this.map.on("mousemove", this.dynamicAction);
  }

  // 结束绘制
  end(e) {
    this.addPoint(e);

    this.map.off("click", this.addPoint);
    this.map.off("dblclick", this.end);
    this.map.off("mousemove", this.dynamicAction);

    this.map.getCanvas().style.cursor = ""; // 恢复鼠标样式
    this.callback && this.callback(this.polygonFeatureCollection);
  }

  // 清除绘制
  clear() {
    this.map.getCanvas().style.cursor = ""; // 恢复鼠标样式

    this.map.doubleClickZoom.enable(); // 恢复双击缩放
    this.map.off("click", this.addPoint);
    this.map.off("dblclick", this.end);
    this.map.off("mousemove", this.dynamicAction);

    if (this.map.getSource("_pointLayer2")) {
      this.map.removeLayer("_pointLayer2");
      this.map.removeSource("_pointLayer2");
    }
    if (this.map.getSource("_fillLayer")) {
      this.map.removeLayer("_fillLayer");
      this.map.removeSource("_fillLayer");
    }
  }

  // 隐藏绘制
  show(flag) {
    if (flag) {
      this.map.setLayoutProperty("_pointLayer2", "visibility", "visible");
      this.map.setLayoutProperty("_fillLayer", "visibility", "visible");
    } else {
      this.map.setLayoutProperty("_pointLayer2", "visibility", "none");
      this.map.setLayoutProperty("_fillLayer", "visibility", "none");
    }
  }

  // 添加点
  addPoint(e) {
    const lngLat = [e.lngLat.lng, e.lngLat.lat];
    const pointList = this.pointFeatureCollection;

    pointList.features.push({
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: lngLat,
      },
    });
    this.map.getSource("_pointLayer2").setData(pointList);

    this.nodeCoordinateList.push(lngLat);
  }

  // 鼠标移动事件
  dynamicAction(e) {
    const pointList = this.pointFeatureCollection;
    const lngLat = [e.lngLat.lng, e.lngLat.lat];

    const len = pointList.features.length;
    if (len > 1) {
      let pts = this.nodeCoordinateList.concat([lngLat]);
      pts = pts.concat([this.nodeCoordinateList[0]]);
      const json = {
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [pts],
        },
      };
      this.map.getSource("_fillLayer").setData(json);
      this.polygonFeatureCollection = {
        type: "FeatureCollection",
        features: [json],
      };
    }
  }
}

使用方法

import { DrawPolygon } from "./map/index.js"; // 引入

// 实例化
const drawVector = new DrawPolygon(map, (data) => {
  console.log('绘制完毕后的回调', data);
});

// 开始绘制
drawVector.start();

// 结束并清除绘制结果
drawVector.clear();

写在最后

当前版本的 Mapbox GL JS 的绘制功能真是不如 OpenLayers 的，OpenLayers 已经封装有一整套方法了

这边还有徒手画线的实现参考：【WebGIS实例】（19）MapboxGL 实现徒手画线（Freehand Drawing）

请添加图片描述

mapbox基础:绘制点/线/面，以及监听绘制修改
dada914的博客
11-29 6891
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 目录系列文章目录前言一、初始化MapBox1.引入js1.在HTML页面引入js二、使用步骤1.引入库2.读入数据总结 前言 第一次使用mapbox，只是记一下，以免忘记，仅供参考 一、初始化MapBox 1.引入js 由于我是在layui框架内，等同于原生代码里面要新增一个地图，所以要先在对应的页面引入js； 1.在HTML页面引入js 二、使用步骤 1.引入库 代码如下（示例）： import numpy as
使用mapbox自定义绘制工具（point，line，polygon，circle，rectangle）
热门推荐
weixin_44539540的博客
04-22 1万+
mapbox自定义绘制工具如何使用mapbox绘制常用的工具需要引入的资源创建div引入mapbox实例设置circle工具创建 point 绘制工具创建line绘制工具创建polygon（多边形）绘制工具创建 rectangle（矩形）绘制工具清除图层（layer）和资源(source) 如何使用mapbox绘制常用的工具 每次在网上查资源，尼玛脑袋疼，好多大神写的啥玩意呀。我们知道，操作地图不外乎就是一些事件，其实mapbox有一些关于绘制工具的一些插件，也可以自己定义绘制工具。 我这里的demo，就是
MapboxGL 入门系列教程（一）：应该如何学习 MapboxGL
最新发布
大剑师兰特的GIS世界
03-17 896
Cesium 是一个开源的 JavaScript 库，专门用于创建3D地球和地图的可视化应用。它支持WebGL技术，允许开发者在网页上展示高分辨率的地理空间数据，进行三维场景渲染、地理信息系统（GIS）分析等。Cesium 主要用于构建基于浏览器的应用程序，可以显示全球范围内的地理信息，并且能够处理大量的空间数据。Cesium 1.0 (2012年)初始版本发布，确立了Cesium作为WebGL驱动的3D地球浏览器的基础。提供了基本的地图渲染功能，包括全球地形、影像图层等。
mapbox两点之间线的绘制
haoranyyy的博客
05-02 1069
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>绘制两点之间的线</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.tiles.m...
mapbox 实现点线面的绘制
weixin_50379372的博客
06-07 2112
mapbox
Mapbox画一条跨全球的线
chiZCzhang的博客
04-15 1674
Mapbox画一条跨全球线时，会有一个180度的分界线 如下图所示 此时我们想要的是一条连贯的跨全球线，点的排列顺序如下 [ 167.348333333333, 35.535 ], [ 175.401666666667, 37.1016666666667 ], [ 175.401666666667, 3...
mapbox地图：上图、画线、画区域
Miss_Y0的博客
12-10 332
新建文件，给出实现方法// 地图实例// vuex，这里也可以不用/*** 类（图片点位标记、画线、画区域）*/map = null;// 获取地图// 赋值/*** 添加箭头图标到地图*/if (!a) {// 箭头-右//给图片对象写入base64编码的svg流base64," +/*** 图片标记-组* @param {*} markers 数组，点的集合*/// 定义点的坐标、图片路径、名称。注：这里是示例数据。
WebGIS 之 ol交互式绘制图形
2302_78438891的博客
06-07 376
首先，需要导入OpenLayers的CSS和JavaScript库，以及用于绘制的交互控制模块。
基于Flex的WebGIS开发实例详解
- `Graphic` 类：代表一个图形元素，包含几何图形（如点、线、面）和与之相关的属性信息。 - `SpatialReference` 类：表示空间参考系统，用于定义地理数据的坐标系统和坐标转换。 - `DrawEvent` 类：表示绘图事件...
7. Vue-WebGIS项目入门详解：实现线绘制功能
# 1. 简介 ## 1.1 介绍Vue-WebGIS项目的概念与背景 ... 本文将详细介绍如何利用Vue-WebGIS项目实现线绘制功能，通过逐步引导读者实现从项目准备到功能优化的完整流程，帮助读者掌握在Vue-WebGIS项目中开发地理
分块webgis源码实例
10-04
4. 动态渲染：根据服务器返回的JSON数据，在地图上动态绘制矢量图形，如点、线、面等地理要素。 5. API集成：可能使用开源的GIS库，如OpenLayers、Leaflet等，来简化地图开发。 “ms4w”是MapServer for Windows的...
一个基于SVG的WebGIS源代码【实例】
05-22
在WebGIS中，SVG用于绘制地图元素，如边界、道路、地标等，因为其矢量特性，即使放大也不会失真。 2. **WebGIS架构**：WebGIS系统通常由客户端、服务器端和服务层组成。客户端负责展示地图和交互操作，服务器端处理...
【WebGIS实例】（1）MapboxGL绘制端点有符号的线
ReBeX
10-26 1792
MapboxGL绘制端点有符号的线
mapbox绘制实践
Elaine20132014的博客
08-19 358
k8s新司用的这个开源部署网站平台，刚来时一直听说这个，但是直到现在为了配置nginx才正正经经地百度了下什么是k8s。map.setPaintProperty('图层ID','key','value')不支持rgba设置透明度，支持line-opacity设置整个图层透明度。前司一直用的自研的平台，内核是啥，也没关注过。1、new mapboxgl.Popup 的两种绘制方式。同一图层不能同时支持，实线 和 虚线。2、mapbox画虚线。
mapboxgl绘制3D线
GIS兵器库
07-01 2448
最近遇到个需求，使用mapboxgl绘制行政区划图层，要求把行政区划拔高做出立体效果，以便突出显示。 拿到这个需求后，感觉很简单呀，只需要用fill-extrusion方式绘制就可以啦，实现出来是这个样子的 效果有点丑，并且这里有个问题就是我的数据是区县数据，而绘制出的效果却没有区分出各个区县的边界 于是从下面两个方向做优化处理： 各区县按不同颜色区分 添加区县边界 首先尝试不同区县按颜色区分。这个简单，只需要设置fill-extrusion-color即可 [外链图片转存失败,源站可能有防盗链机制,
028：Mapbox GL 绘制线段，实时测量长度距离值
大剑师兰特的GIS世界
04-26 1572
第028个本示例的目的是介绍演示如何在vue+mapbox中添加draw组件，绘制线段，编辑线段，实时显示长度值。这里使用turf来计算长度值，采用默认的单位千米。
001：Mapbox GL加载基础的地图
大剑师兰特的GIS世界
04-12 1876
第001个本示例的目的是介绍演示如何在vue+mapbox中加载最基础的 Mapbox GL地图。
使用Mapbox GL绘制3D线
ChDevops的博客
09-22 606
Mapbox GL是一种强大的地图渲染库，它提供了丰富的功能来呈现地理数据。在本文中，我们将介绍如何使用Mapbox GL绘制3D线，并提供相应的源代码供参考。首先，我们需要在网页中引入Mapbox GL的JavaScript库。你可以在Mapbox官方网站上注册一个免费的开发者账户，并获取访问令牌。接下来，我们需要创建一个具有正确样式和初始视图的地图容器。在JavaScript部分的代码中，我们将使用。完成以上步骤后，保存并刷新你的网页，你将看到绘制出的3D线条在地图上显示出来。在上述代码中，你需要将。
mapbox-gl-draw 绘制态势标绘-分队战斗行动
xm_w_xm的博客
02-14 1074
mapbox-gl-draw 绘制态势标绘-分队战斗行动
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值