Leaflet结合Echarts实现迁徙图

效果图如下:

<!DOCTYPE html>
<html><head><title>Leaflet结合Echarts4实现迁徙图</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>html,body,#map {height: 100%;padding: 0;margin: 0;}</style><script src="../../js/prjconfig.js" maptype="leaflet"></script></head><body><div id="map"></div><script>var map = L.map('map', {crs: L.CRS.EPSG4326, //L.CRS.EPSG3857center: [MAPINIT.Location.lat, MAPINIT.Location.lon], //[40.76339, 106.9477844],zoom: MAPINIT.Location.zoom,minZoom: MAPINIT.zoomsExtent[0],maxZoom: MAPINIT.zoomsExtent[1],zoomControl: true});//使用WMTS Key-Value加载地图服务let _getc = "http://192.168.1.212:8095/server/default/getTile/wmts?request=GetCapabilities&service=wmts&layer=yx";MAPCONFIG.MAPWMTS_IMG = "http://192.168.1.212:8095/server/vtile/getTile/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=yx&STYLE=default&TILEMATRIXSET=w&FORMAT=image/png&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}&tk=''";L.tileLayer(MAPCONFIG.MAPWMTS_IMG, {zoomOffset: 1}).addTo(map);map.setView(L.latLng(37.550339, 104.114129), 4); //设置缩放级别及中心点//Echarts相关options配置var geoCoordMap = {"海门": [121.15, 31.89],"鄂尔多斯": [109.781327, 39.608266],"招远": [120.38, 37.35],"舟山": [122.207216, 29.985295],"齐齐哈尔": [123.97, 47.33],"盐城": [120.13, 33.38],"赤峰": [118.87, 42.28],"青岛": [120.33, 36.07],"乳山": [121.52, 36.89],"金昌": [102.188043, 38.520089],"泉州": [118.58, 24.93],"莱西": [120.53, 36.86],"日照": [119.46, 35.42],"胶南": [119.97, 35.88],"南通": [121.05, 32.08],"拉萨": [91.11, 29.97],"云浮": [112.02, 22.93],"梅州": [116.1, 24.55],"文登": [122.05, 37.2],"上海": [121.48, 31.22],"攀枝花": [101.718637, 26.582347],"威海": [122.1, 37.5],"承德": [117.93, 40.97],"厦门": [118.1, 24.46],"汕尾": [115.375279, 22.786211],"潮州": [116.63, 23.68],"丹东": [124.37, 40.13],"太仓": [121.1, 31.45],"曲靖": [103.79, 25.51],"烟台": [121.39, 37.52],"福州": [119.3, 26.08],"瓦房店": [121.979603, 39.627114],"即墨": [120.45, 36.38],"抚顺": [123.97, 41.97],"玉溪": [102.52, 24.35],"张家口": [114.87, 40.82],"阳泉": [113.57, 37.85],"莱州": [119.942327, 37.177017],"湖州": [120.1, 30.86],"汕头": [116.69, 23.39],"昆山": [120.95, 31.39],"宁波": [121.56, 29.86],"湛江": [110.359377, 21.270708],"揭阳": [116.35, 23.55],"荣成": [122.41, 37.16],"连云港": [119.16, 34.59],"葫芦岛": [120.836932, 40.711052],"常熟": [120.74, 31.64],"东莞": [113.75, 23.04],"河源": [114.68, 23.73],"淮安": [119.15, 33.5],"泰州": [119.9, 32.49],"南宁": [108.33, 22.84],"营口": [122.18, 40.65],"惠州": [114.4, 23.09],"江阴": [120.26, 31.91],"蓬莱": [120.75, 37.8],"韶关": [113.62, 24.84],"嘉峪关": [98.289152, 39.77313],"广州": [113.23, 23.16],"延安": [109.47, 36.6],"太原": [112.53, 37.87],"清远": [113.01, 23.7],"中山": [113.38, 22.52],"昆明": [102.73, 25.04],"寿光": [118.73, 36.86],"盘锦": [122.070714, 41.119997],"长治": [113.08, 36.18],"深圳": [114.07, 22.62],"珠海": [113.52, 22.3],"宿迁": [118.3, 33.96],"咸阳": [108.72, 34.36],"铜川": [109.11, 35.09],"平度": [119.97, 36.77],"佛山": [113.11, 23.05],"海口": [110.35, 20.02],"江门": [113.06, 22.61],"章丘": [117.53, 36.72],"肇庆": [112.44, 23.05],"大连": [121.62, 38.92],"临汾": [111.5, 36.08],"吴江": [120.63, 31.16],"石嘴山": [106.39, 39.04],"沈阳": [123.38, 41.8],"苏州": [120.62, 31.32],"茂名": [110.88, 21.68],"嘉兴": [120.76, 30.77],"长春": [125.35, 43.88],"胶州": [120.03336, 36.264622],"银川": [106.27, 38.47],"张家港": [120.555821, 31.875428],"三门峡": [111.19, 34.76],"锦州": [121.15, 41.13],"南昌": [115.89, 28.68],"柳州": [109.4, 24.33],"三亚": [109.511909, 18.252847],"自贡": [104.778442, 29.33903],"吉林": [126.57, 43.87],"阳江": [111.95, 21.85],"泸州": [105.39, 28.91],"西宁": [101.74, 36.56],"宜宾": [104.56, 29.77],"呼和浩特": [111.65, 40.82],"成都": [104.06, 30.67],"大同": [113.3, 40.12],"镇江": [119.44, 32.2],"桂林": [110.28, 25.29],"张家界": [110.479191, 29.117096],"宜兴": [119.82, 31.36],"北海": [109.12, 21.49],"西安": [108.95, 34.27],"金坛": [119.56, 31.74],"东营": [118.49, 37.46],"牡丹江": [129.58, 44.6],"遵义": [106.9, 27.7],"绍兴": [120.58, 30.01],"扬州": [119.42, 32.39],"常州": [119.95, 31.79],"潍坊": [119.1, 36.62],"重庆": [106.54, 29.59],"台州": [121.420757, 28.656386],"南京": [118.78, 32.04],"滨州": [118.03, 37.36],"贵阳": [106.71, 26.57],"无锡": [120.29, 31.59],"本溪": [123.73, 41.3],"克拉玛依": [84.77, 45.59],"渭南": [109.5, 34.52],"马鞍山": [118.48, 31.56],"宝鸡": [107.15, 34.38],"焦作": [113.21, 35.24],"句容": [119.16, 31.95],"北京": [116.46, 39.92],"徐州": [117.2, 34.26],"衡水": [115.72, 37.72],"包头": [110, 40.58],"绵阳": [104.73, 31.48],"乌鲁木齐": [87.68, 43.77],"枣庄": [117.57, 34.86],"杭州": [120.19, 30.26],"淄博": [118.05, 36.78],"鞍山": [122.85, 41.12],"溧阳": [119.48, 31.43],"库尔勒": [86.06, 41.68],"安阳": [114.35, 36.1],"开封": [114.35, 34.79],"济南": [117, 36.65],"德阳": [104.37, 31.13],"温州": [120.65, 28.01],"九江": [115.97, 29.71],"邯郸": [114.47, 36.6],"临安": [119.72, 30.23],"兰州": [103.73, 36.03],"沧州": [116.83, 38.33],"临沂": [118.35, 35.05],"南充": [106.110698, 30.837793],"天津": [117.2, 39.13],"富阳": [119.95, 30.07],"泰安": [117.13, 36.18],"诸暨": [120.23, 29.71],"郑州": [113.65, 34.76],"哈尔滨": [126.63, 45.75],"聊城": [115.97, 36.45],"芜湖": [118.38, 31.33],"唐山": [118.02, 39.63],"平顶山": [113.29, 33.75],"邢台": [114.48, 37.05],"德州": [116.29, 37.45],"济宁": [116.59, 35.38],"荆州": [112.239741, 30.335165],"宜昌": [111.3, 30.7],"义乌": [120.06, 29.32],"丽水": [119.92, 28.45],"洛阳": [112.44, 34.7],"秦皇岛": [119.57, 39.95],"株洲": [113.16, 27.83],"石家庄": [114.48, 38.03],"莱芜": [117.67, 36.19],"常德": [111.69, 29.05],"保定": [115.48, 38.85],"湘潭": [112.91, 27.87],"金华": [119.64, 29.12],"岳阳": [113.09, 29.37],"长沙": [113, 28.21],"衢州": [118.88, 28.97],"廊坊": [116.7, 39.53],"菏泽": [115.480656, 35.23375],"合肥": [117.27, 31.86],"武汉": [114.31, 30.52],"大庆": [125.03, 46.58]};var BJData = [[{name: '北京'}, {name: '上海',value: 95}],[{name: '北京'}, {name: '广州',value: 90}],[{name: '北京'}, {name: '大连',value: 80}],[{name: '北京'}, {name: '南宁',value: 70}],[{name: '北京'}, {name: '南昌',value: 60}],[{name: '北京'}, {name: '拉萨',value: 50}],[{name: '北京'}, {name: '长春',value: 40}],[{name: '北京'}, {name: '包头',value: 30}],[{name: '北京'}, {name: '重庆',value: 20}],[{name: '北京'}, {name: '常州',value: 10}]];var SHData = [[{name: '上海'}, {name: '包头',value: 95}],[{name: '上海'}, {name: '昆明',value: 90}],[{name: '上海'}, {name: '广州',value: 80}],[{name: '上海'}, {name: '郑州',value: 70}],[{name: '上海'}, {name: '长春',value: 60}],[{name: '上海'}, {name: '重庆',value: 50}],[{name: '上海'}, {name: '长沙',value: 40}],[{name: '上海'}, {name: '北京',value: 30}],[{name: '上海'}, {name: '丹东',value: 20}],[{name: '上海'}, {name: '大连',value: 10}]];var GZData = [[{name: '广州'}, {name: '福州',value: 95}],[{name: '广州'}, {name: '太原',value: 90}],[{name: '广州'}, {name: '长春',value: 80}],[{name: '广州'}, {name: '重庆',value: 70}],[{name: '广州'}, {name: '西安',value: 60}],[{name: '广州'}, {name: '成都',value: 50}],[{name: '广州'}, {name: '常州',value: 40}],[{name: '广州'}, {name: '北京',value: 30}],[{name: '广州'}, {name: '北海',value: 20}],[{name: '广州'}, {name: '海口',value: 10}]];var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';var convertData = function(data) {var res = [];for(var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = geoCoordMap[dataItem[0].name];var toCoord = geoCoordMap[dataItem[1].name];if(fromCoord && toCoord) {res.push({fromName: dataItem[0].name,toName: dataItem[1].name,coords: [fromCoord, toCoord],value: dataItem[1].value});}}return res;};var color = ['#a6c84c', '#ffa022', '#46bee9'];var series = [];[['北京', BJData],['上海', SHData],['广州', GZData]].forEach(function(item, i) {series.push({name: item[0] + ' Top10',type: 'lines',coordinateSystem: 'geo',zlevel: 1,effect: {show: true,period: 6,trailLength: 0.7,color: '#fff',symbolSize: 3},lineStyle: {normal: {color: color[i],width: 0,curveness: 0.2}},data: convertData(item[1])}, {name: item[0] + ' Top10',type: 'lines',coordinateSystem: 'geo',zlevel: 2,symbol: ['none', 'arrow'],symbolSize: 10,effect: {show: true,period: 6,trailLength: 0,symbol: planePath,symbolSize: 15},lineStyle: {normal: {color: color[i],width: 1,opacity: 0.6,curveness: 0.2}},data: convertData(item[1])}, {name: item[0] + ' Top10',type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {brushType: 'stroke'},label: {normal: {show: true,position: 'right',formatter: '{b}'}},symbolSize: function(val) {return val[2] / 8;},itemStyle: {normal: {color: color[i]}},data: item[1].map(function(dataItem) {return {name: dataItem[1].name,value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])};})});});var option = {title: {text: '模拟迁徙图',subtext: '',left: 'center',textStyle: {color: '#fff'}},tooltip: {trigger: 'item',formatter: '{b}'},geo: {//map: 'china',label: {emphasis: {show: false}},itemStyle: {normal: {areaColor: '#323c48',borderColor: '#111'},emphasis: {areaColor: '#2a333d'}}},series: series};//将Echarts加到地图上var layerWork = L.overlayEcharts(option).addTo(map);</script></body></html>

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

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

相关文章

2023年中国离心制冷机产量及产业链分析[图]

离心制冷机是一种常用的空调制冷设备&#xff0c;目前主要应用于酒店、写字楼、商场、学校等众多大型场所的集中制冷场景。离心制冷机由离心式制冷压缩机、蒸发器、冷凝器、主电动机、抽气回收装置、润滑系统、控制柜和起动柜等零部件组成。这些零部件的组成有的采用分散型组装…

Rust语言精讲:数据类型全解析

大家好&#xff01;我是lincyang。 今天&#xff0c;我们将深入探讨Rust语言中的数据类型&#xff0c;这是理解和掌握Rust的基础。 Rust语言数据类型概览 Rust是静态类型语言&#xff0c;所有变量类型在编译时确定。Rust的数据类型分为两类&#xff1a;标量类型和复合类型。…

内容输入.type

内容输入.type 查看完整说明 语法 .type(text) .type(text, options)正确用法 cy.get(input).type(Hello, World) // Type Hello, World into the input错误用法 cy.type(Welcome) // Errors, cannot be chained off cy cy.clock().type(www.cypress.io) // Errors, clock…

Windows安装MongoDB

1、下载MongoDB的zip&#xff0c;解压 2、创建目录 mkdir D:\JavaSoftware\Database\MongoDB\mongodb-win32-x86_64-windows-5.0.8\data\db mkdir D:\JavaSoftware\Database\MongoDB\mongodb-win32-x86_64-windows-5.0.8\data\log 3、创建一个配置文件mongod.cfg&#xff0c…

YOLOv8改进 | DAttention (DAT)注意力机制实现极限涨点

论文地址&#xff1a; DAT论文地址 官方地址&#xff1a;官方代码的地址 代码地址&#xff1a;文末有修改了官方代码BUG的代码块复制粘贴即可 一、本文介绍 本文给大家带来的是YOLOv8改进DAT(Vision Transformer with Deformable Attention)的教程&#xff0c;其发布于2022…

数字IC基础:有符号数和无符号数加、减法的Verilog设计

相关阅读 数字IC基础https://blog.csdn.net/weixin_45791458/category_12365795.html?spm1001.2014.3001.5482 本文是对数字IC基础&#xff1a;有符号数和无符号数的加减运算一文中的谈到的有符号数加减法的算法进行Verilog实现&#xff0c;有关算法细节请阅读原文&#xff0…

git merge 和 git rebase

一、是什么 在使用 git 进行版本管理的项目中&#xff0c;当完成一个特性的开发并将其合并到 master 分支时&#xff0c;会有两种方式&#xff1a; git merge git rebasegit rebase 与 git merge都有相同的作用&#xff0c;都是将一个分支的提交合并到另一分支上&#xff0c;…

大数据平台实践之CDH6.2.1+spark3.3.0+kyuubi-1.6.0

前言&#xff1a;关于kyuubi的原理和功能这里不做详细的介绍&#xff0c;感兴趣的同学可以直通官网&#xff1a;https://kyuubi.readthedocs.io/en/v1.7.1-rc0/index.html 下载软件版本 wget http://distfiles.macports.org/scala2.12/scala-2.12.16.tgz wget https://archi…

Java 开源重试类 guava-retrying 使用案例

使用背景 需要重复尝试执行某些动作&#xff0c;guava-retrying 提供了成型的重试框架 依赖 <dependency><groupId>com.github.rholder</groupId><artifactId>guava-retrying</artifactId><version>${retrying.version}</version>…

NLog配置文件详解

一、属性详解 1. 属性一览 <target xsi:type"File"name"String"layout"Layout"header"Layout"footer"Layout"encoding"Encoding"lineEnding"Enum"archiveAboveSize"Long"maxArchiveFile…

浅谈低压绝缘监测及定位系统在海上石油平台的研究与应用

安科瑞 华楠 摘要&#xff1a;海上石油平台低压系统与陆地电力系统有很大区别&#xff0c;其属于中性点绝缘系统&#xff0c;在出现单相接地故障时&#xff0c;系统允许带故障正常运行2 h&#xff0c;保证海上重要电气设备不会立即关停。现以渤海某海上平台为例&#xff0c;其…

多篇论文介绍-可变形卷积

01 具有双层路由注意力的 YOLOv8 道路场景目标检测方法 01 摘要: 随着机动车的数量不断增加&#xff0c;道路交通环境变得更复杂&#xff0c;尤其是光照变化以及复杂背景都会干扰目标检测算法的准确性和精度&#xff0c;同时道路场景下多变形态的目标也会给检测任务造成干扰&am…

redis的一些操作

文章目录 清空当前缓存和所有缓存配置内存大小&#xff0c;防止内存饱满设置内存淘汰策略键过期机制 清空当前缓存和所有缓存 Windows环境下使用命令行进行redis缓存清理 redis安装目录下输入cmdredis-cli -p 端口号flushdb 清除当前数据库缓存flushall 清除整个redis所有缓存…

window文件夹下python脚本实现批量删除无法预览的图片

你是否遇到过下载的图片会发现有些图片会无法预览情况&#xff1f; 有几种原因可能导致一些图片在预览时无法正常显示&#xff1a; 损坏的图片文件&#xff1a; 图片文件可能损坏或者部分损坏&#xff0c;导致无法被正常解析和预览。这种情况可能是因为文件在传输过程中损坏、…

模块化Common JS 和 ES Module

目录 历程 1.几个函数&#xff1a;全局变量的污染&#xff0c;模块间没有联系 2.对象&#xff1a;暴露成员&#xff0c;外部可修改 3.立即执行函数&#xff1a;闭包实现模块私有作用域 common JS module和Module 过程 模块依赖&#xff1a;深度优先遍历、父 -> 子 -…

我在Vscode学OpenCV 几何变换(缩放、翻转、仿射变换、透视、重映射)

几何变换指的是将一幅图像映射到另一幅图像内的操作。 cv2.warpAffine&#xff1a;使用仿射变换矩阵对图像进行变换&#xff0c;可以实现平移、缩放和旋转等操作。cv2.warpPerspective&#xff1a;使用透视变换矩阵对图像进行透视变换&#xff0c;可以实现镜头校正、图像纠偏等…

基于 Flink CDC 打造企业级实时数据集成方案

本文整理自Flink数据通道的Flink负责人、Flink CDC开源社区的负责人、Apache Flink社区的PMC成员徐榜江在云栖大会开源大数据专场的分享。本篇内容主要分为四部分&#xff1a; CDC 数据实时集成的挑战Flink CDC 核心技术解读基于 Flink CDC 的企业级实时数据集成方案实时数据集…

视频转码方法:多种格式视频批量转FLV视频的技巧

随着互联网的发展&#xff0c;视频已成为日常生活中不可或缺的一部分。然而&#xff0c;不同的视频格式可能适用于不同的设备和平台&#xff0c;因此需要进行转码。在转码之前&#xff0c;要了解各种视频格式的特点和适用场景。常见的视频格式包括MP4、AVI、MKV、FLV等。其中&a…

left join查询耗时太慢,添加索引解决问题

背景 因为最近自己用的小app越用感觉加载越慢&#xff0c;以为是自己app开发逻辑出现问题了&#xff0c;结果才发现是自己很早以前的代码用到的是left join多表联查&#xff0c;以前因为数据少&#xff0c;所以没有感觉&#xff0c;现在数据量稍微一大&#xff0c;耗时就非常严…

Vatee万腾外汇市场新力量:vatee科技决策力

在当今数字化时代&#xff0c;Vatee万腾崭露头角&#xff0c;以其强大的科技决策力进军外汇市场&#xff0c;成为该领域的新力量。这一新动向将不仅塑造外汇市场的未来&#xff0c;也展现Vatee科技决策力在金融领域的引领作用。 Vatee万腾带着先进的科技决策力进入外汇市场&…