mapboxgl+echarts 简单制作专题地图

已于 2022-06-07 13:21:28 修改
阅读量4.1k 收藏 15
点赞数 4
分类专栏： mapboxgl 文章标签： javascript html
于 2020-01-02 10:38:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35997793/article/details/103799258
版权

mapboxgl+echarts 简单制作专题地图

实现效果

在这里插入图片描述

思路

1.引用mapboxgl脚本库及样式库与echart脚本库。
2.准备专题数据，此处我们使用模拟数据，使用json模拟后台返回的统计数据。【专题数据包含行政区划坐标、统计字段（多个）】
eg:

行政区划编码行政区划坐标行政区划名称统计字段统计字段2
110000[经度,维度]北京市100200
行政区划编码[经度2,维度2]xx省50210
3.使用mapboxgl api中的Marker在地图上加载专题数据中的行政区划的点坐标，然后将每个Marker渲染成div,并将每个marker的div的id设置跟专题数据的每条数据对应起来。
4.使用echart 通过专题数据的行政区划编码将每个行政区划的div初始化为饼状图，生成专题图层。

实现过程

1.在页面引入相关依赖

    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/echarts@3.8.5/dist/echarts.js"></script>

2.加载底图

function addBasicMap(){
  mapboxgl.accessToken =
      "your mapboxgl access_token";
    window.map = new mapboxgl.Map({
      container: "thematicMapDiv",
      style: "mapbox://styles/mapbox/streets-v11",
       center: [117.9, 33.5],
       zoom: 4
    });}

3.加载专题点坐标

//加载专题地图
function addThematicEchartLayer() {
      //销毁echartLists
      clearEchartInstantAndPoint();
	  //专题数据处理及加载到地图
      window.thematicdata.forEach(element => {
        var geojson = JSON.parse(element.GEOJSON);
        var el1 = document.createElement("div");
        el1.id = "thematicchart" + element.XZQH;
        el1.style = "height:100px;width:100px;";
        //加载专题点坐标
      window.echartMapPoints.push( new mapboxgl.Marker(el1, { offset: [-50 / 2, -50 / 2] })
          .setLngLat([
            geojson.geometry.coordinates[0],
            geojson.geometry.coordinates[1]
          ])
          .addTo(window.map));
		  //echart初始化专题图
		  addEchartInit(element);
	
})}

4.使用echart生成专题图。
备注：（此处可以根据系统需求，使用饼状图、扇形图等，参考echart api）

//echart初始化专题图
function addEchartInit(element){
		var data = [];
        Object.keys(window.thematicHeader).forEach(key => {
          if (key.indexOf("BZ") != -1) {
            data.push({ name: window.thematicHeader[key], value: element[key] });
          }
          });
        var option1 = {
            tooltip : {
            trigger: 'item',
            formatter: "{a}<br/>{b} : {c} ({d}%)"
          },
          series: {
            name:element.XZQHMC,
            type: "pie",
            data: data,
            radius: "50%",
            center: ["50%", "50%"],
            label: {
              normal: {
                position: "inner",
                fontSize:10
              },
              
            }
          }
        };
		window.echartInitLists.push(initEchart("thematicchart" + element.XZQH, option1));
   
		
}
//初始化echart表
function initEchart(id,options){
  var mychart = echarts.init(document.getElementById(id));
  mychart.setOption(options);
  return mychart;
}

全部代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue-manage-system</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

    <!-- mapbox-gl -->
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet" />
	<!-- echart-->
    <script src="https://cdn.jsdelivr.net/npm/echarts@3.8.5/dist/echarts.js"></script>
  
</head>
<body>
<div style=" width: 100%;
  height: 100%;
  position: absolute;" id="thematicMapDiv"></div>
<script>
//数据为模拟数据，仅供参考
window.onload=function(){
	addBasicMap();
	//专题数据
	window.thematicdata=[{"XZQH":"110000","BZ3":30.0,"XZQHMC":"北京市","BZ2":10.0,"GEOJSON":"{\"type\": \"Feature\",\"properties\": {},\"geometry\": {\"type\": \"Point\",\"coordinates\": [116.412616834352,40.1855914174138 ]}}"},{"XZQH":"140000","BZ3":50.0,"XZQHMC":"山西省","BZ2":20.0,"GEOJSON":"{\"type\": \"Feature\",\"properties\": {},\"geometry\": {\"type\": \"Point\",\"coordinates\": [112.288799420842,37.5712486062551 ]}}"},{"XZQH":"220000","BZ3":500.0,"XZQHMC":"吉林省","BZ2":300.0,"GEOJSON":"{\"type\": \"Feature\",\"properties\": {},\"geometry\": {\"type\": \"Point\",\"coordinates\": [126.187672031028,43.6682548638262 ]}}"},{"XZQH":"360000","BZ3":100.0,"XZQHMC":"江西省","BZ2":2000.0,"GEOJSON":"{\"type\": \"Feature\",\"properties\": {},\"geometry\": {\"type\": \"Point\",\"coordinates\": [115.72225295253,27.6141576799222 ]}}"}];
	window.thematicHeader={"XZQH":"行政区划","BZ3":"小学","XZQHMC":"行政区划名称","BZ2":"初中","GEOJSON":"坐标"};
	//需要清理的对象
	 window.echartMapPoints=[];
	 window.echartInitLists=[];
	
	addThematicEchartLayer();
	
}
//加载底图
function addBasicMap(){
  //这个可以自己去mapboxgl官网申请key
  mapboxgl.accessToken =
      "pk.eyJ1IjoieWFuZ3pob3VoYW8iLCJhIjoiY2ppbG9sMXJnMXc5YjNxbnhrOWl1bXppMyJ9.-JL3W32NYV_lHqsTUIGw9Q";
    window.map = new mapboxgl.Map({
      container: "thematicMapDiv",
      style: "mapbox://styles/mapbox/streets-v11",
       center: [117.9, 33.5],
       zoom: 4
    });
}

//加载专题地图
function addThematicEchartLayer() {
      //销毁echartLists
      clearEchartInstantAndPoint();
	  //专题数据处理及加载到地图
      window.thematicdata.forEach(element => {
        var geojson = JSON.parse(element.GEOJSON);
        var el1 = document.createElement("div");
        el1.id = "thematicchart" + element.XZQH;
        el1.style = "height:100px;width:100px;";
        window.echartMapPoints.push( new mapboxgl.Marker(el1, { offset: [-50 / 2, -50 / 2] })
          .setLngLat([
            geojson.geometry.coordinates[0],
            geojson.geometry.coordinates[1]
          ])
          .addTo(window.map));
		  //echart初始化专题图
		  addEchartInit(element);
	
})}

//echart初始化专题图
function addEchartInit(element){
		var data = [];
        Object.keys(window.thematicHeader).forEach(key => {
          if (key.indexOf("BZ") != -1) {
            data.push({ name: window.thematicHeader[key], value: element[key] });
          }
          });
        var option1 = {
            tooltip : {
            trigger: 'item',
            formatter: "{a}<br/>{b} : {c} ({d}%)"
          },
          series: {
            name:element.XZQHMC,
            type: "pie",
            data: data,
            radius: "50%",
            center: ["50%", "50%"],
            label: {
              normal: {
                position: "inner",
                fontSize:10
              },
              
            }
          }
        };
		window.echartInitLists.push(initEchart("thematicchart" + element.XZQH, option1));
   
		
}
//初始化echart表
function initEchart(id,options){
  var mychart = echarts.init(document.getElementById(id));
  mychart.setOption(options);
  return mychart;
}

//清除echart及marker
function clearEchartInstantAndPoint(){
		window.echartInitLists.forEach(echartItem => {
                  echartItem.dispose();
          });
        window.echartMapPoints.forEach(pointItem => {
            pointItem.remove();
          });
}
</script>
</body>
</html>
keepstudy_yangzh
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts GL 结合mapbox趟坑记（使用appendData）
追逐丶的博客
03-05 5643
前言 echartsGL官网示例有个很炫酷的散点图，通过服务器分批加载实现了千万条以上数据的展示： domo可以看这里。 其实就是分批加载服务器数据然后呈现。看上去很简单，其实坑不是一般的多。 二、数据转换 通过官网下载上述demo，放到本地，打开控制台，找到数据请求地址，修改demo里的ROOTPATH，尝试在本地跑起来。一看，报错。接口不支持跨域。没办法，只能模拟一下接口返回的数据，通过Fl......
JavaScript 高性能编程 —— Data Access 数据访问
cccloveforever的博客
04-20 1515
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
echarts+mapbox 轨迹热力图
11-14
echarts+mapbox渲染实现轨迹热力图的可视化展示，数据均为模拟数据。
mapbox+echarts-gl的使用案例
m0_60067558的博客
11-22 776
可视化篇：mapbox + echarts-gl 展示血脉交通_yycc-CSDN博客_echarts-gl
Mapbox GL JS介绍和简单使用
weixin_39676449的博客
02-01 1369
可以显示立体地图并且支持移动端，是一款十分优秀的WEB GIS开发框架。Mapbox GL JS 是Mapbox的一个开源客户端库，用于渲染 Web 端的可交互地图。作为 Mapbox 生态系统的一部分，它通常与 Mapbox 提供的其他服务集成在一起，统一对外使用。WebGL渲染意味着高性能，MapboxGL能够渲染大量的地图要素，拥有流畅的交互以及动画效果、可以显示立体地图并且支持移动端，是一款十分优秀的WEB GIS开发框架。
eCharts+mapbox获取mapbox实例
ScapeD的博客
10-27 4599
在项目中，我们常常需要动态设置底图样式，中心点等属性，mapbox设置属性的前提是获得底图实例。 在echarts+mapbox开发时，mapbox是在eCharts的Options中定义的，因此获取mapbox实例要靠eCharts提供的方法获得。 以eCharts图表命名为chart为例，获取底图的方法为： var map=chart.getModel().getCompone...
echarts grid属性_【教程】基于Mapbox与Echarts的夜光遥感数据与飞行轨迹三维可视化...
weixin_39639381的博客
11-29 902
进入基于Mapbox与Echarts夜光遥感数据与飞行轨迹三维可视化教程之前，首先让我们看下可视化效果：夜光遥感对于反映人类社会活动具有独特的能力，因此被广泛应用于社会经济领域的空间数据挖掘。夜光影像不仅可以反映夜间城镇灯光，还可以捕捉到夜间渔船、天然气燃烧、森林火灾的发光等，因此广泛地应用于社会经济参数估算、区域发展研究、重大事件评估、渔业监测等诸多研究领域。在这篇文章中将利用夜光遥感...
mapbox+eCharts路线大数据渲染
ScapeD的博客
10-27 8269
eCharts可以实现大量数据迅速渲染，笔者在项目中，测试包含25w余拐点的总计7w余条线渲染总共用时1秒左右，性能表现相当优秀，显示效果也相当不错。 eCharts天生支持mapbox，就像其天生支持百度地图一样，而选择前者的原因是其地图相当漂亮，而且支持相当程度的用户自定义地图。 效果图： 1，添加相关JS引用 包含mapbox底图引用以及eCharts引用 <s...
使用vue框架使用mapbox在以天地图为底图上加载10万数据的麻点专题图代码
张志强的博客
06-07 1638
在上面的代码中，我们使用Supercluster库创建了一个新的索引，并将我们的数据加载到该索引中。在initMap方法中，我们创建了一个新的Mapbox.Map实例，并将其渲染到我们的HTML元素中。在本文中，我们将使用Mapbox的JavaScript库，它提供了一种简单的方式来集成Mapbox地图到我们的Vue应用程序中。在上面的代码中，我们使用Mapbox.Marker类创建了一个新的标记，并将其添加到地图上。我们还使用了Array.map方法来遍历我们的数据，并将每个数据点转换为一个标记。
vue中使用Mapbox+Echartsgl进行可视化
~~
05-08 1410
1，安装echarts和echartsgl cnpm i echarts echarts-gl -S 然后在main.js中引入： //引入echarts import echarts from 'echarts' import 'echarts-gl' Vue.prototype.$echarts = echarts 2,引入mapboxgl 在public/index.html...
Mapbox + ECharts 实现简单迁徙图
hequhecong10857的博客
10-01 1844
文章目录概述预览效果实现代码说明相关链接 概述 ECharts是开源的可视化图表库，其中有丰富的图表。本文使用Mapbox结合ECharts插件实现了简单的迁徙地图。 预览效果 实现代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>mapbox + echarts （简单迁徙图）</title> <meta name="viewport
可视化篇：mapbox + echarts-gl 展示血脉交通
热门推荐
yycc
11-13 2万+
好久没跟新，怕是这个爱好都要被繁忙的工作给消磨掉了。。 17年也快结束了，此篇应该是作为今年的结尾了，望来年分享更多有趣的东西。
echarts mapbox地图案例
12-12
echarts mapbox 地图提供下载，根据echarts官方案例进行开发。
基于echarts gl+mapbox实现24小时潮汐功能
01-04
基于echarts gl+mapbox实现24小时潮汐功能 参考地址：http://gallery.echartsjs.com/editor.html?c=xDfe9PgPgQ 欢迎批评指正
echarts+echarts-gl实现带有散点、路径的3d地球
07-22
该资源主要是使用echarts+echarts-gl实现带有散点、路径的3d地球的简单示例代码 效果可见本人的一篇文章 https://blog.csdn.net/weixin_45669156/article/details/125932601?spm=1001.2014.3001.5502 文章提到的...
vue+mapboxgl 鹰眼展示
05-25
运用vue加mapboxgl,编写的鹰眼图，全局视图，通过小图查看大图的展示功能 1、首先要有两个地图 大图，小图，鹰眼范围图（简称鹰眼） 2、大图移动，放大缩小的时候要相应的放大和缩小 3、小图不动，鹰眼图放大和缩小...
echarts结合echarts-gl实现3D飞线地球可视化
08-05
echarts结合echarts-gl实现3D飞线地球可视化，这里提供一个简单案例的实现方式，访问页面需要通过类似vscode插件之Live Server等服务器的方式打开
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 331
步骤很详细，直接上教程……
一个小时学习javaScript
weixin_43064364的博客
04-20 941
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
MapboxGL+Vue3加载高德地图实例
07-15
你可以使用MapboxGL和Vue3来加载高德地图实例。首先，确保你已经安装了MapboxGL和Vue3的依赖。 接下来，你可以创建一个Vue组件来加载地图。在这个组件中，你需要先引入MapboxGL和高德地图的JavaScript库： ```javascript import mapboxgl from 'mapbox-gl'; import AMapLoader from '@amap/amap-jsapi-loader'; export default { mounted() { // 加载高德地图 AMapLoader.load({ key: 'your-amap-api-key', version: '2.0', plugins: ['AMap.Geocoder'] }).then(() => { // 初始化MapboxGL mapboxgl.accessToken = 'your-mapbox-access-token'; // 创建地图实例 const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [lng, lat], zoom: 12 }); // 在地图上添加高德地图瓦片图层 const amapLayer = new AMap.TileLayer(); map.addLayer(amapLayer); // 在地图上添加其他图层、标记等 // ... }); } } ``` 在上面的代码中，你需要替换`your-amap-api-key`为你的高德地图API密钥，以及`your-mapbox-access-token`为你的Mapbox访问令牌。你还可以根据需要设置地图的中心点和缩放级别。 最后，将地图容器添加到你的Vue模板中： ```html <template> <div id="map"></div> </template> <script> import mapComponent from '@/components/MapComponent.vue'; export default { components: { mapComponent } } </script> ``` 通过这种方式，你可以在Vue组件中使用MapboxGL和高德地图来加载地图实例。记得替换你的API密钥和访问令牌，以及根据需要自定义地图样式和添加其他图层。希望对你有帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值