地图框架之mapbox——（五）
今天主要学习mapbox中如何使用画笔！
一、导入画笔依赖
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.css" type="text/css">二、代码实现
默认情况下所有类型画笔全部加载
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 导入依赖 --><script src='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js'></script><link href='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css' rel='stylesheet' /><!-- 导入依赖 --><script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.js"></script><link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.css"type="text/css"><style>* {margin: 0;padding: 0}#map {width: 100vw;height: 100vh;}</style>
</head><body><div id="map"></div><script>//tokenmapboxgl.accessToken = '你的token';const gaode = {"version": 8,"sources": {"raster-tiles": {"type": "raster","tiles": ["http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"],"tileSize": 256}},"layers": [{"id": "simple-tiles","type": "raster","source": "raster-tiles","minzoom": 0,"maxzoom": 22}]}const map = new mapboxgl.Map({container: 'map', // container IDstyle: gaode, // style URLcenter: [114.30, 30.50], // starting position [lng, lat]zoom: 9, // starting zoom});/* 实例化画笔 */const draw = new MapboxDraw({})/* 将画笔作为控件添加给map */map.addControl(draw, 'top-left')/* 监听画笔 */map.on("draw.create", handleDraw)function handleDraw(evt) {console.log(evt.features[0])}</script>
</body></html> const draw = new MapboxDraw({controls: {// point: false,line_string: true,polygon: false,trash: false,combine_features: false,uncombine_features: false}})通过true或false决定是否显示该画笔
三、设置画笔的模式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 导入依赖 --><script src='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js'></script><link href='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css' rel='stylesheet' /><!-- 导入依赖 --><script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.js"></script><link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.css"type="text/css"><style>* {margin: 0;padding: 0}#map {width: 100vw;height: 100vh;}#btn {width: 200px;height: 50px;position: fixed;top: 20px;left: 60px;z-index: 100;}#clear {width: 200px;height: 50px;position: fixed;top: 20px;left: 260px;z-index: 100;}</style>
</head><body><button id="btn" onclick="activeDraw()">激活画笔</button><button id="clear" onclick="clearDraw()">清空数据</button><div id="map"></div><script>//tokenmapboxgl.accessToken = '你的token';const gaode = {"version": 8,"sources": {"raster-tiles": {"type": "raster","tiles": ["http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"],"tileSize": 256}},"layers": [{"id": "simple-tiles","type": "raster","source": "raster-tiles","minzoom": 0,"maxzoom": 22}]}const map = new mapboxgl.Map({container: 'map', // container IDstyle: gaode, // style URLcenter: [114.30, 30.50], // starting position [lng, lat]zoom: 9, // starting zoom});/* 实例化画笔 */const draw = new MapboxDraw({/* 如果设置false 可以将画笔全部隐藏 */displayControlsDefault: false})/* 将画笔作为控件添加给map */map.addControl(draw, 'top-left')/* 监听画笔 */map.on("draw.create", handleDraw)function handleDraw(evt) {console.log(evt.features[0])}function activeDraw() {/* draw changeModel *//* draw_point *//* draw_line_string *//* draw_polygon */draw.changeMode("draw_polygon")}function clearDraw() {/* 删除画笔的图形 */// console.log(draw);draw.deleteAll();}</script>
</body></html>具体的有关画笔的其他内容可以参考官方文档，下面是画笔的github地址，其实掌握上面的内容基本就足够了。
GitHub - mapbox/mapbox-gl-draw: Draw tools for mapbox-gl-js
工作中一般来说需要结合turf.js使用，下面是turf.js的地址，后面有时间的话，也会给大家出一些文章讲一讲。
Turf.js中文网 | Turf.js中文网
相关文章：
地图框架之mapbox——（五）
今天主要学习mapbox中如何使用画笔！ 一、导入画笔依赖 <script src"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.js"></script> <link rel"stylesheet" href"https://api.mapbox…...
Hive 的数据类型
基本类型 整型 TINYINT: 1字节整数，范围从 -128 到 127。SMALLINT: 2字节整数，范围从 -32,768 到 32,767。INT: 4字节整数，范围从 -2,147,483,648 到 2,147,483,647。BIGINT: 8字节整数，范围从 -9,223,372,036,854,775,808 到 9…...
2024下半年软考考后估分，快来预约！
2024下半年软考这周末就要开考了！考后大家最关心的，莫过于考试成绩。届时会为家更新回忆版真题及答案，现在就可以开始预约啦~ 因为是回忆版，老师做题也需要时间，答案会慢慢更新，大家耐心等待片刻ÿ…...
第8章 利用CSS制作导航菜单作业
1.利用CSS技术，结合链接和列表，设计并实现“山水之间”页面。 浏览效果如下： HTML代码如下： <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>山水之间</title><…...
基于Spring Boot的船舶监造系统的设计与实现，LW+源码+讲解
摘要 近年来，信息化管理行业的不断兴起，使得人们的日常生活越来越离不开计算机和互联网技术。首先，根据收集到的用户需求分析，对设计系统有一个初步的认识与了解，确定船舶监造系统的总体功能模块。然后，详…...
linux强制修改mysql的root账号密码
在Linux环境下，如果您忘记了MySQL的root密码，可以通过以下步骤来强制修改root密码： 在执行这些步骤之前，请确保您有足够的权限来执行这些命令。 停止MySQL服务： systemctl stop mysql 启动MySQL的安全模式，…...
CentOS系统查看CPU、内存、操作系统等信息
Linux系统提供了一系列命令可以用来查看系统硬件信息，如CPU的物理个数、核数、逻辑CPU数量、内存信息和操作系统版本。 查看物理CPU、核数和逻辑CPU 在多核、多线程的系统中，了解物理CPU个数、每个物理CPU的核数和逻辑CPU个数至关重要。超线程技术进一步…...
针对解决前后端BUG的个人笔记
1-IDEA Q：Required Java version 17 is not supported by SDK 1.8. The maximum supported Java version is 8. A: 我们只知道IDEA页面创建Spring项目，其实是访问spring initializr去创建项目。故我们可以通过阿里云国服去间接创建Spring项目。将https…...
5G时代已来：我们该如何迎接超高速网络？
内容概要 随着5G技术的普及，我们的生活似乎变得更加“科幻”了。想象一下，未来的智能家居将不仅仅是能够听你说“开灯”；它们可能会主动询问你今天心情如何，甚至会推荐你一杯“维他命C芒果榨汁”，帮助你抵御夏天的炎热…...
企业级-实现Redis封装层
作者：fyupeng 技术专栏：☞ https://github.com/fyupeng 项目地址：☞ https://github.com/fyupeng/distributed-blog-system-api 留给读者 封装 Redis 客户端Dao层、分布式锁等。 一、介绍 二、代码 DataInitialLoadRunner.java /*** Clas…...
SpringBoot使用ApplicationContext.getBean启动报空指针处理记录
问题：项目启动报空指针 定位：新增filter中init方法使用getbean控制 解决：在新增filter上加注解 DependsOn({"applicationContextUtils"}) Component DependsOn({"applicationContextUtils"})//此处解决空指针问题 pu…...
MongoDB Shell 基本命令(三）聚合管道
管道含义 类似Linux中的管道，前一个命令的输出作为后一个命令的输入。 显示网络连接、路由表和网络接口统计信息 netstat -ano -netstat:network statistics 网络统计 -a:显示所有连接和监听端口，包括所有活动的TCP和UDP连接。 -n:以数字形式显示地址…...
Go语言的内置容器
文章目录 一、数组数组的定义数组声明数组特点数组元素修改 二、切片切片声明基于数组创建切片使用make()函数构造切片使用append()为切片动态添加元素\使用copy()复制新的切片数组与切片相互转换 三、Map映射Map定义使用make()函数创建map用切片作为map的值使用delete()函数删…...
HCIP考试怎样预约？随时可以考试吗？
HCIP（华为认证互联网协议专家）的考试并不是随时都能参加的，考生需要避开法定节假日来预约考试。具体的考试时间会根据所选的认证方向和考试中心有所变化。考生可以通过华为人才在线平台或者直接联系Pearson VUE来安排考试时间。 HCIP认证考试…...
香港航空 阿里滑块 acw_sc__v3 分析
声明: 本文章中所有内容仅供学习交流使用，不用于其他任何目的，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！ 有相关问题请第一时间头像私信联系我删…...
JS传统函数中常见的 this 绑定问题
在 JavaScript 中，传统函数的 this 绑定规则依赖于函数的调用方式，这常常导致一些意外的行为和常见的 this 绑定问题。以下是一些典型的 this 绑定问题及其解决方案。 1. 作为对象方法调用时的 this 丢失 当一个对象的方法被赋值给一个变量或作为回调函…...
跨域问题以及使用vscode的LiveServer插件跨域访问
目录 现象跨域问题的定义（文心一言）解决办法同源部署后端代理VS Code LiveServer 现象 以下前端代码部署后，在网页访问时报错：No ‘Access-Control-Allow-Origin’ header is present on the requested resource. $.ajax({url:…...
现代Web开发：WebSocket 实时通信详解
💓 博客主页：瑕疵的CSDN主页 📝 Gitee主页：瑕疵的gitee主页 ⏩ 文章专栏：《热点资讯》 现代Web开发：WebSocket 实时通信详解 现代Web开发：WebSocket 实时通信详解 现代Web开发：WebS…...
《深度学习》——深度学习基础知识（全连接神经网络）
文章目录 1.神经网络简介2.什么是神经网络3.神经元是如何工作的3.1激活函数3.2参数的初始化3.2.1随机初始化3.2.2标准初始化3.2.3Xavier初始化（tf.keras中默认使用的）3.2.4He初始化 4.神经网络的搭建4.1通过Sequential构建神经网络4.2通过Functional API…...
nginx 部署2个相同的vue
起因： 最近遇到一个问题，在前端用nginx 部署 vue， 发现如果前端有改动，如果不适用热更新，而是直接复制项目过去，会404 因此想到用nginx 负载两套相同vue项目，然后一个个复制vue项目就可以了。…...
实战指南：利用快马平台为不同项目类型智能定制idea开发环境与工具链
今天想和大家分享一个实战经验：如何根据不同项目类型，快速定制专属的IDEA开发环境。作为开发者，我们经常需要切换不同技术栈，每次手动安装插件、配置SDK的过程实在太费时间。最近发现用InsCode(快马)平台可以智能解决这个问题&…...
华硕笔记本风扇异常修复终极指南：用G-Helper轻松解决散热问题
华硕笔记本风扇异常修复终极指南：用G-Helper轻松解决散热问题 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, TUF, St…...
COMSOL多场耦合地应力平衡开挖与衬砌支护案例：带衬砌与钢衬支护的实践研究
COMSOL 地应力平衡后开挖及衬砌支护案例（带衬砌、钢衬）隧道开挖模拟最头疼的就是初始地应力场的平衡问题。前些天用COMSOL折腾了个带衬砌支护的案例，今天把关键步骤拆开说说。咱们直接从地应力平衡开始，到开挖后钢衬安装一气呵成。…...
Ender3V2S1切片器脚本配置指南：优化3D打印效果的完整教程
Ender3V2S1切片器脚本配置指南：优化3D打印效果的完整教程 【免费下载链接】Ender3V2S1 This is optimized firmware for Ender3 V2/S1 3D printers. 项目地址: https://gitcode.com/gh_mirrors/en/Ender3V2S1 Ender3V2S1是一款备受欢迎的3D打印机，…...
测试右移的复仇：上线后bug如何让公司赔光融资
当质量防线在“最后一公里”失守在软件交付的终点线前，测试团队常被一种“虚假的安全感”所笼罩。测试环境用例全绿，性能压测数据达标，验收报告签字盖章，一切似乎都指向一个平稳的上线。然而，当代码被部署到生产环境&a…...
OpenMS全面解析：开源质谱数据分析平台的实战指南
OpenMS全面解析：开源质谱数据分析平台的实战指南 【免费下载链接】OpenMS The codebase of the OpenMS project 项目地址: https://gitcode.com/gh_mirrors/op/OpenMS OpenMS是一款功能全面的开源质谱数据分析平台，专为液相色谱-质谱(LC-MS)数据管…...
如何在3小时内构建你的第一个炉石传说AI机器人？Hearthrock终极指南
如何在3小时内构建你的第一个炉石传说AI机器人？Hearthrock终极指南 【免费下载链接】hearthrock Hearthstone Bot Engine 项目地址: https://gitcode.com/gh_mirrors/he/hearthrock Hearthrock是一个革命性的炉石传说AI引擎，专为人工智能研究者和…...
手把手教你用HuggingFace+BGE模型搭建本地向量检索系统（附FAISS实战代码）
从零构建基于BGE模型的本地语义搜索系统：代码级实践指南 在信息爆炸的时代，如何快速从海量文本中精准找到相关内容？语义搜索技术正成为解决这一痛点的利器。不同于传统的关键词匹配，语义搜索能理解查询背后的意图，找到…...
Phi-3-mini-4k-instruct-gguf快速部署：7860端口网页服务+独立venv隔离环境实录
Phi-3-mini-4k-instruct-gguf快速部署：7860端口网页服务独立venv隔离环境实录 1. 模型简介 Phi-3-mini-4k-instruct-gguf 是微软 Phi-3 系列中的轻量级文本生成模型 GGUF 版本。这个模型特别适合以下场景： 智能问答文本改写与润色内容摘要生成简短创意…...
QT老版本下载被拒？手把手教你用迅雷搞定5.12.12和4.8.7离线安装包
QT老版本下载难题破解：从地址拼接到离线安装全指南 遇到QT老版本下载被拒的提示？别急着放弃。对于需要维护遗留系统或确保项目兼容性的开发者来说，获取特定版本的QT框架往往成为一道必须跨越的门槛。本文将带你深入理解QT官方下载机制&#…...