基本概念

在本地地图上绘制图表，图表经过响应弹出来。

想想真是令人兴奋的事情，到时候用Qt的Widget和QGraphicsView结合QWebEngine搞一层。来一个科技感十足的魔幻页面。

下面来说明下这个逻辑。

使用Leaflet的WMTS接口请求本地Geoserver服务，从而获取数据。然后再把echarts放到Leaflet的响应事件里面。比如框。弹框的时候构造图表。通过这样的方式，即可完成地图上显示图标。

代码与实例

程序运行截图如下：

当选中某一个城市后！

源码如下：

test8.html

<!DOCTYPE html>
<html>
<head><title>Hello World</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /><link rel="stylesheet" href="leaflet.css" /><script src="leaflet.js"></script>        <script src="leaflet-tilelayer-wmts-src.js"></script><script src="echarts.js"></script><style>html, body {height: 100%;margin: 0;}#map {width: 100%;height: 100%;}.chart{width: 600px;height: 300px;background-color: #fff;}</style></head>
<body>
<script src="test6.js" type="text/javascript"></script>
<div id='map'></div>
<script type="text/javascript">var ign = new L.TileLayer.WMTS( "http://XXX.XXX.XXX.XXX:8080/geoserver/gwc/service/wmts" ,{layer: 'GG_9:gg_9',tilematrixset: "EPSG:900913",Format : 'image/png',TileMatrix: 'EPSG:900913:8'});var map = L.map('map', {minZoom: 4,maxZoom: 7}).setView([32, 118], 7);L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);map.addLayer(ign);map.invalidateSize(true);//添加的数据function onEachFeature(feature, layer){var idStr = feature.geometry.properties.idStr.toString() ;var popupContent = '<div style="width:350px;height:300px" id="' + idStr + '"></div>';layer.bindPopup(popupContent, {});layer.on('popupopen', function(e){var myChart = echarts.init(document.getElementById(idStr));// 指定图表的配置项和数据var option = {title: {text: '测试'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);});}L.geoJSON([bicycleRental], {onEachFeature: onEachFeature,pointToLayer: function (feature, latlng) {return L.circleMarker(latlng, {radius: 8,fillColor: "#ff7800",color: "#000",weight: 1,opacity: 1,fillOpacity: 0.8});}}).addTo(map)//添加的数据</script></body>
</html>

test6.js

var bicycleRental = {"type" : "FeatureConllection","features" : [{"geometry" : {"type" : "Point","coordinates" : [118.8, 32.05],"properties" : {"popupContent" : "南京","idStr" : "njChart"}},"type" : "Feature","id" : 100},{"geometry" : {"type" : "Point","coordinates" : [119.2, 34.55],"properties" : {"popupContent" : "连云港","idStr" : "lygChart"}},"type" : "Feature","id" : 101},{"geometry" : {"type" : "Point","coordinates" : [118.26, 33.94],"properties" : {"popupContent" : "宿迁","idStr" : "sqChart"}},"type" : "Feature","id" : 102},{"geometry" : {"type" : "Point","coordinates" : [119.12, 33.53],"properties" : {"popupContent" : "淮安","idStr" : "haChart"}},"type" : "Feature","id" : 103},{"geometry" : {"type" : "Point","coordinates" : [120.15, 33.32],"properties" : {"popupContent" : "盐城","idStr" : "ycChart"}},"type" : "Feature","id" : 104},{"geometry" : {"type" : "Point","coordinates" : [119.95, 32.40],"properties" : {"popupContent" : "泰州","idStr" : "tzChart"}},"type" : "Feature","id" : 105},{"geometry" : {"type" : "Point","coordinates" : [119.41, 32.35],"properties" : {"popupContent" : "扬州","idStr" : "yzChart"}},"type" : "Feature","id" : 106},{"geometry" : {"type" : "Point","coordinates" : [120.92, 31.94],"properties" : {"popupContent" : "南通","idStr" : "ntChart"}},"type" : "Feature","id" : 107},{"geometry" : {"type" : "Point","coordinates" : [119.99, 31.755],"properties" : {"popupContent" : "常州","idStr" : "czChart"}},"type" : "Feature","id" : 108},{"geometry" : {"type" : "Point","coordinates" : [120.33, 31.44],"properties" : {"popupContent" : "无锡","idStr" : "wxChart"}},"type" : "Feature","id" : 109},{"geometry" : {"type" : "Point","coordinates" : [120.61, 31.26],"properties" : {"popupContent" : "苏州","idStr" : "szChart"}},"type" : "Feature","id" : 110}]
}

这里有一个要注意的地方！

echarts他加载的时候需要一个div，并且还得知道这个div的id，如果没有这个将会报错，说dom找不到这个div

这个弹出的点击小点弹出的功能，是在点击后才创建div的，所以没有点击前相关的dom树如下，当点击后，可以看到此处的结构如下！

Leaflet笔记-Leaflet与echarts结合使用（在地图上绘图表）相关推荐

echarts如何在json地图上设置多种颜色的点位和自定义背景弹出框
效果图 1.引入echarts.js和jquery.min.js文件 <script type="text/javascript" src="/js/jquery. ...
Leaflet工作笔记-GIS地图上构造echarts的3D图
这里要实现的是这样的效果: 在地图上有一个柱子,3D的,直接显示,而不是使用什么label或者点击,在界面上显示. 原理如下: 1.使用leaflet的marker标签,插入一个html: 2.在这个 ...
在Leaflet地图上集成Echarts
需求背景: 现在我要在地图上加上Echarts的散点图还有线集,看起来就很牛B的那种.上效果图: 需求分析: 我先看了看Echarts官网上有提供加载地图的例子,主要包括三种方式: 1.加载js格式的 ...
Leaflet文档阅读笔记-Using GeoJSON with Leaflet笔记
目录官方解析博主例子官方解析个人觉得这官方教程给得是相当的好,因为功能非常的强大,在此记录下,方便以后使用,以后肯定会经常用到! 此节将会学到从GeoJson对象中创建且调用map vecto ...
Leaflet笔记-把leaflet-tilelayer-wmts移植到vue cli中（含思路）
目录前言过程前言关于leaflet的webpackage使用npm安装官方是有明显的解析但是关于插件特别是TileLayer.WMTS是不提供的,但提供了源码,可以稍微修改下,就能在vue ...
Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样使用Leaflet.co ...
Leaflet快速入门与加载OSM显示地图
场景 Leaflet Leaflet 是一个为建设交互性好适用于移动设备地图,而开发的现代的.开源的 JavaScript 库. 代码仅有几十KB,但它具有开发在线地图的大部分功能.Leaflet设计 ...
leaflet和leaflet.pm的使用
1.安装 npm install leaflet 2.引入 import L from 'leaflet'; import 'leaflet/dist/leaflet.css'; 3.初始化地图 ma ...
Web前端笔记-vue cli中使用echarts加载geo地图
效果是这样的: 此处是使用echarts加载geo地图. 这里简单说下逻辑: 首先npm下个包: npm install echarts 然后用个vue组件封装下. 如下代码: <templat ...

Leaflet笔记-Leaflet与echarts结合使用（在地图上绘图表）

基本概念

代码与实例

Leaflet笔记-Leaflet与echarts结合使用（在地图上绘图表）相关推荐

最新文章

热门文章