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>相关文章：
Leaflet结合Echarts实现迁徙图
效果图如下： <!DOCTYPE html> <html><head><title>Leaflet结合Echarts4实现迁徙图</title><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0">…...
在mysql存储过程中间部分，使用游标遍历动态结果集（游标动态传参使用）
mysql游标动态传参实现（动态游标） 1.问题2.需求描述3.实现3.1.使用3.2.代码（直接看这都可以） 1.问题 众所周知，mysql存储过程功能是没有oracle的包功能强大的，但是在去O的趋势下，mysql存储过程的…...
全球SAR卫星大盘点与回波数据处理专栏目录
近年来，随着商业航天的蓬勃发展，商业SAR卫星星座成为美欧等主要航天国家的发展重点，目前已在全球范围内涌现出众多初创公司进军商业SAR领域，开始构建大规模商业微小SAR卫星星座，其所具有的创新服务能力将为传统的商业遥…...
C语言重点编程题——21-30
目录 21. 从键盘输入的10个整数中，找出第一个能被7整除的数。若找到，打印此数后退出循环;若未找到，打印"not exist" ★★★★22.有一个一维数组，内放10个学生成绩，写一个函数，求出平均分。 23.有N个学生，每个学生的信息包括学号、 性别、姓名、四门课的成绩…...
pip install 使用清华镜像源
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple some-package 官方文档： pypi | 镜像站使用帮助 | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror...
VBA技术资料MF86：将PPT文件批量另存为PDF文件
我给VBA的定义：VBA是个人小型自动化处理的有效工具。利用好了，可以大大提高自己的工作效率，而且可以提高数据的准确度。我的教程一共九套，分为初级、中级、高级三大部分。是对VBA的系统讲解，从简单的入门，到…...
taro h5 ios解决input不能自动获取焦点拉起键盘
描述：页面中有个按钮，点击跳转到第二个页面（有input），能直接获取焦点拉起键盘输入 安卓： 直接用focus() ios： focus无效，必须手动拉起 原理： 点击按钮的时候拉起一…...
「Docker」如何在苹果电脑上构建简单的Go云原生程序「MacOS」
介绍 使用Docker开发Golang云原生应用程序，使用Golang服务和Redis服务 注：写得很详细 为方便我的朋友可以看懂 环境部署 确保已经安装Go、docker等基础配置 官网下载链接直达：Docker官网下载 Go官网下载 操作步骤 第一步 创建一个…...
Vue环境的搭建
1.Vue开发的两种方式 （1）核心包传统开发模式 基于html/css/js文件，直接引入，开发Vue。 （2）工程化开发模式（更常用的一种）： 主要是基于构建工具（例如,webp…...
在Spring Boot中实现单文件，多文件上传
这篇文章算是一篇水文，因为也没啥好讲的，在Spring Boot中，上传文件是我们常常做的，包括我们在实际开发过程中，我们也经常碰到与文件上传有关的功能，这也算是我们常用的一个功能了，毕竟作为开发者…...
如何在 Web 应用程序中查找端点?
如何在 Web 应用程序中查找端点? 这篇文章主要讲述了如何在网络应用中找到端点。以下是文章的主要要点： 端点是网络服务的访问地址，通过引用这个URL，客户可以访问服务提供的操作。端点提供了寻址Web服务端点所需的信息。 HTTP消息是服务器和客户端之间交换数据的方式，包…...
使用el-scrollbar实现定位滚动，以及el-scrollbar去掉横向滚动条
实现滚动 <el-scrollbar ref"scroll" style"height: 100%;">// ... </el-scrollbar>可以使用如下属性： 想要滚动到哪个指定位置，自己获取或计算 this.$refs[scroll].wrap.scrollTop 0 //想滚到哪个高度，…...
AOP + 自定义注解实现日志打印
1. 先定义个注解，让它作用于方法上 Target({ElementType.METHOD}) Retention(RetentionPolicy.RUNTIME) public interface Loggable {}2. 定义切面 Aspect Component Slf4j public class LogMethodCallAspect {Pointcut("annotation(com.wy.spring_demo.aop.…...
美团YOLOv6量化部署实战方案
文章目录 1. 背景和难点2. 量化方案实战2.1 重参数化优化器2.1.1 RepOpt2.1.2 RepOpt 版本的 PTQ2.1.3 RepOpt 版本的 QAT2.2 基于量化敏感度分析的部分量化2.3 基于通道蒸馏的量化感知训练2.3.1 通道蒸馏2.3.2 YOLOv6 量化感知蒸馏框架3. 部署时优化3.1 图优化3.1.1 性能分析3…...
hive杂谈
数据仓库是一个面向主题的、集成的、非易失的、随时间变化的，用来支持管理人员决策的数据集合，数据仓库中包含了粒度化的企业数据。 数据仓库的主要特征是：主题性、集成性、非易失性、时变性。 数据仓库的体系结构通常包含4个层次ÿ…...
c语言实现简单的string
文章目录 前言一、注意事项二、代码valgrind扫描总结 前言 在c语言中利用面向对象的编程方式，实现类似c中的string类。 一、注意事项 所有与string结构体相关的函数全都没有返回值。 在c中，当产生临时对象时编译器会自动的加入析构函数，销毁…...
老师应具备什么样的心理素质
老师，一个充满智慧与挑战的职业，就像园丁，用无私的爱和耐心，滋养着每一颗渴望知识的幼苗。那么，作为教育从业者，要具备哪些心理素质呢？ 强大的情绪管理能力 老师的工作绝非一帆风顺。在教育学生…...
)
C语言——单链表(增删改查)
C语言——单链表(增删改查) 一链表一 #include<stdio.h> #include<stdlib.h> #include<string.h>typedef struct Test {int data;struct Test *next; }Link;Link *headNULL;Link* creatHead(Link* head); void AddLinkNode(Link* head,Link newnode); vo…...
Jenkins 保姆级教程
一、什么是流水线 jenkins 有 2 种流水线分为声明式流水线与脚本化流水线，脚本化流水线是 jenkins 旧版本使用的流水线脚本，新版本 Jenkins 推荐使用声明式流水线。文档只介绍声明流水线。 声明式流水线 在声明式流水线语法中，流水线过程定…...
基于 GPS 定位信息的 Pure-Pursuit 轨迹跟踪实车测试（1）
基于 GPS 定位信息的 Pure-Pursuit 轨迹跟踪实车测试（1） 进行了多组实验，包括顺逆时针转向，直线圆弧轨迹行驶，以及Pure-Pursuit 轨迹跟踪测试 代码修改 需要修改的代码并不多，主要对 gps_sensor 功能包和…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会，其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具，对过去十年 WWDC 主题演讲内容进行了系统化分析，形成了这份…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
大语言模型如何处理长文本？常用文本分割技术详解
为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...
高等数学（下）题型笔记（八）空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX（不访问内存）XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障
关键领域软件测试的"安全密码"：Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力，从金融交易到交通管控，这些关乎国计民生的关键领域…...