antv L7结合高德地图使用dome1

已于 2024-03-11 11:24:14 修改
阅读量688 收藏 6
点赞数 16
分类专栏： 大屏看板 文章标签： 前端 antv L7 vue.js
于 2024-03-11 11:16:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/men_gqi/article/details/136618578
版权

antv L7结合高德地图使用


官网文档

一、设置底图

// 引入高德数据可视化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>
大白菜1号
关注
  • 16
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Antv L7 + mapbox 实现简单地图场景
07-18
Antv L7 + mapbox 实现简单地图场景
基于 WebGL 的开源大规模地理空间数据可视分析开发框架
05-18
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达
antv l7 实现自定义地图 以及地图抬高图层 以及散点轮播显示弹窗 鼠标悬浮弹窗
10-31
antv l7 实现自定义地图 以及地图抬高图层 以及散点轮播显示弹窗 鼠标悬浮弹窗
vue+antVL7地图组件化.zip
12-14
这个主要是antV/l7绘制的北京地图+散点数据，北京地图封装成了一个组件，在调用时，只需要传入相应的JSON数据就可以了，数据格式在代码中有说明。下载后直接npm install，然后npm run dev。
VisitorMapV:基于地理可视化的 AntV L7
07-24
VisitorMapV 地理可视化，基于Antv的L7，访客数据来自个人博客： Project setup npm install Compiles and hot-reloads for development npm run dev Compiles and minifies for production npm run build:prod Run your tests npm run test Lints and fixes files npm run lint Customize configuration See .
antv/l7 -- 地图功能
m0_67011584的博客
01-05 1365
/ 开启默认高亮效果// 开启并设置高亮颜色为红色zIndex: 4, // 设置显示层级}).size(2)// 设置点击生效});});
antv-l7地图可视化，全国地图支持省级下钻、悬浮预警、时间区间搜索
07-15
antv-l7地图可视化，全国地图支持省级下钻、悬浮预警、时间区间搜索
在Vue中使用antv的示例代码
10-15
主要介绍了在Vue中使用antv的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
echarts 大屏可视化_看似复杂炫酷的数据可视化设计，用这波神器轻松搞定！
weixin_39977547的博客
11-29 2171
数据大屏与数据可视化数据可视化是目前对数据展示最常用的方式。数据的可视化设计有助于将复杂的数据，用最易理解的方式展示在用户的面前。数据可视化在中后台的设计中很常见，通常主要用于分析和决策，对实时性要求不高，从一部分功能上讲，其实也有着报告数据的作用。设计以 2D 平面展示为主，几乎不会有 3D 设计出现，视觉设计更注重简单直接，一目了然。△ 来源 dribbble 作者wuze数据大屏在...
AntV设置Chart高度
zhaogaojian的专栏
06-09 32
AntV在使用柱状图时不能单独设置一个柱状图的宽度，但可以设置整体高度，宽度，代码如下 const chart = new F2.Chart({ id: 'c1', // 指定图表容器 ID width: 500, // 指定图表宽度 height: 300 // 指定图表高度 }); ...
数据可视化系列-02各类图表的综合使用介绍及实践
IT从业者的成长历程
01-03 1220
数据可视化系列-02各类图表的综合使用，包括北极星指标，表格图表，趋势类图表，分布类图表，关系类图表，空间类图表，时序类图表。
SpringBoot项目打包分离高阶操作
Record Little
04-23 740
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
判断前端入参是否空否则提示前端写法
qq_39306234的博客
04-28 207
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 487
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
前端调用WebSocket协议接口获取数据
最新发布
m0_56023096的博客
04-29 164
createWs("测试数据", (res) => {
2024 XYCTF Web 方向 wp 全解
qq_39947980的博客
04-27 946
XYCTF 2024 Web 方向全解
两个前端标签
ma_no_lo的博客
04-24 158
两个前端标签
vue2使用@antv/l7-maps 地图高度为0
08-07
在Vue2使用@antv/l7-maps时，如果地图高度为0，可以检查以下几个可能的原因和解决方法： 1. 检查代码：请确保你的代码中指定了正确的地图高度。可以在组件的模板中设置地图容器的高度，比如： ``` <template> <div id="mapContainer" style="height: 500px;"></div> </template> ``` 确保给地图容器设置了合适的高度，以使地图显示正常。 2. 检查CSS样式：有时候全局的CSS样式可能会影响到地图的高度。可以通过浏览器的开发者工具（如Chrome的开发者工具）检查CSS样式，并确保没有其他样式将地图容器的高度设置为0。 3. 检查依赖和版本：确保你已经正确安装了@antv/l7和@antv/l7-maps这两个依赖，并且版本兼容。可以使用npm或yarn来更新或重新安装它们。 4. 检查依赖项是否加载成功：在使用@antv/l7-maps之前，需要确保相关的依赖项已经加载成功。可以使用浏览器的控制台查看是否有报错或警告提示，可能是因为某个依赖项加载失败导致地图显示异常。 如果以上方法仍无法解决地图高度为0的问题，建议查阅@antv/l7-maps的官方文档或在相关的技术社区进行提问，以获得更具体的帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大白菜1号

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值