antv L7结合高德地图使用dome1

news2024/10/6 2:09:16

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) {
  // 全局加载高德地图API
  const 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-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/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.15
        plugins: [],
        Loca: {
          // 是否加载 Loca， 缺省不加载
          version: "2.0.0", // Loca 版本，缺省 1.3.2
        },
      })
        .then((AMap) => {
          // 全局加载高德地图API
          const 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.coloradmin.cn/o/1509811.html

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

相关文章

现代DevOps如何改变软件开发格局

现代DevOps如何改变软件开发格局

在软件开发的早期&#xff0c;该过程通常是开发人员编写代码&#xff0c;再将其交给质量保证&#xff08;QA&#xff09;进行测试。这种瀑布开发方法可能会导致质量问题和延迟&#xff0c;因为问题是在周期后期发现的。 一、了解DevOps和测试左移 DevOps是Development和Opera…
阅读更多...
【强化学习中alpha和gamma0】

【强化学习中alpha和gamma0】

在强化学习中&#xff0c;alpha&#xff08;α&#xff09;和gamma&#xff08;γ&#xff09;分别代表学习率和折扣因子&#xff0c;它们是强化学习算法中的两个重要的超参数。 1. **学习率 (alpha)&#xff1a;** - alpha 是一个控制在学习过程中对新观测值的权重的参数。…
阅读更多...
【工具】Git的介绍与安装

【工具】Git的介绍与安装

目录 前言 1W&#xff1a;什么是Git&#xff1f; 2W&#xff1a;为什么使用Git&#xff1f; 3W&#xff1a;如何使用Git&#xff1f; Git的安装步骤 测试 3.1 桌面空白部分鼠标右击 3.2 选择 Open Git Bash here 3.3 输入 git -v 命令查看版本 Git区域分布 Git的工作…
阅读更多...
基于springboot的厨艺交流平台

基于springboot的厨艺交流平台

采用技术 基于springboot的厨艺交流平台的设计与实现~ 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBootMyBatis 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 页面展示 食材分类管理 用户信息管理 菜谱分类管理 菜谱信息管理 食材信息…
阅读更多...
AHU 汇编 实验四

AHU 汇编 实验四

实验名称&#xff1a;实验四 两个数的相乘 实验内容&#xff1a; 用子程序形式编写&#xff1a; A*B&#xff1a;从键盘输入a和b&#xff0c;计算A*B&#xff0c;其中乘法采用移位和累加完成 实验过程&#xff1a; 源代码&#xff1a; data segmentmul1 db 16,?,16 dup(?…
阅读更多...
MySQL gh-ost DDL 变更工具

MySQL gh-ost DDL 变更工具

文章目录 1. MDL 锁介绍2. 变更工具3. gh-ost 原理解析4. 安装部署5. 操作演示5.1. 重点参数介绍5.2. 执行变更5.3. 动态控制 6. 风险提示 1. MDL 锁介绍 MySQL 的锁可以分为四类&#xff1a;MDL 锁、表锁、行锁、GAP 锁&#xff0c;其中除了 MDL 锁是在 Server 层加的之外&am…
阅读更多...
解决达梦集成 JPA 时表和字段注释注解不生效的问题

解决达梦集成 JPA 时表和字段注释注解不生效的问题

前言 最近在做达梦数据库集成 JPA 时&#xff0c;发现使用的表注解和字段注解均未生效&#xff08;MySQL、Oracle、PostgreSQL中均可以在建表时正常生成相应的注释&#xff09;&#xff0c;经过调试发现解决办法也很简单&#xff1a; 自定义方言类继承自org.hibernate.dialect…
阅读更多...
Ubuntu 14.04：安装PaddlePaddle（Conda安装）

Ubuntu 14.04：安装PaddlePaddle（Conda安装）

目录 一、PaddlePaddle 概要 二、PaddlePaddle安装要求 三、PaddlePaddle安装 3.1 安装 Anaconda3 3.2 创建Anaconda虚拟环境&#xff08;python 3.8&#xff09; 3.3 进入Anaconda虚拟环境 3.4 检测 Anaconda 虚拟环境配置是否符合PaddlePaddle安装要求 3.4.1 确认 py…
阅读更多...
用链表实现顺序表的插入和删除操作（操作封装在函数中）

用链表实现顺序表的插入和删除操作（操作封装在函数中）

#include <iostream> using namespace std; struct node{int val;node * next; }; void print(node * head){if(headNULL ||head->nextNULL){cout<<"链表中已经无元素";return;}cout<<"打印列表:";node * phead->next;while(p){co…
阅读更多...
开源好用的所见即所得(WYSIWYG)编辑器：Editor.js

开源好用的所见即所得(WYSIWYG)编辑器：Editor.js

文章目录 特点基于区块干净的数据 界面与交互插件标题和文本图片列表Todo表格 使用安装创建编辑器实例配置工具本地化自定义样式 今天介绍一个开源好用的Web所见即所得(WYSIWYG)编辑器&#xff1a; Editor.js Editor.js 是一个基于 Web 的所见即所得富文本编辑器&#xff0c;它…
阅读更多...
FTP,SFTP,FTPS,SSL,TSL简介,区别,联系,使用场景说明

FTP,SFTP,FTPS,SSL,TSL简介,区别,联系,使用场景说明

文章目录 简介FTPFTPSSFTP加密场景选择FTPS还是SFTPFTP、SFTP、FTPS区别、联系和具体使用场景如何使用FTP、SFTP和FTPSSSLTLSSSL和TLS区别和联系&#xff0c;以及使用场景SSL和TLS技术上的区别一些问题隐式的TLS&#xff08;FTPS/SSL&#xff09;或者显式的TLS&#xff08;FTPS…
阅读更多...
【Datawhale学习笔记】从大模型到AgentScope

【Datawhale学习笔记】从大模型到AgentScope

从大模型到AgentScope AgentScope是一款全新的Multi-Agent框架&#xff0c;专为应用开发者打造&#xff0c;旨在提供高易用、高可靠的编程体验&#xff01; 高易用&#xff1a;AgentScope支持纯Python编程&#xff0c;提供多种语法工具实现灵活的应用流程编排&#xff0c;内置…
阅读更多...
蓝桥·算法双周赛|第七场分级赛——小白入门赛

蓝桥·算法双周赛|第七场分级赛——小白入门赛

&#x1f525;博客介绍&#xff1a; 27dCnc &#x1f3a5;系列专栏&#xff1a; <<数据结构与算法>> << 算法入门>> << C项目>> &#x1f3a5; 当前专栏: << 算法入门>> 专题 : 数据结构帮助小白快速入门算法 &#x1f4…
阅读更多...
【全志H616】1 --用orangepi控制硬件

【全志H616】1 --用orangepi控制硬件

【全志H616】1 --用orangepi控制硬件 本文介绍了如歌用orangepi 控制蜂鸣器&超声波模块&#xff0c;通过键盘输入1、2、3、4来控制转动角度舵机模块&#xff1b;同时还介绍了利用全志如何配置定时器&#xff1b;以及查看H616引脚状态的命令等… 超声波模块和舵机模块的讲解…
阅读更多...
Python递归函数你用对了吗？

Python递归函数你用对了吗？

1.递归函数 递归函数&#xff1a;函数自己调用自己 2.需求 使用函数的方式&#xff0c;计算数字n的阶乘 # 5&#xff01; """ 5! 1 * 2 * 3 * 4 * 5 4! 1 * 2 * 3 * 4 3! 1 * 2 * 3 2! 1 * 2 1! 1综上可以总结出&#xff1a;n! n * (n - 1) "&qu…
阅读更多...
案例分析篇02：软件架构设计考点之特定领域软件架构、架构评估、架构视图（2024年软考高级系统架构设计师冲刺知识点总结）

案例分析篇02：软件架构设计考点之特定领域软件架构、架构评估、架构视图（2024年软考高级系统架构设计师冲刺知识点总结）

专栏系列文章推荐： 2024高级系统架构设计师备考资料（高频考点&真题&经验）https://blog.csdn.net/seeker1994/category_12593400.html 【历年案例分析真题考点汇总】与【专栏文章案例分析高频考点目录】（2024年软考高级系统架构设计师冲刺知识点总结-案例分析篇-…
阅读更多...
鼠标在QTreeView、QTableView、QTableWidget项上移动，背景色改变

鼠标在QTreeView、QTableView、QTableWidget项上移动，背景色改变

目录 1. 前言 2. 需求 3. 功能实现 3.1. 代码实现 3.2. 功能讲解 4. 附录 1. 前言 本博文用到了Qt的model/view framework框架,如果对Qt的“模型/视图/委托”框架不懂&#xff0c;本博文很难读懂。如果不懂这方面的知识&#xff0c;请在Qt Assistant 中输入Model/View…
阅读更多...
[iOS]高版本MacOS运行低版本Xcode

[iOS]高版本MacOS运行低版本Xcode

Xcode 版本支持文档 目的&#xff1a; 在MacOS Sonoma 系统上安装 Xcode14.3.1 第一步 先在Xcode下载一个Xcode14.3.1的压缩包 第二步 本地解压Xcode&#xff0c;将外层目录名变更为Xcode_14.3.1&#xff0c;将文件拷贝到 /Applications目录下。 第三步 变更xcode-sel…
阅读更多...
Docker基础教程 - 12 常用容器部署-Nginx

Docker基础教程 - 12 常用容器部署-Nginx

更好的阅读体验&#xff1a;点这里 &#xff08; www.doubibiji.com &#xff09; 12 常用容器部署-Nginx 下面介绍一下常用容器的部署。可以先简单了解下&#xff0c;用到再来详细查看。 在 Docker 中部署 Nginx&#xff0c;并通过挂载方式将 Nginx 的配置文件和站点目录挂…
阅读更多...
leecode算法二

leecode算法二

滑动窗口/双指针 滑动窗口 得到K个黑块的最少涂色次数 滑动窗口法 方法一 方法二 水果成篮 二叉树 概念 中序遍历 前序遍历和后序遍历无非就是把result.add房价加在前面和后面。 层序遍历 广度优先算法 深度优先算法 线段树 我的日程安排表II
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023