maptalks图层交互 - 模拟 Tooltip
maptalks图层交互 - 模拟 Tooltip
图层交互-模拟tooltip官方文档
<!DOCTYPE html>
<html><meta charset='UTF-8' /><meta name='viewport' content='width=device-width, initial-scale=1' /><title>图层交互 - 模拟 Tooltip</title><style type='text/css'>html,body {width: 100%;height: 100%;margin: 0px;}.container {background-color: #444444;width: 100%;height: 100%;}.marker-info {font-size: 14px;color: #fff;/* text-shadow: 2px 0 white; */background-color: rgba(0, 0, 0, 0.7);border: 1px solid rgba(255, 255, 255, 0.7);/* width: 120px; */min-width: 60px;height: auto;line-height: 20px;text-align: center}</style><link rel='stylesheet' href='https://maptalks.com/api/maptalks-gl.css' /><script type='text/javascript' src='https://maptalks.com/api/maptalks-gl.js'></script><body><script type="text/javascript" src="/lib/mt.gui.min.js"></script><div id="map" class="container"></div><script>const map = new maptalks.Map("map", {center: [-74.00912099912109, 40.71107610933129],zoom: 16,lights: {directional: {direction: [1, 0, -1],color: [1, 1, 1]},ambient: {resource: {// url: {// front: "/resources/hdr/gradient/front.png",// back: "/resources/hdr/gradient/back.png",// left: "/resources/hdr/gradient/left.png",// right: "/resources/hdr/gradient/right.png",// top: "/resources/hdr/gradient/top.png",// bottom: "/resources/hdr/gradient/bottom.png"// },prefilterCubeSize: 1024},hsv: [0, 0.34, 0],orientation: 0}}});/**start**/const style = {style: [{name: 'area-fill',filter: true,renderPlugin: {dataConfig: {type: "fill"},sceneConfig: {},type: "fill"},symbol: {polygonFill: "#996247",polygonOpacity: 1}},{name: 'area-border',filter: true,renderPlugin: {dataConfig: {type: "line"},sceneConfig: {},type: "line"},symbol: {lineColor: "#E2E2E2",lineOpacity: 1,lineWidth: 2}}]};const geo = new maptalks.GeoJSONVectorTileLayer("geo", {data: "/resources/geojson/area.geojson",style});geo.on("dataload", (e) => {map.fitExtent(e.extent);});const highLightKey = 'test';function highLight(feature, layer) {layer.highlight([{id: feature.id,plugin: 'area-fill',name: highLightKey,color: 'red'}]);}function cancel(layer) {layer.cancelHighlight([highLightKey]);}map.on('mousemove', e => {const data = geo.identify(e.coordinate);if (!data || !data.length) {cancel(geo);uiMarker.remove();return;}const feature = data[data.length - 1].data.feature;highLight(feature, geo);showInfo(e.coordinate, feature);// console.log(data[0]);})function getMarkerContent(feature) {return `<div class="marker-info">${feature.properties.name}</div>`;}function showInfo(coordinate, feature) {if (!uiMarker.getMap()) {uiMarker.addTo(map);}uiMarker.setContent(getMarkerContent(feature));uiMarker.setCoordinates(coordinate);}var uiMarker = new maptalks.ui.UIMarker(map.getCenter(), {content: '<div class="text_marker">maptalks</div>',dy: 30});/**end**/const groupLayer = new maptalks.GroupGLLayer("group", [geo], {sceneConfig: {environment: {enable: true,mode: 1,level: 0,brightness: 0}}});groupLayer.addTo(map);</script></body></html>
相关文章：
maptalks图层交互 - 模拟 Tooltip
maptalks图层交互 - 模拟 Tooltip 图层交互-模拟tooltip官方文档 <!DOCTYPE html> <html><meta charsetUTF-8 /><meta nameviewport contentwidthdevice-width, initial-scale1 /><title>图层交互 - 模拟 Tooltip</title><style typet…...
windows环境下NER Python项目环境配置（内含真的从头安的perl配置）
注意 本文是基于完整项目的环境配置，即本身可运行项目你拿来用 其中有一些其他问题，知道的忽略即可 导入pycharm基本包怎么下就不说了（这个都问？给你一拳o(｀ω*)o） 看perl跳转第5条 1.predict报错多个设备…...
IDEA批量替换项目下所有文件中的特定内容
文章目录 1. 问题引入2. 批量替换项目下所有文件中的特定内容2.1 右键项目的根目录，点击在文件中替换2.2 输入要替换的内容 3. 解决替换一整行文本后出现空行的问题4. 增加筛选条件提高匹配的精确度 更多 IDEA 的使用技巧可以查看 IDEA 专栏： IDEA 1. 问…...
【计算机网络】网络编程
文章目录 1. 客户端/服务器2. TCP/UDP协议3. 网络编程套接字-socket3.1 API的使用3.1 DatagramScoket类3.1 DatagramScoket类 4. 通过UDP实现回显服务器程序4.1 服务器代码4.2 客户端代码4.3 代码执行过程4.4 通过UDP实现翻译客户端 5. 通过TCP实现回显服务器5.1 服务器代码5.2…...
Django 中@login_required 配置详解
在 Django 中对 login_required 进行配置，主要涉及全局配置和视图函数局部配置两方面，下面为你详细介绍配置方法。 全局配置 全局配置主要是设定默认的登录 URL，也就是当未登录用户尝试访问被 login_required 装饰的视图时，会被…...
【408--复习笔记】数据结构
【408--复习笔记】数据结构 1.绪论2.线性表3.栈、队列、数组4.串5.树与二叉树6.图7.查找8.排序 1.绪论 2.线性表 3.栈、队列、数组 4.串 5.树与二叉树 6.图 7.查找 8.排序...
Android ＜queries＞声明的作用和配置方法
在Android应用中使用resolveActivity方法会提示在清单文件中添加标签，下面我们就看下声明的作用和配置方法： 一、queries 声明的作用 在Android 11及更高版本中，声明被引入以控制应用之间的交互。通过在AndroidManifest.xml中添加标签&…...
C++多线程编程：从创建到管理的终极指南
在高性能计算时代，掌握多线程编程是提升程序效率的必修课！本文将手把手教你如何用C++11标准库轻松创建和管理线程，告别单线程的“龟速”，让代码跑出多核CPU的性能！ 一、多线程为何重要？ 充分利用多核CPU：现代计算机普遍支持多核并行，多线程可让程序性能指数级提升。提升…...
【蓝桥杯】4535勇闯魔堡（多源BFS + 二分）
思路 k有一个范围（0到怪物攻击的最大值），求满足要求的k的最小值。很明显的二分套路。 关键是check函数怎么写，我们需要找到一条从第一行到最后一行的路径，每一次可以从上下左右四个方向前进，那么我么可以用…...
HTML图像标签的详细介绍
1. 常用图像格式 格式特点适用场景JPEG有损压缩，文件小，不支持透明适合照片、复杂图像PNG无损压缩，支持透明（Alpha通道）适合图标、需要透明背景的图片GIF支持动画，最多256色简单动画、低色彩图标WebP谷歌开…...
Chapter 4-15. Troubleshooting Congestion in Fibre Channel Fabrics
show zone member: Shows the name of the zone to which a device belongs to. This command can be used to find the victims of a culprit device or vice versa. 显示设备所属的区域名称。该命令可用于查找罪魁祸首设备的受害者，反之亦然。 show zone active: Shows the…...
QT三 自定义控件
一 自定义控件 现在的需求是这样： 假设我们要在QWidget 上做定制，这个定制包括了关于 一些事件处理，意味着要重写QWidget的一些代码，这是不实际的，因此我们需要自己写一个MyWidget继承QWidget，然后再MyWi…...
在 ASP .NET Core 9.0 中使用 Scalar 创建漂亮的 API 文档
示例代码：https://download.csdn.net/download/hefeng_aspnet/90407900 Scalar 是一款可帮助我们为 API 创建精美文档的工具。与感觉有些过时的默认 Swagger 文档不同，Scalar 为 API 文档提供了全新而现代的 UI。其简洁的设计让开发人员可以轻松找到测试…...
用于 RGB-D 显著目标检测的点感知交互和 CNN 诱导的细化网络（问题）
摘要 问题一：但在对自模态和跨模态的全局长距离依赖关系进行建模方面仍显不足。什么意思？ 自模态（Intra-modal）全局依赖：在同一模态内，长距离像素之间的信息交互对于理解全局背景很重要，但 CN…...
python3 -m http.sever 8080加载不了解决办法
解决方法很多，本文设置各种处理方法，逻辑上需要根据你的自身情况选择 我会告诉你遇到这种问题怎么做，根据具体症状处理 如需转载，标记出处 背景： 1。如图 2.。域名访问不了 http://www.meiduo.site:8080/register.ht…...
Oracle数据库性能优化全攻略：十大关键方向深度解析与实践指南
文章目录 一、SQL查询优化二、索引优化三、内存管理四、I/O优化五、分区表与分区索引六、并行处理七、统计信息管理八、锁与并发控制九、数据库参数调优十、应用设计优化结论 在当今数据驱动的时代，数据库的性能优化成为了确保企业应用高效运行的关键。Oracle作为业…...
第十一章 | 智能合约主网部署与验证详解
📚 第十一章 | 智能合约主网部署与验证详解 ——让你的合约真正上线、公开、透明！ ✅ 本章导读 前面我们写了各种合约，ERC20、NFT、DAO…… 但只在本地测试或测试网上部署运行，项目还没“上链”！ 主网上线部署&#…...
蓝桥杯 回文数组
问题描述 小蓝在无聊时随机生成了一个长度为 n 的整数数组，数组中的第 i 个数为 a_i，他觉得随机生成的数组不太美观，想把它变成回文数组，也就是对于任意 i ∈ [1, n] 满足： a_i a_(n-i1)小蓝一次操作可以指定相邻的…...
windows清除电脑开机密码，可保留原本的系统和资料，不重装系统
前言 很久的一台电脑没有使用了，开机密码忘了，进不去系统 方法 1.将一个闲置u盘设置成pe盘（注意，这个操作会清空原来u盘的数据，需要在配置前将重要数据转移走，数据无价，别因为配置这个丢了重…...
【深度学习】【目标检测】【Ultralytics-YOLO系列】Windows11下YOLOV3人脸检测
【深度学习】【目标检测】【Ultralytics-YOLO系列】Windows11下YOLOV3人脸检测 文章目录 【深度学习】【目标检测】【Ultralytics-YOLO系列】Windows11下YOLOV3人脸检测前言YOLOV3模型运行环境搭建YOLOV3模型运行数据集准备YOLOV3运行模型训练模型验证模型推理导出onnx模型 总结…...
html5-qrcode前端打开摄像头扫描二维码功能
实现的效果如图所示，全屏打开并且扫描到二维码后弹窗提醒，主要就是使用html5-qrcode这个依赖库，html5-qrcode开源地址：GitHub - mebjas/html5-qrcode: A cross platform HTML5 QR code reader. See end to end implementation at:…...
ui_auto_study（持续更新）
通过where python来找到python解释器的安装目录 如果不适配，谷歌浏览器插件可以在这个地址下载对应的驱动 谷歌浏览器驱动下载地址 下载对应的驱动版本，替换原驱动 替换后，可以执行成功 div代表标签 .开头的代表类# 使用class定位元素 …...
从Oracle到腾讯TDSQL数据库升级技术分享
目录 一、腾讯TDSQL简介 1.强大的分布式能力 2.高度兼容性 3.高可用性与容错性 4.云原生特性 二、Java类应用主要出现的问题及解决方案 1.驱动问题 2.事务处理差异 3.存储过程与函数的适配 三、性能调优问题及方案 1.索引优化 2.查询缓存利用 3.参数调优 四、生产…...
【nodejs】爬虫路漫漫，关于nodejs的基操
一.下载安装nodejs 官网地址：Node.js — 在任何地方运行 JavaScript 二.下载安装vscode代码编辑器 官网地址：Download Visual Studio Code - Mac, Linux, Windows 三.修改本地脚本策略 1，windowsi 打开电脑设置 2，输入powersh…...
蓝桥杯C++基础算法-0-1背包
这段代码实现了一个经典的0-1 背包问题的动态规划解法。0-1 背包问题是指给定一组物品，每个物品有其体积和价值，要求在不超过背包容量的情况下，选择物品使得总价值最大。以下是代码的详细思路解析： 1. 问题背景 给定 n 个物品&am…...
常见中间件漏洞攻略-Jboss篇
一、CVE-2015-7501-Jboss JMXInvokerServlet 反序列化漏洞 第一步：开启靶场 第二步：访问该接口，发现直接下载，说明接⼝开放，此接⼝存在反序列化漏洞 http://47.103.81.25:8080/invoker/JMXInvokerServlet 第三步&…...
quartz.net条件执行
quartz.net条件执行 在使用Quartz.NET时，你可能需要基于某些条件来决定是否执行一个任务。Quartz.NET本身并不直接支持基于条件执行任务的功能，但你可以通过一些策略来实现这一需求。下面是一些方法来实现基于条件的任务执行： 1. 使用触发器…...
docker利用ollama +Open WebGUI在本地搭建部署一套Deepseek-r1模型
系统：没有限制，可以运行docker就行 磁盘空间：至少预留50GB; 内存：8GB docker版本：4.38.0 桌面版 下载ollama镜像 由于docker镜像地址，网络不太稳定，建议科学上网的一台服务器拉取ollama镜像&am…...
java TCP UDP 客户端访问例子和对比差异
Java TCP客户端示例 import java.io.*; import java.net.*;public class TCPClient {public static void main(String[] args) {try (Socket socket new Socket("localhost", 12345); // 连接服务端PrintWriter out new PrintWriter(socket.getOutputStream(), t…...
两个还算好用的ppt转word和PDF转word的python脚本
PPT转word： import re from pptx import Presentation from docx import Document from docx.shared import Inches from io import BytesIO from PIL import Imagedef clean_text(text):# 使用正则表达式删除控制字符和NULL字节return re.sub(r[\x00-\x1F\x7F], ,…...