react项目使用@antv/l7实现展示地图可视化

最新推荐文章于 2024-03-17 18:03:10 发布
最新推荐文章于 2024-03-17 18:03:10 发布
阅读量1.5k 收藏 4
点赞数
分类专栏： React全家桶系列 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40119412/article/details/130650699
版权

官网文档：https://l7.antv.antgroup.com/tutorial/quickstart

安装依赖

// 安装L7 依赖
npm install --save @antv/l7
// 安装第三方底图依赖
npm install --save @antv/l7-maps

初步实现

src\pages\Map\china.tsx

import { Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { useEffect } from 'react';
export default function IndexPage() {

  useEffect(() => {
    const scene = new Scene({
      id: 'map',
      map: new GaodeMap({
        style: 'dark',
        pitch: 35.210526315789465,
        zoom: 4.4
      }),
    });
  }, [])

  return (
    <div className="map-china" style={{ margin: 20 }}>
      <div
        id='map'
        style={{ height: 500, width: 800, position: 'relative', justifyContent: 'center' }}
      >
      </div>
    </div>
  );
}

在这里插入图片描述

显示模型

地图数据

https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.json

在这里插入图片描述

import { PolygonLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { useEffect } from 'react';
import data from '../../mock/geo.json';

export default function IndexPage() {
  useEffect(() => {
    const scene = new Scene({
      id: 'map',
      map: new GaodeMap({
        style: 'dark',
        pitch: 35.210526315789465,
        zoom: 4.4
      }),
    });

    // 使用面图层来绘制行政区划数据
    const chinaPolygonLayer = new PolygonLayer({
      autoFit: true
    })
      .source(data)
      .color('name', [
        'rgb(239,243,255)',
        'rgb(189,215,231)',
        'rgb(107,174,214)',
        'rgb(49,130,189)',
        'rgb(8,81,156)'
      ]).shape("fill").style({
        opacity: 1
      })
  //将其添加到 Scene 中进行显示
    scene.addLayer(chinaPolygonLayer)

  }, [])

  return (
    <div className="map-china" style={{ margin: 20 }}>
      <div
        id='map'
        style={{ height: 500, width: 800, position: 'relative', justifyContent: 'center' }}
      >
      </div>
    </div>
  );
}

在这里插入图片描述

使用 LineLayer 和 PointLayer 增加行政区划描边和行政区划文字标注

数据地址

https://gw.alipayobjects.com/os/bmw-prod/c4a6aa9d-8923-4193-a695-455fd8f6638c.json

在这里插入图片描述

标签文本香港和澳门的位置有点出入，json数据可下载下拉修改一下

  { "name": "香港", "center": [114.173355, 22.328951] },
  { "name": "澳门", "center": [113.54909, 22.198951] }


import { LineLayer, PointLayer, PolygonLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { useEffect } from 'react';
import data from '../../mock/geo.json';
import dataPoint from '../../mock/point.json';

export default function IndexPage() {

  useEffect(() => {
    const scene = new Scene({
      id: 'map',
      map: new GaodeMap({
        style: 'dark',
        pitch: 35.210526315789465,
        zoom: 4.4
      }),
    });

    const chinaPolygonLayer = new PolygonLayer({
      autoFit: true
    })
      .source(data)
      .color('name', [
        'rgb(239,243,255)',
        'rgb(189,215,231)',
        'rgb(107,174,214)',
        'rgb(49,130,189)',
        'rgb(8,81,156)'
      ]).shape("fill").style({
        opacity: 1
      })

    //  图层边界
    const layer2 = new LineLayer({
      zIndex: 2
    })
      .source(data)
      .color("rgb(93,112,146)")
      .size(0.6)
      .style({
        opacity: 1
      });
    scene.addLayer(chinaPolygonLayer)
    scene.addLayer(layer2);

    const labelLayer = new PointLayer({
      zIndex: 5
    })
      .source(dataPoint, {
        parser: {
          type: "json",
          coordinates: "center"
        }
      })
      .color("#fff")
      .shape("name", "text")
      .size(12)
      .style({
        opacity: 1,
        stroke: "#fff",
        strokeWidth: 0,
        padding: [5, 5],
        textAllowOverlap: false
      });

    scene.addLayer(labelLayer);

  }, [])

  return (
    <div className="map-china" style={{ margin: 20 }}>
      <div
        id='map'
        style={{ height: 500, width: 800, position: 'relative', justifyContent: 'center' }}
      >
      </div>
    </div>
  );
}

在这里插入图片描述

PolygonLayer关于绘制图形的类型

  • shape 为 fill 几何图层用于绘制平面的几何图形。
  • shape 为extrude几何图层用于绘制 3D 的几何体。

fill类型

const chinaPolygonLayer = new PolygonLayer({
  autoFit: false, //layer 初始化完成之后，地图是否自动缩放到图层范围, 默认false
})
  .source(data)//几何体图层数据推荐使用 GeoJSON 格式的数据
  .color('name', [
    'rgb(239,243,255)',
    'rgb(189,215,231)',
    'rgb(107,174,214)',
    'rgb(49,130,189)',
    'rgb(8,81,156)'
  ])
  .shape("fill")
  .style({
    opacity: 1
  })

在这里插入图片描述

extrude类型

const chinaPolygonLayer = new PolygonLayer({
  autoFit: false, //layer 初始化完成之后，地图是否自动缩放到图层范围, 默认false
})
  .source(data)//几何体图层数据推荐使用 GeoJSON 格式的数据
  .color('name', [
    'rgb(239,243,255)',
    'rgb(189,215,231)',
    'rgb(107,174,214)',
    'rgb(49,130,189)',
    'rgb(8,81,156)'
  ])
  .shape("extrude")
  .style({
    opacity: 1
  })

在这里插入图片描述

Scene

export interface ISceneConfig extends IRenderConfig {
    id: string | HTMLDivElement;//需传入 dom 容器或者容器 id。
    canvas?: HTMLCanvasElement;
    gl?: any;
    hasBaseMap?: boolean;
    map: IMapWrapper;
    logoPosition?: PositionName;//提供的 Logo 可以配置显示位置，默认在左下角。
    logoVisible?: boolean;//logo 是否可见
    isMini?: boolean;
    animate?: boolean;
    fitBoundsOptions?: unknown;
    pickBufferScale?: number;
    stencil?: boolean;
    debug?: boolean;
}

const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'dark',//地图样式，可选dark，light, normal, blank无底图
    pitch: 35.210526315789465,//地图倾角
    // center: [], //地图中心
    zoom: 3.3, //地图缩放
  }),
});

在这里插入图片描述

const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'blank',//地图样式，可选dark，light, normal, blank无底图
    pitch: 35.210526315789465,//地图倾角
    // center: [], //地图中心
    zoom: 3.3, //地图缩放
  }),
});

在这里插入图片描述

const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'light',//地图样式，可选dark，light, normal, blank无底图
    pitch: 35.210526315789465,//地图倾角
    // center: [], //地图中心
    zoom: 3.3, //地图缩放
  }),
});

在这里插入图片描述

const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'normal',//地图样式，可选dark，light, normal, blank无底图
    pitch: 35.210526315789465,//地图倾角
    // center: [], //地图中心
    zoom: 3.3, //地图缩放
  }),
});

在这里插入图片描述

设置左边下logo不可见

const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'dark',//地图样式，可选dark，light, normal, blank无底图
    pitch: 35.210526315789465,//地图倾角
    // center: [], //地图中心
    zoom: 3.3, //地图缩放
    
  }),
  logoVisible: false
});

在这里插入图片描述

鼠标移动区域高亮效果

active(option: IActiveOption | boolean): ILayer;

export interface IActiveOption {
    color: string | number[];
    mix?: number;
}

默认状态高亮

chinaPolygonLayer.active(true) //  开启默认高亮效果

自定义

chinaPolygonLayer.active({
  color: '#888'
})

在这里插入图片描述

chinaPolygonLayer.active({
  color: '#888',
  mix: 0.5
})

在这里插入图片描述

点击地图区域高亮设置

const hightLayer = new LineLayer({
  zIndex: 4, // 设置显示层级
  name: 'hightlight'
}) .source({
    type: 'FeatureCollection',
    features: [ ]
  })
  .shape('line')
  .size(6)
  .color('red');
scene.addLayer(hightLayer);

chinaPolygonLayer.on('click', feature => {
  hightLayer.setData({
    type: 'FeatureCollection',
    features: [ feature.feature ]
  });
});

在这里插入图片描述

鼠标悬浮监听弹窗显示信息

export interface IPopupOption {
    /**
     * 是否展示关闭按钮
     */
    closeButton: boolean;
    /**
     * 关闭按钮距离右上角的偏移
     */
    closeButtonOffsets?: [number, number];
    /**
     * 点击地图区域是否关闭弹框
     */
    closeOnClick: boolean;
    /**
     * 按 Esc 键是否关闭弹框
     */
    closeOnEsc: boolean;
    /**
     * 气泡体的最大宽度
     */
    maxWidth: string;
    /**
     * 气泡
     */
    anchor: anchorType[any];
    /**
     * 气泡相对偏移
     */
    offsets: [number, number];
    /**
     * 气泡上的所有鼠标事件是否关闭事件冒泡
     */
    stopPropagation: boolean;
    /**
     * popup 位置发生变化时地图是否自动平移至气泡位置
     */
    autoPan: boolean;
    /**
     * 展示其他气泡时，当前气泡是否自动关闭
     */
    autoClose: boolean;
    /**
     * 当前气泡是否自动跟随光标
     */
    followCursor: boolean;
    /**
     * 自定义气泡容器的 class
     */
    className?: string;
    /**
     * 自定义气泡容器的 style
     */
    style?: string;
    /**
     * Popup 气泡的内置文本
     */
    text?: string;
    /**
     * Popup 气泡的内置HTML
     */
    html?: DOM.ElementType;
    /**
     * Popup 气泡的标题
     */
    title?: DOM.ElementType;
    /**
     * 初始的经纬度位置
     */
    lngLat?: ILngLat;
}

export interface IPopup extends EventEmitter {
    addTo(scene: Container): this;
    remove(): void;
    setLnglat(lngLat: ILngLat): this;
    getLnglat(): ILngLat;
    setHTML(html: DOM.ElementType): this;
    setText(text: string): this;
    setMaxWidth(maxWidth: string): this;
    isOpen(): boolean;
    open(): this;
    close(): this;
    getOptions(): IPopupOption;
    setOptions(option: Partial<IPopupOption>): this;
}

chinaPolygonLayer.on('mousemove', e => {
  const popup = new Popup({
    offsets: [ 0, 0 ],
    closeButton: false
  })
  .setLnglat(e.lngLat)
  .setHTML(`<span>地区: ${e.feature.properties.name}</span><br><span>编码: ${e.feature.properties.adcode}</span>`);
  scene.addPopup(popup);
  });

在这里插入图片描述

添加图例，目前图例颜色与地图并不一致

const legend = new Control({
  position: "bottomright"
});

const color: string[] = ['#fbfbee', '#f4f8d1', '#dbedcc', '#b1d8ce', '#87cad0', '#75b0ce', '#6d90bd']

legend.onAdd = function () {
  var el = document.createElement("div");
  el.className = "infolegend legend";
  var grades = [0, 10, 20, 50, 100, 200, 500];
  for (var i = 0; i < grades.length; i++) {
    el.innerHTML +=
      '<div class="item"><i style="background:' + color[i] + '"></i> <span class="text">' + grades[i] +
      (grades[i + 1] ? "–" + grades[i + 1] + "</span></div>" : "+");
  }
  return el;
};

scene.addControl(legend)

.infolegend {
  background-color: aliceblue;
  padding-right: 20px;
  border-radius: 6px;

  .item {
    height: 20px;
    line-height: 20px;
    margin-top: 2px;
    margin-bottom: 6px;

    i {
      width: 20px;
      height: 20px;
      display: inline-block;
      margin-left: 10px;
    }

    .text {
      display: inline-block;
      position: relative;
      top: -4px;
      margin-left: 6px;
    }
  }

}

在这里插入图片描述

HaanLen
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antv-l7地图可视化，全国地图支持省级下钻、悬浮预警、时间区间搜索
07-15
antv-l7地图可视化，全国地图支持省级下钻、悬浮预警、时间区间搜索
React+Antd-可视化拖拽表单
12-03
基于react结合antd-form，实现可视化表单拖拽，左侧为自定义所有的组件，中间为工作区，拖拽左侧到工作区，目前可以进行删除等操作，可以自己再优化添加其他功能，右侧为组件名称，描述等，可以自己优化添加其他。本项目提供思路等
AntV L7深圳智慧城市
热爱WebGIS的博客
03-17 1235
本案例使用库和构建深圳智慧城市。
react 脚手架 项目框架
06-28
直接npm 即可使用 react脚手架 项目包 ts
基于React和Echart的数据可视化大屏开源项目
最新发布
03-25
项目概述：本项目是一款基于React和Echart技术的开源数据可视化大屏应用，主要采用TypeScript进行开发，辅以JavaScript、CSS和HTML等语言。项目包含616个文件，其中主要包括385个JSON配置文件，95个PNG图像资源，以及各类tsx组件、字体文件、Markdown文档和样式文件等。本项目具备数据动态刷新和屏幕自适应功能，提炼并封装了如天气、时间和轮播表格等多种共用组件，旨在提高开发效率和用户体验。目前，该项目仍在持续更新和完善中，为广大开发者提供了丰富的组件和持续的技术支持。
X6::rocket:使用SVG和HTML进行渲染JavaScript图表库
03-08
X6是AntV隶属的图编辑引擎 提供了开箱即用的交互组件和简单易用的中断定制能力，方便我们快速构建流程图，DAG图，ER图等图应用。 简体中文| 特性 :seedling:极易定制：支持使用SVG / HTML / React / Vue定制例程样式和交互； :rocket:开箱即用：内置10+图编辑配套扩展，如框选，对齐线，小地图等； :magnet:数据驱动：基于MVC架构，用户更多专注于数据逻辑和业务逻辑； :hundred_points:事件驱动：可以监听图表内部发生的任何事件。 安装 使用NPM /纱线 # npm $ npm install @antv/x6 --save # yarn $ yarn add @antv/x6 使用CDN 可以使用以下任意一个最新版本的CDN地址： < script src =" https://unpkg.com/@antv/x6/dist/x6.js " > </ script > 在生产环境中，建议使用指
mapbox 使用antv/l7添加下雨效果
m0_46478007的博客
11-03 1338
地理空间数据可视化 | mapbox 使用antv/l7添加下雨效果
【Antv/Vue3】vue项目中使用antv/L7制作地图
weixin_52378152的博客
06-23 5030
vue中使用antv/L7地图构建地图标点等交互需求
vue3使用@antv/l7--引入自定义第三方底图瓦片-可离线部署使用
u011353226的博客
01-12 2730
vue3使用@antv/l7--引入自定义第三方底图瓦片；可离线部署！
antv/l7 -- 地图功能
m0_67011584的博客
01-05 1344
/ 开启默认高亮效果// 开启并设置高亮颜色为红色zIndex: 4, // 设置显示层级}).size(2)// 设置点击生效});});
【antvl7】antvl7入门
不忘初心，坚定道路！
12-07 7869
前言 最近玩玩antvl7，很多时候，都需要整个地图之类的，让人觉得系统高大上，所以这玩意也是没法避免不写的。 申请账号 官方说不支持独立引擎，需要引入第三方，推荐高德。那么就先注册高德。 https://lbs.amap.com/api/javascript-api/guide/abc/prepare l7-react和l7 l7react是对l7封装的jsx，这个想法很好，可惜目前不成熟，特别是官网上文档还有很多没有，所以如果是简单用法可以用用，需要用复杂的用法建议直接放弃l7-react，使
项目中使用AntV L7地图（一）创建地图
weixin_46561899的博客
01-10 488
下载网址：https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4。代码中的四川地图数据。
关于antV G6中的on事件、util.each事件及update方法等的使用总结
热门推荐
yangchunshang的博客
07-02 1万+
前言      antV G6相对而言是一个目前还处于较于不成熟的关系数据可视化引擎。因此在实习实现关系图的过程中遇到很大的坑。比如说高亮箭头及关联属性、关系图的缩放、以及由于G6是基于canvas原理所以无法对其绘制的节点局部添加事件。因此在此记录下自己在使用G6实现数据库关系图时使用到的一些及技术点。一、关于G6中的on 事件     on 事件监听     参数  eventName｛Str...
antV L7 聚合图使用(含自定义简单数据）
Working_hard_111的博客
12-22 1189
使用简单json数据实现聚合图
@antv/l7绘制地图，添加图例，修改地图上颜色，是否允许地图拖拽，是否滚动缩放等
学而时习之，不亦说乎。
04-09 3762
html <div class="charts-box"> <div style="min-height: 300px; justify-content: center;position: relative" id="map"/> </div> 引入组件 import { Scene, Control } from '@antv/l7' import { CountryLayer } from '@antv/l7-district' import { Mapbo
vue3使用AntV7|L7的平面区域标注图时出现警告:Canvas2D: Multiple readback operations using getImageData are faster...
m0_71683629的博客
10-19 4489
vsc工具、node16.20、vue3,解决方法,替换为旧版本
mapbox 使用antv/l7制作发光边界（线路围墙），效果好、易操作
m0_46478007的博客
04-25 1613
mapbox 使用antv/l7制作发光边界（线路围墙）
【数据可视化】基于React使用antv/L7绘制中国地图钻取
椰卤工程师的个人博客
12-30 2295
L7 空间数据可视分析 蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析引擎。 代码实现 使用 import { DrillDownLayer } from '@antv/l7-district'; DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。 map.tsx i
用react框架g2plot2.4.7版本 DualAxes slider的交互,并且@antv/g2plot里没有Chart例子
06-01
您好，关于使用 React 框架结合 G2Plot 实现 DualAxes slider 的交互，您可以参考以下步骤： 1. 安装 G2Plot 和 React 相关依赖： ```bash npm install @antv/[email protected] react react-dom ``` 2. 创建一个 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值