antv L7结合高德地图使用dome1

antv L7结合高德地图使用

    • 一、设置底图
    • 二 、添加antv L7 中要使用的dome
        • 1. 安装L7 依赖
        • 2. 使用的dome 、以下使用的是浮动功能
        • 3. 运行后显示
      • 自定义样式修改
        • 1. 设置整个中国地图浮动起来
      • 自定义标注点
        • 1. 静态标注点
        • 2. 动态标注点（点位置需要自己改）
        • 3. 完整代码

官网文档

一、设置底图

// 引入高德数据可视化api2.0
import AMapLoader from '@amap/amap-jsapi-loader';

// 初始化地图数据this.$nextTick(() => {AMapLoader.load({"key": "xxxx",              // 申请好的Web端开发者Key，首次调用 load 时必填 这里的key要和使用功能权限一致才行"version": "2.0",       // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15"plugins": [],"Loca": {                // 是否加载 Loca， 缺省不加载"version": '2.0.0'  // Loca 版本，缺省 1.3.2},}).then((AMap) => {initMap(AMap)//掉用 antv L7方法}).catch(e => {console.log(e);})})

二 、添加antv L7 中要使用的dome

1. 安装L7 依赖
npm install --save @antv/l7
// 安装第三方底图依赖
npm install --save @antv/l7-maps
2. 使用的dome 、以下使用的是浮动功能
function initMap(AMap) {// 全局加载高德地图APIconst map = new AMap.Map('container', {viewMode: '3D',mapStyle: 'amap://styles/darkblue',center: [121.435159, 31.256971],zoom: 14.89,minZoom: 10});const scene = new Scene({id: 'container',map: new GaodeMap({mapInstance: map})});scene.on('loaded', () => {let lineDown,lineUp,textLayer;fetch('https://gw.alipayobjects.com/os/bmw-prod/ecd1aaac-44c0-4232-b66c-c0ced76d5c7d.json').then(res => res.json()).then(data => {const texts = [];data.features.map(option => {const { name, center } = option.properties;const [lng, lat] = center;texts.push({ name, lng, lat });return '';});textLayer = new PointLayer({ zIndex: 2 }).source(texts, {parser: {type: 'json',x: 'lng',y: 'lat'}}).shape('name', 'text').size(14).color('#0ff').style({textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-leftspacing: 2, // 字符间距padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近stroke: '#0ff', // 描边颜色strokeWidth: 0.2, // 描边宽度raisingHeight: 200000 + 150000 + 10000,textAllowOverlap: true});scene.addLayer(textLayer);lineDown = new LineLayer().source(data).shape('line').color('#0DCCFF').size(1).style({raisingHeight: 200000});lineUp = new LineLayer({ zIndex: 1 }).source(data).shape('line').color('#0DCCFF').size(1).style({raisingHeight: 200000 + 150000});scene.addLayer(lineDown);scene.addLayer(lineUp);return '';});fetch('https://gw.alipayobjects.com/os/bmw-prod/d434cac3-124e-4922-8eed-ccde01674cd3.json').then(res => res.json()).then(data => {const lineLayer = new LineLayer().source(data).shape('wall').size(150000).style({heightfixed: true,opacity: 0.6,sourceColor: '#0DCCFF',targetColor: 'rbga(255,255,255, 0)'});scene.addLayer(lineLayer);const provincelayer = new PolygonLayer({}).source(data).size(150000).shape('extrude').color('#0DCCFF').active({color: 'rgb(100,230,255)'}).style({heightfixed: true,pickLight: true,raisingHeight: 200000,opacity: 0.8});scene.addLayer(provincelayer);provincelayer.on('mousemove', () => {provincelayer.style({raisingHeight: 200000 + 100000});lineDown.style({raisingHeight: 200000 + 100000});lineUp.style({raisingHeight: 200000 + 150000 + 100000});textLayer.style({raisingHeight: 200000 + 150000 + 10000 + 100000});});provincelayer.on('unmousemove', () => {provincelayer.style({raisingHeight: 200000});lineDown.style({raisingHeight: 200000});lineUp.style({raisingHeight: 200000 + 150000});textLayer.style({raisingHeight: 200000 + 150000 + 10000});});return '';});return '';});
}
3. 运行后显示

在这里插入图片描述

自定义样式修改

1. 设置整个中国地图浮动起来

  1. 先更改地图json文件 ，https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
    在这里插入图片描述

  2. 运行后（因为我没有高亮部分数据，所以没有高亮，谁有能提供的话非常感谢！）

在这里插入图片描述

自定义标注点

1. 静态标注点
fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json').then(res => res.json()).then(data => {data.features = data.features.filter(item => {return item.properties.capacity > 800;});const pointLayer = new PointLayer({}).source(data).shape('circle').size('capacity', [0, 16]).color('capacity', ['#34B6B7','#4AC5AF','#5FD3A6','#7BE39E','#A1EDB8','#CEF8D6']).active(true).style({opacity: 0.5,strokeWidth: 0});scene.addLayer(pointLayer);});

在这里插入图片描述

2. 动态标注点（点位置需要自己改）
 //动图scene.on("loaded", () => {fetch("https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv").then((res) => res.text()).then((data) => {const pointLayer = new PointLayer({}).source(data, {parser: {type: "csv",x: "Longitude",y: "Latitude",},}).shape("circle").active(true).animate(true).size(56).color("#4cfd47");scene.addLayer(pointLayer);});});

在这里插入图片描述

3. 完整代码
<template><div id="container"></div>
</template>
<script>
// 引入高德数据可视化api2.0
import AMapLoader from "@amap/amap-jsapi-loader";
import { Scene, PolygonLayer, LineLayer } from "@antv/l7";
// import {  PointLayer } from '@antv/l7';
import { GaodeMap } from "@antv/l7-maps";function initMap(map) {const scene = new Scene({id: "container",map: new GaodeMap({mapInstance: map,}),});//动图scene.on("loaded", () => {fetch("https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv").then((res) => res.text()).then((data) => {const pointLayer = new PointLayer({}).source(data, {parser: {type: "csv",x: "Longitude",y: "Latitude",},}).shape("circle").active(true).animate(true).size(56).color("#4cfd47");scene.addLayer(pointLayer);});});//静图scene.on("loaded", () => {let lineDown, lineUp;//       fetch(//   "https://gw.alipayobjects.com/os/bmw-prod/ecd1aaac-44c0-4232-b66c-c0ced76d5c7d.json"//   // "../../../555555.json"// )//   .then((res) => res.json())//   .then((data) => {//     const texts = [];//     data.features.map((option) => {//       const { name, center } = option.properties;//       const [lng, lat] = center;//       texts.push({ name, lng, lat });//       return "";//     });//     textLayer = new PointLayer({ zIndex: 2 })//       .source(texts, {//         parser: {//           type: "json",//           x: "lng",//           y: "lat",//         },//       })//       .shape("name", "text")//       .size(14)//       .color("#0ff")//       .style({//         textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left//         spacing: 2, // 字符间距//         padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近//         stroke: "#0ff", // 描边颜色//         strokeWidth: 0.2, // 描边宽度//         raisingHeight: 200000 + 150000 + 10000,//         textAllowOverlap: true,//       });//     scene.addLayer(textLayer);//     lineDown = new LineLayer()//       .source(data)//       .shape("line")//       .color("#0DCCFF")//       .size(1)//       .style({//         raisingHeight: 200000,//       });//     lineUp = new LineLayer({ zIndex: 1 })//       .source(data)//       .shape("line")//       .color("#0DCCFF")//       .size(1)//       .style({//         raisingHeight: 200000 + 150000,//       });//     scene.addLayer(lineDown);//     scene.addLayer(lineUp);//     return "";//   });// 自定义标注点fetch("https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json").then((res) => res.json()).then((data) => {data.features = data.features.filter((item) => {return item.properties.capacity > 800;});const pointLayer = new PointLayer({}).source(data).shape("circle").size("capacity", [0, 16]).color("capacity", ["#34B6B7","#4AC5AF","#5FD3A6","#7BE39E","#A1EDB8","#CEF8D6",]).active(true).style({opacity: 0.5,strokeWidth: 0,});scene.addLayer(pointLayer);});//阴影范围-样式设置fetch("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json").then((res) => res.json()).then((data) => {const lineLayer = new LineLayer().source(data).shape("wall").size(150000).style({heightfixed: true,opacity: 0.9,sourceColor: "#0DCCFF",targetColor: "rbga(255,255,255, 0)",});scene.addLayer(lineLayer);const provincelayer = new PolygonLayer({}).source(data).size(150000).shape("extrude").color("#0DCCFF").active({color: "rgb(100,230,255)",}).style({heightfixed: true,pickLight: true,raisingHeight: 20000,opacity: 0.3,});scene.addLayer(provincelayer);provincelayer.on("mousemove", () => {provincelayer.style({raisingHeight: 20000 + 10000,});lineDown.style({raisingHeight: 20000 + 10000,});lineUp.style({raisingHeight: 20000 + 15000 + 10000,});});provincelayer.on("unmousemove", () => {provincelayer.style({raisingHeight: 20000,});lineDown.style({raisingHeight: 20000,});lineUp.style({raisingHeight: 20000 + 15000,});});return "";});return "";});
}export default {name: "map-view",mounted() {this.$nextTick(() => {AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: [],Loca: {// 是否加载 Loca， 缺省不加载version: "2.0.0", // Loca 版本，缺省 1.3.2},}).then((AMap) => {// 全局加载高德地图APIconst map = new AMap.Map("container", {viewMode: "3D",// pitch: -45,  // 设置地图倾斜角度为 -45 度bearing: 0, // 设置地图的旋转角度为 0 度mapStyle: "amap://styles/darkblue",center: [121.435159, 31.256971],zoom: 5,minZoom: 5,});initMap(map);}).catch((e) => {console.log(e);});});},methods: {},
};
</script>
<style scoped>
#container {width: 100vw;height: 100vh;background-color: black;
}
</style>

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

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

相关文章

Python笔记：函数

Python笔记：函数

Python函数定义规则&#xff1a; 函数代码块以def关键词开头&#xff0c;后接函数标识符名称和圆括号()。任何传入参数和自变量必须放在圆括号中间&#xff0c;圆括号之间可以用于定义参数。return [表达式] 结束函数&#xff0c;选择性地返回一个值给调用方&#xff0c;不带表…
阅读更多...
Windows系统中安装docker及镜像加速的配置

Windows系统中安装docker及镜像加速的配置

文章目录 一.安装wsl二.下载docker desktop三.更换Docker镜像引用出处 一.安装wsl 在安装wsl之前&#xff0c;先在Windows中配置WSL环境,步骤很简单&#xff0c;按照以下文章进行 Windows10/11配置WSL(Ubuntu)环境 以管理员身份打开Windows PowerShell&#xff0c;执行以下命…
阅读更多...
模型驱动架构MDA

模型驱动架构MDA

MDE 模型驱动工程&#xff08;MDE, Model-Driven Engineering&#xff09;是软件工程的一个分支&#xff0c;它将模型与建模拓展到软件开发的所有方面&#xff0c;形成一个多维建模空间&#xff0c;从而将工程活动建立在这些模型的映射和转换之上。[1] MDE的基本原则是将模型视…
阅读更多...
2.Windows平台Python的下载、安装和配置环境变量——跟老吕学Python编程

2.Windows平台Python的下载、安装和配置环境变量——跟老吕学Python编程

2.Windows平台Python的下载、安装和配置环境变量——跟老吕学Python编程 一、下载Windows版Python1.Python官网2.Windows版Python下载网址 二、在Windows安装Python1.全自动安装Python&#xff08;不推荐&#xff09;1.1 启动安装1.2 安装进度1.3 安装完成1.4 查看版本 2.自定义…
阅读更多...
【GO】HTTP标准库1 - http协议基础知识

【GO】HTTP标准库1 - http协议基础知识

目录 一 http协议 1 http协议 2 http request 3 请求方法 4 URL 5 协议版本 6 请求头 7 Content-type 9 POST与GET区别 10 HTTP Response 11 常见的状态与话术 12 HTTP 响应头 13 完整的HTTP响应 14 HTTPS 一 http协议 1 http协议 HTTP&#xff08;HyperText Tra…
阅读更多...
Kubeadm部署K8s

Kubeadm部署K8s

Kubeadm部署K8s 集群规划&#xff1a; Master节点规划: Node节点规划: 安装要求 在开始之前&#xff0c;部署Kubernetes集群机器需要满足以下几个条件&#xff1a; 操作系统 CentOS7.x-86_x64 硬件配置&#xff1a;2GB或更多RAM&#xff0c;2个CPU或更多CPU&#xff0c;硬盘…
阅读更多...
CANopen转Profinet网关连接西门子PLC与变流器通讯

CANopen转Profinet网关连接西门子PLC与变流器通讯

CANopen转Profinet网关&#xff08;XD-COPNm20&#xff09;在智能领域&#xff0c;变流器的应用非常广泛&#xff0c;变流器一般会采用CANopen协议。现场采用台达的变流器&#xff08;支持CANopen协议&#xff09;作为CANopen从站&#xff0c;S7-1500系列PLC做主站&#xff0c;…
阅读更多...
表单进阶（3）-上传文件和隐藏字段

表单进阶（3）-上传文件和隐藏字段

上传文件&#xff1a;<input type"file"> 隐藏字段&#xff1a;<input type"hidden" name"" id"" value"带给后端的信息"> 禁用disabled&#xff1a;<button disabled"disabled">注册</bu…
阅读更多...
蓝牙系列七：开源蓝牙协议栈BTStack数据处理（Wireshark抓包分析）

蓝牙系列七：开源蓝牙协议栈BTStack数据处理（Wireshark抓包分析）

继续蓝牙系列的研究。 在上篇博客&#xff0c;通过阅读BTStack的源码&#xff0c;大体了解了其框架&#xff0c;对于任何一个BTStack的应用程序都有一个main函数&#xff0c;这个main函数是统一的。这个main函数做了某些初始化之后&#xff0c;最终会调用到应用程序提供的btst…
阅读更多...
【嵌入式】嵌入式系统稳定性建设：最后的防线

【嵌入式】嵌入式系统稳定性建设：最后的防线

&#x1f9d1; 作者简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟。提供嵌入式方向的学习指导、简历面…
阅读更多...
一文带你了解MySQL之B+树索引的原理

一文带你了解MySQL之B+树索引的原理

前言 学完前面我们讲解了InnoDB数据页的7个组成部分&#xff0c;知道了各个数据页可以组成一个双向链表&#xff0c;而每个数据页中的记录会按照主键值从小到大的顺序组成一个单向链表&#xff0c;每个数据页都会为存储在它里边儿的记录生成一个页目录&#xff0c;在通过主键查…
阅读更多...
蓝桥杯真题讲解：子矩阵（二维滑动窗口）

蓝桥杯真题讲解：子矩阵（二维滑动窗口）

蓝桥杯真题讲解&#xff1a;子矩阵&#xff08;二维滑动窗口&#xff09; 一、视频讲解二、正解代码 一、视频讲解 蓝桥杯真题讲解&#xff1a;子矩阵&#xff08;二维滑动窗口&#xff09; 二、正解代码 //二维单调队列 #include<bits/stdc.h> #define endl \n #def…
阅读更多...
MapBox添加带箭头的轨迹线

MapBox添加带箭头的轨迹线

效果&#xff1a; // 轨迹线 export const MAP_PATH_LINE (values, layerId) > {// 箭头-右var svgXML <svg viewBox"0 0 1024 1024" xmlns"http://www.w3.org/2000/svg"> <path d"M529.6128 512L239.9232 222.4128 384.7168 77.5168…
阅读更多...
成都爱尔林江院长解析巩膜镜是什么？它适合哪些人群

成都爱尔林江院长解析巩膜镜是什么？它适合哪些人群

巩膜镜&#xff0c;全称为硬性透氧性巩膜接触镜&#xff0c;它有着特殊设计&#xff0c;大直径镜片像桥梁一样呈拱形覆盖角膜及角巩膜缘&#xff0c;从角膜上方横跨而过完全无接触、无任何机械性摩擦&#xff0c;最终贴合于巩膜。 巩膜镜的作用原理 光学成像&#xff1a; 配戴…
阅读更多...
嵌入式物联网项目实战-STM32F103实现外部中断EXIT事件(物联技术666)

嵌入式物联网项目实战-STM32F103实现外部中断EXIT事件(物联技术666)

EXIT中断测试 功能描述 外部中断/事件控制器由19个产生事件/中断要求的边沿检测器组成。每个输入线可以独立地配置输入类型&#xff08;脉冲或挂起&#xff09;和对应的触发事件&#xff08;上升沿或下降沿或者双边沿触发&#xff09;。每个输入线都可以被独立的屏蔽。挂起寄…
阅读更多...
Unity L屏幕实现方式（已抛弃）

Unity L屏幕实现方式（已抛弃）

效果 右侧主要的参数&#xff1a;Line参数能够调整中间线的高度&#xff0c;PointXY能够调整整个下方弯曲图像的比例。 使用的是RenderTexture填充RawImage显示的方式&#xff0c;需要将一张RenderTexture设置位摄像机的输出内容。 ShaderGraph 由于这个采用了一定的数学模型…
阅读更多...
HarmonyOS NEXT应用开发之多层嵌套类对象监听

HarmonyOS NEXT应用开发之多层嵌套类对象监听

介绍 本示例介绍使用Observed装饰器和ObjectLink装饰器来实现多层嵌套类对象属性变化的监听。 效果图预览 使用说明 加载完成后显示商品列表&#xff0c;点击刷新按钮可以刷新商品图片和价格。 实现思路 创建FistGoodsModel类&#xff0c;类对象是用Observed修饰的类Secon…
阅读更多...
【C++】手把手教你模拟实现 list

【C++】手把手教你模拟实现 list

目录 前提&#xff1a;list 的基本介绍 一、构造/析构/拷贝/赋值 1、构造函数 2、析构函数 3、拷贝构造函数 4、赋值 二、修改操作 1、push_back 2、insert 3、erase 4、clear 三、list iterator 的使用 1、operator * 2、operator 3、operator -- 4、operator &…
阅读更多...
MATLAB中的矩阵的重构和重新排列

MATLAB中的矩阵的重构和重新排列

师从清风 矩阵的重构和重新排列 reshape函数 reshape函数可以改变矩阵的形状&#xff0c;其常用语法为reshape(A,m,n)或者reshape(A,[m,n]),这可以将矩阵A的形状更改为m行n列&#xff0c;前提是转化前后的两个矩阵的元素总数要相同。例如有一个矩阵A&#xff0c;它原来的大小是…
阅读更多...
字节跳动也启动春季校园招聘了（含二面算法原题）

字节跳动也启动春季校园招聘了（含二面算法原题）

字节跳动 - 春招启动 随着各个大厂陆续打响春招的响头炮&#xff0c;字节跳动也官宣了春季校园招聘的正式开始。 还是那句话&#xff1a;连互联网大厂启动校招计划尚且争先恐后&#xff0c;你还有什么理由不马上行动&#xff1f;&#xff01; 先来扫一眼「春招流程」和「面向群…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023