[vue2项目]vue2+supermap[mapboxgl]+天地图之地图的基础操作(画线+自定义打点)

二、地图的基础操作

1、画线

案例(1)

在这里插入图片描述

 this.map.on("load", () => {let geometryLine = {type: "Feature",geometry: {// 定义类型type: "LineString",coordinates: [[113.39793764, 34.05675322],[113.35187554, 32.4392251],[112.47685179, 31.89344325],[112.29263185, 30.75257895],[112.43079033, 30.15709126],[113.9505599, 29.75808719],[114.45714743, 29.23699965],[115.34044715, 28.22369668],[115.59740867, 27.5140793],[115.59740829, 27.45850126]],},};this.map.addLayer({id: "river",type: "line",source: {type: "geojson",data: geometryLine,},layout: {"line-join": "round","line-cap": "round",},paint: {"line-color": "red","line-width": 5,},});});

案例 (2)绘制中国边界线

Datav
在Datav网站上获取中国边界线经纬度
在这里插入图片描述在这里插入图片描述在scr目录下创建util文件并把下载的json文件保存在该目录下,并改名为China.json在这里插入图片描述
在组件中引入json文件

在这里插入图片描述运行后
在这里插入图片描述
主要代码

this.ChinaBorder.features[0].geometry.coordinates.forEach((item,index) => {let coordinates = [];item.forEach((item2) => {coordinates.push(item2);});// 处理中国边界经纬度数据this.map.on("load", () => {let geometryLine = {type: "Feature",geometry: {// 定义类型type: "LineString",coordinates: coordinates,},};this.map.addLayer({id: "border"+index,type: "line",source: {type: "geojson",data: geometryLine,},layout: {"line-join": "round","line-cap": "round",},paint: {"line-color": "red","line-width": 10,},});});});

2、自定义打点(图片+文字)

在这里插入图片描述

const el = document.createElement("div");el.className = "icon_box";el.style.width = `100px`;el.style.height = `100px`;el.style.backgroundSize = "100%";el.innerHTML = `<div><div class='icon' style='width:30px;height:30px;'></div><span class='title'>文字说明</span></div>`;new mapboxgl.Marker(el).setLngLat([118.0626924, 26.71411572]).addTo(this.map);
/deep/.icon_box {// position: relative;z-index: 8;width: 30px !important;height: 30px !important;font-size: 12px;color: #fff;// 图片.icon {width: 30px !important;height: 30px !important;z-index: 5;background-image: url("../../static/location.png");background-size: cover;}// 文字说明样式.title{position: absolute;bottom: 35px;white-space: nowrap;left:20px;background: #212f7f;color: #94e9ff;padding: 3px 8px 2px 8px;border-radius: 5px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.3);}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/339259.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RHCSA —— 第四节 (远程连接Linux服务器)

一、远程连接 远程连接linux服务器的方式&#xff1a;以显示的类型来分类&#xff0c;可以分为字符界面和图形界面两种。 字符界面软件有SecureCRT、PUTTY、Xshell、mobaxterm等&#xff1b;图形界面有Xmanager、Xdmcp和VNC软件等 二、Xshell 远程连接 Linux 远程连接命令&am…

蓝桥杯软件测试-十五届模拟赛2期题目解析

十五届蓝桥杯《软件测试》模拟赛2期题目解析 PS 需要第十五界蓝桥杯模拟赛2期功能测试模板、单元测试被测代码、自动化测试被测代码请加&#x1f427;:1940787338 备注&#xff1a;15界蓝桥杯省赛软件测试模拟赛2期 题目1&#xff1a;功能测试题目 1&#xff08;测试用例&…

Python | Leetcode Python题解之第128题最长连续序列

题目&#xff1a; 题解&#xff1a; class Solution:def longestConsecutive(self, nums: List[int]) -> int:longest_streak 0num_set set(nums)for num in num_set:if num - 1 not in num_set:current_num numcurrent_streak 1while current_num 1 in num_set:curre…

mac油猴Safari浏览器插件:Tampermonkey for Mac下载

Tampermonkey 是一款用于浏览器的用户脚本管理器插件&#xff0c;它允许用户安装、管理和运行用户脚本&#xff0c;从而可以自定义网页的功能和外观。该插件支持在谷歌浏览器、火狐浏览器、Safari等主流浏览器上使用。提供了丰富的用户脚本管理和自定义功能&#xff0c;使用户可…

Python代码关系图生成,帮助快速熟悉一个项目

一、静态代码关系图 工具1、pyreverse pyreverse 是一个由 Logilab 开发的 Python 工具&#xff0c;它能够自动生成 UML (统一建模语言) 类图&#xff0c;这些类图基于 Python 源代码。pyreverse 可以分析 Python 代码&#xff0c;并从中提取出类、模块、函数、方法和它们之间…

Flutter开发效率提升1000%,Flutter Quick教程之对组件进行拖拽与接收

1&#xff0c;首先&#xff0c;所有可以选择的组件&#xff0c;都在左边的组件面板里。从里面点击任何一个&#xff0c;按住左键&#xff0c;向右边的手机面板上进行拖拽即可。 2&#xff0c;拖拽后&#xff0c;我们要选择一个接收组件。什么时候可以接收组件&#xff0c;就是当…

Ubuntu 24.04 LTS 安装Docker

1 更新软件包索引&#xff1a; sudo apt-get update 2 安装必要的软件包&#xff0c;以允许apt通过HTTPS使用仓库&#xff1a; sudo apt-get install apt-transport-https ca-certificates curl software-properties-common 3 添加Docker的官方GPG密钥&#xff1a; curl -fs…

性能优化随笔(一)

在软件开发过程中&#xff0c;一般要先实现功能方面的需求&#xff0c;功能方面的需求开发完毕之后&#xff0c;往往会考虑性能方面的优化。在业务发展的初期&#xff0c;性能往往能满足使用的需求&#xff0c;这时性能优化不是必不可少的。随着业务的发展&#xff0c;软件复杂…

STM32系列(HAL库)——F103C8T6通过HC-SR04超声波模块实现测距

文章目录 一、SR-04基本原理二、CubeMx配置1.配置RCC、SYS、时钟树2.配置GPIO3.配置串口14.配置定时器5.开启定时器中断 三、keil代码四、运行效果接线效果 参考&#xff1a; 一、SR-04基本原理 HC-SR04超声波测距模块提供2cm~400cm的测距功能&#xff0c;精度达3mm。 以下图…

【C++杂货铺】unordered系列容器

目录 &#x1f308; 前言&#x1f308; &#x1f4c1; unordered系列关联式容器 &#x1f4c1; 底层结构 &#x1f4c2; 哈希概念 &#x1f4c2; 哈希冲突 &#x1f4c2; 哈希函数 &#x1f4c2; 哈希冲突解决 &#x1f4c1; 模拟实现 &#x1f4c1; 总结 &#x1f308; 前…

mysql的增删查改(进阶)

目录 一. 更复杂的新增 二. 查询 2.1 聚合查询 COUNT SUM AVG MAX MIN 2.1.2 分组查询 group by 子句 2.1.3 HAVING 2.2 联合查询/多表查询 2.2.1 内连接 2.2.2 外连接 2.2.3 全外连接 2.2.4 自连接 2.2.5 子查询 2.2.6 合并查询 一. 更复杂的新增 将从表名查询到…

MySQL—函数—日期函数(基础)

一、引言 接下来讨论和学习关于函数的第三个方面——日期函数。 常见的MySQL当中的日期函数。 注意&#xff1a; 1、CURDATE()&#xff1a;cur&#xff1a;current 当前的&#xff0c;返回的是当前日期。 2、CURTIME()&#xff1a;当前时间。 3、NOW&#xff1a;当前的日期和…

数据结构 实验 1

题目一&#xff1a;用线性表实现文具店的货品管理问题 问题描述&#xff1a;在文具店的日常经营过程中&#xff0c;存在对各种文具的管理问题。当库存文具不足或缺货时&#xff0c;需要进货。日常销售时需要出库。当盘点货物时&#xff0c;需要查询货物信息。请根据这些要求编…

Linux shell编程学习笔记55:hostname命令——获取或设置主机名,显示IP地址和DNS、NIS

0 前言 2024年的网络安全检查又开始了&#xff0c;对于使用基于Linux的国产电脑&#xff0c;我们可以编写一个脚本来收集系统的有关信息。其中主机名也是我们要收集的信息之一。 1. hostname命令 的功能、格式和选项说明 我们可以使用命令 hostname --help 来查看hostname命令…

Linux服务器扩容及磁盘分区(LVM和非LVM)

Linux扩容及磁盘分区&#xff08;LVM和非LVM&#xff09; 本文主要介绍了阿里云服务器centos的扩容方法&#xff1a;非LVM分区扩容方法&#xff08;系统盘&#xff09;&#xff0c;以及磁盘改LVM并分区&#xff08;数据盘&#xff09;。主要是ext4文件系统及xfs磁盘scsi MBR分…

每日一题《leetcode-- LCR 025.两数相加||》

https://leetcode.cn/problems/lMSNwu/ 分别把给定的两个链表翻转&#xff0c;然后从头开始相加。 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ //反转链表 struct ListNode* reverselist(struct ListNode*h…

虚拟现实环境下的远程教育和智能评估系统(七)

在后端代码的基础上&#xff0c;利用vue框架设计前端界面&#xff0c;至此&#xff0c;用户界面基本成型&#xff0c;后续添加其他进阶功能&#xff1b; 另&#xff0c;前后端交互相关&#xff1a; UsersVO.java package com.roncoo.education.user.feign.interfaces.vo;impor…

解决torch.cuda.is_available()一直为false的问题

一、检测脚本 import torchprint(torch.__version__) print(torch.cuda.is_available()) print(torch.version.cuda) 输出 二、解决排查 1、安装CUDA 根据驱动选择要安装的版本 安装网站&#xff1a;CUDA Toolkit Archive | NVIDIA Developer 安装成功后 2、安装cuDNN 注…

OJ1230进制的转换

答案&#xff1a; #include <bits/stdc.h> using namespace std; using lllong long; const int N10; int a[10]; char ch[]{0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F}; void solve() {int n,m;cin>>n>>m;string str;cin>>str;for(int i0;i<str.size();i)…

糖果促销【百度之星】/思维

糖果促销 思维 大佬的解法&#xff1a; #include<bits/stdc.h> using namespace std; typedef long long ll; int main() {ll t;cin>>t;for(int i0;i<t;i){ll p,k;cin>>p>>k;if(k0) cout<<0<<endl;else{k-(k-1)/p;cout<<k<…