leaflet离线地图(百度)+vue+echarts

已于 2024-01-10 08:50:22 修改
阅读量5k 收藏 25
点赞数 2
文章标签： vue.js 前端 javascript
于 2022-11-09 21:16:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40992252/article/details/127777570
版权

实现效果：

 思路：把离线地图瓦片全部下载下来 然后自己在内网起个提供瓦片图请求的服务 从服务器加载，（或者前端静态资源）。

实现步骤：

1.下载全能电子地图下载器。下载地图瓦片。

 2.把下载的图层放到public文件夹下，瓦片过多时候，也可以部署到nginx代理上。

3.安装地图相关的插件

  "leaflet": "^1.9.2",

   "ol": "^7.1.0",

    "proj4": "^2.8.0",

    "proj4leaflet": "^1.0.2",

     "vue2-leaflet": "^2.7.1"

4.tileLayer.baidu.js   待项目中引用.放到指定路径下。

require('proj4')
require('proj4leaflet')
const L = require('leaflet')
// 本地百度地图离线瓦片地图   项目需要叠加底图，所以要两个。不需要叠加的，一个就好
const titleO = '/map/overlay/{z}/{x}/{y}.png'
const titleS = '/map/satellite/{z}/{x}/{y}.jpg'

var urlPath = titleO
var urlPathS = titleS
//请引入 proj4.js 和 proj4leaflet.js
L.CRS.Baidu = new L.Proj.CRS(
  'EPSG:900913',
  '+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs',
  {
    resolutions: (function () {
      const level = 19
      var res = []
      res[0] = Math.pow(2, 18)
      for (var i = 1; i < level; i++) {
        res[i] = Math.pow(2, 18 - i)
      }
      return res
    })(),
    origin: [0, 0],
    bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244]),
  }
)

L.tileLayer.baidu = function (option) {
  option = option || {}

  var layer
  var subdomains = '0123456789'
  switch (option.layer) {
    //底图
    case 'vec':
    default:
      layer = L.tileLayer(urlPath, {
        name: option.name,
        subdomains: subdomains,
        tms: true,
        zIndex:400
      })

      break
          //卫星图
    case 'vecs':
        layer = L.tileLayer(urlPathS, {
          name: option.name,
          subdomains: subdomains,
          tms: true,
          zIndex:200
        })
  
        break
    case 'img_d':
      layer = L.tileLayer(
        'http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46',
        {
          name: option.name,
          subdomains: subdomains,
          tms: true,
        }
      )
      break
    case 'img_z':
      layer = L.tileLayer(
        'http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=' +
          (option.bigfont ? 'sh' : 'sl') +
          '&v=020',
        {
          name: option.name,
          subdomains: subdomains,
          tms: true,
        }
      )
      break

    case 'custom': //Custom 各种自定义样式
      //可选值：dark,midnight,grayscale,hardedge,light,redalert,googlelite,grassgreen,pink,darkgreen,bluish
      break

    case 'time': //实时路况
      var time = new Date().getTime()
      layer = L.tileLayer(
        'http://its.map.baidu.com:8002/traffic/TrafficTileService?x={x}&y={y}&level={z}&time=' +
          time +
          '&label=web2D&v=017',
        {
          name: option.name,
          subdomains: subdomains,
          tms: true,
        }
      )
      break

    //合并
    case 'img':
      layer = L.layerGroup([
        L.tileLayer.baidu({
          name: '底图',
          layer: 'img_d',
          bigfont: option.bigfont,
        }),
        L.tileLayer.baidu({
          name: '注记',
          layer: 'img_z',
          bigfont: option.bigfont,
        }),
      ])
      break
  }
  return layer
}

5.main.js中引用 

一定要引入，否则底图就有问题。

6.页面使用

<template>
<section>
    <div id="leafletMap" class="home" :style="{height: '90vh',width: '100vw' ,background:'#000'}"></div>
</section>
</template>

<script>
import L from 'leaflet'
require('../../../util/tileLayer.baidu.js')  
export default {
    props: {},
    data() {
        return {
            map: {},
            mark1: [{
                    point: [22.50, 111.31],
                    data: [30, 60, 58]
                },
                {
                    point: [23.35, 111.42],
                    data: [80, 40, 48]
                },
                {
                    point: [24.35, 111.42],
                    data: [30, 20, 48]
                }
            ],
         }
    },
    mounted() {
        this.initMap()
    }
    methods: {
        initMap() {
            let that = this
            let map = L.map('leafletMap', {
                minZoom: 5,
                maxZoom: 14,
                // center: [37.54, 100.23],  
                center: [22.50, 111.31],
                zoom: 8,
                zoomControl: false,
                attributionControl: false,
                crs: L.CRS.Baidu,
                contextmenu: true,  
                contextmenuWidth: 140,  //右键菜单功能
                contextmenuItems: [{
                        text: '设置为起点',
                        callback: that.setStartPoint,
                    },
                    {
                        text: '设置为中间点',
                        callback: this.setWaypoints,
                    },
                    {
                        text: '设置为终点',
                        callback: that.setStopPoint,
                    },
                    '-',
                    {
                        text: '开始规划',
                        callback: that.calcRoute,
                    },
                ],
            })
            L.tileLayer.baidu({   //图层1
                layer: 'vec'
            }).addTo(map)
            L.tileLayer.baidu({   //图层2
                layer: 'vecs'
            }).addTo(map)
            that.map = map
            that.initWork(that.mark1)
         },
         initWork(mark) {
            let that = this;
            if (mark.length != 0) {
                for (var a = L.featureGroup().addTo(that.map), t = 0; t < mark.length;t++) {
                    var n = mark[t].point;
                    var divIcon;
                    divIcon = L.divIcon({
                        iconSize: [0, 0],
                        popupAnchor: [0, -5],
                        html: '<div style="width:100px;height:120px;" id="mark' + (t + 1) + '"></div>'
                    });
                    var o = L.marker(n, {
                        icon: divIcon
                    });
                    a.addLayer(o);
                }

                this.setEcharts(mark)
            }
        },
  setEcharts(data) {
            if (data && data.length > 0) {
                for (let i = 0; i < data.length; i++) {
                    const dataList = data[i].data
                    var option = {
                        // backgroundColor: 'rgb(255, 255, 255)',
                        color: ['#54CDE9'],
                        tooltip: {
                            show: false
                        },
                        grid: {
                            left: '8%',
                            right: '2%',
                            top: '10%',
                            bottom: '20%'
                        },
                        xAxis: [{
                            type: 'category',
                            data: ['type1', 'type2', 'type3'],
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                color: '#fff',
                                interval: 0,
                                margin: 10,
                                align: 'center'
                            }
                        }],
                        yAxis: {
                            show: false,
                            type: 'value',
                            min: 0,
                            max: 100,
                        },
                        series: [{
                                name: '',
                                type: 'pictorialBar',
                                symbolSize: [15, 5],
                                symbolOffset: [0, -2],
                                symbolPosition: 'end',
                                z: 12,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                        color: '#FFDE00',
                                        fontWeight: 'bold'
                                        // "formatter": "{c}%"
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: (params) => {
                                            let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: 'rgba(254, 174, 162, 1)',
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'rgba(253, 114, 112, 1)',
                                                },
                                            ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: 'rgba(123, 200, 255, 1)',
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'rgba(53, 157, 245, 1)',
                                                },
                                            ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: 'rgba(251, 169, 128, 1)',
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'rgba(247, 203, 107, 1)',
                                                },
                                            ])]
                                            return colors[params.dataIndex]
                                        },
                                        barBorderRadius: [15, 15, 0, 0] //圆角大小
                                    },
                                },
                                data: dataList
                            },
                            {
                                type: 'pictorialBar',
                                symbolSize: [15, 5],
                                symbolOffset: [0, 2],
                                z: 12,
                                itemStyle: {
                                    normal: {
                                        color: (params) => {
                                            let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: 'rgba(254, 174, 162, 1)',
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'rgba(253, 114, 112, 1)',
                                                },
                                            ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: 'rgba(123, 200, 255, 1)',
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'rgba(53, 157, 245, 1)',
                                                },
                                            ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: 'rgba(251, 169, 128, 1)',
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'rgba(247, 203, 107, 1)',
                                                },
                                            ])]
                                            return colors[params.dataIndex]
                                        },
                                    },
                                },
                                data: dataList
                            },
                            {
                                type: 'bar',
                                showBackground: false,
                                backgroundStyle: {
                                    color: 'rgba(216, 229, 247, 0.55)',
                                    borderRadius: [6, 6, 0, 0]
                                },
                                itemStyle: {
                                    normal: {
                                        color: (params) => {
                                            let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: 'rgba(254, 174, 162, 1)',
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'rgba(253, 114, 112, 1)',
                                                },
                                            ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: 'rgba(123, 200, 255, 1)',
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'rgba(53, 157, 245, 1)',
                                                },
                                            ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: 'rgba(251, 169, 128, 1)',
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'rgba(247, 203, 107, 1)',
                                                },
                                            ])]
                                            return colors[params.dataIndex]
                                        },
                                    },
                                },
                                barWidth: '15',
                                data: dataList
                            }
                        ]
                    }
                    let idName = 'mark' + (i + 1)

                    echarts.init(document.getElementById(idName)).setOption(option)
                }
            }
        },
       clearMarker() {
            $(".leaflet-marker-pane").empty()
        },
           
    }

参考文档：vue-leaflet离线地图(百度)-瓦片地图案例 - 掘金 (juejin.cn)

002：vue+leaflet 加载多种形式的高德地图
大剑师兰特的GIS世界
09-08 2572
本示例的目的是介绍演示如何在vue+leaflet中添加高德地图，有多种形式，分别是高德路网图、高德卫星影像图、高德矢量地图等。点击查看本专栏内容目录列表。
019：vue+leaflet 加载Geoserver地图，wms格式数据
大剑师兰特的GIS世界
09-16 790
本示例的目的是介绍演示如何在vue+leaflet中添加geoserver发布的地图，wms格式的数据。点击查看本专栏内容目录列表。
五分钟学GIS | 快速认识Leaflet
热门推荐
SuperMap技术控
10-31 1万+
Leaflet是近几年新兴的广受欢迎的前端地图可视化开源框架，在Github上有高达19000多颗星，比老牌开源地图框架OpenLayers还要多哦，其火热程度可见一斑。Leaflet以简单易用高效为开发理念，设计轻巧灵活，非常易于理解和上手，这也是它被众多开发喜爱的原因之一。
leaflet离线地图api
05-06
leaflet中文api
Leaflet结合百度地图实现行政区划掩膜与镂空效果
最新发布
weixin_32047493的博客
03-12 1131
本文还有配套的精品资源，点击获取 简介：本文介绍如何利用Leaflet库与百度地图API创建行政区划掩膜和镂空效果。Leaflet是一个轻量级的JavaScript库，适合移动设备，而百度地图API提供了卫星和矢量地图数据。文章展示了如何引入核心库、初始化地图、创建自定义图层加载百度地图，并通过GeoJSON层显示行政区划边界。通过叠加图层和调整可见性实现了镂空效果，并提供...
Leaflet离线地图Demo
07-02
1、加载离线地图切片Demo (因为离线地图切片数据太大，这里没有上传切片数据) 2、按照地图范围动态加载点数据Demo 3、点选、框选、线缓冲区选择Demo 4、热力图与点图层来回切换Demo 5、Leaflet画带箭头的线Demo 6、以上部分功能通过js与CS程序(即桌面浏览器程序)交互来实现，配套的CefSharp浏览器程序请搜本人的资源
使用Leaflet和瓦片地图实现离线地图的技术指南
chenchuang0128的博客
06-24 2670
Leaflet是一个开源的JavaScript库，用于在Web页面上创建交互式地图。它轻量级、高效且易于使用，支持多种地图数据格式，包括瓦片地图、GeoJSON、KML等。由于其模块化的设计和灵活的扩展性，Leaflet成为了Web地图开发的热门选择。
Leaflet地图加载百度底图
lihefei_coder的博客
08-11 898
源代码 <!DOCTYPE html> <html style="padding:0;margin:0;"> <head> <meta charset="utf-8"/> <title></title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css"> <script src="http.
leaflet离线地图(开发总结)
weixin_55532289的博客
06-30 3394
uniapp 中使用leaflet离线地图
vue实现离线地图+leaflet+高德瓦片_vue离线地图引用leaflet
2401_85158399的博客
07-04 664
【代码】vue实现离线地图+leaflet+高德瓦片_vue离线地图引用leaflet。
Arcgis for javascript 4.20.2+VUE3+Typescript 离线使用指引
d305199的博客
08-31 973
最近公司项目需要使用地图展示功能，地图图层由内网搭建的服务器提供，这儿主要记录本次使用地图的过程。为了在内网展示地图，本人尝试了leaflet+esri-leaflet, @supermap/iclient-leaflet, arcgis这几种技术，最终选择了arcgis。 为什么最终选择arcgis呢？我也是在开发中遇到了无数坑才最终确定的。 首先说说@supermap/iclient-leaflet, 通过npm install @supermap/i...
leaflet加载百度地图和其他网络在线地图
08-23
leaflet加载百度地图和其他网络在线地图，包含百度的瓦片、影像以及道路交通实况服务，测试，百度坐标数据无需转换，直接根据经纬度可以显示在正确位置。
LeafLet离线地图详细demo合集.rar
11-15
LeafLet离线地图详细demo合集，有各种详细使用示例供参考，满足常用的leaflet开发地图示例
LeafLet离线地图案例demo集合非常详细
12-28
LeafLet离线地图案例demo集合非常详细,功能多，实用性强。
leaflet加载百度、高德、谷歌、天地图等在线地图
12-26
leaflet加载百度、高德、谷歌、天地图等在线地图
Leaflet地图数据迁徙 + 飞线效果
weixin_45886797的博客
09-14 1578
Leaflet地图数据迁徙 + 飞线效果
基于 Leaflet做离线地图及基本功能（监听，测距，线，圆）
GaoYC123的博客
06-24 1281
基于 Leaflet做离线地图及基本功能（监听，测距，线，圆）
leaflet-离线地图
qq_41713136的博客
02-28 3671
具体参考：https://blog.csdn.net/qq_39430927/article/details/117952511 1、下载MapDownloader工具 2、打开MapDownloader.exe下载需要的范围 3、打开MapDownloader.exe.config文件，里面配置数据库的相关数据 4、下载GISMysqlToLocal.exe工具导出地图图片，与上面数据库的配置内容一致，点击导出即可 ...
前端项目使用Leaflet引入离线地图
芝芝为荔枝
04-01 1万+
前端引入地图（内网离线） 由于网络等限制，可能需要对地图的展示、打点、显示等操作 我们的步骤是 下载瓦片地图，将瓦片地图静态文件放置在服务器 引入绘制地图的第三方插件，这里使用 Leaflet，在Js代码中初始化地图 按照 Leaflet 开发文档行事 1、下载瓦片地图 这一步让后端去操作，下载后mysql会多一张数据表，导出成瓦片地图放在服务器 1.1 下载工具 需要使用下载工具：MapDownloader 链接: https://pan.baidu.com/s/1LOZdklEtkF5lqa9
leaflet 离线地图 vue
09-16
Leaflet 是一个流行的开源 JavaScript 库，它用于创建交互式的、移动友好的地图。它是一个轻量级的库，提供了丰富的地图功能和易于使用的 API。而 Vue 是一个流行的 JavaScript 框架，用于构建用户界面。它可以很好地与 Leaflet 集成，以创建功能丰富且具有交互性的离线地图应用。 使用 Vue 和 Leaflet 可以实现离线地图应用的多种功能。首先，可以使用 Leaflet 的各种图层（如瓦片图层、矢量图层等）在地图上显示地理数据。这些图层可以是在线地图供应商的数据，也可以是自定义的本地数据。通过 Vue 和 Leaflet 的结合，可以在应用中轻松实现地图的加载、显示和交互。 其次，Vue 和 Leaflet 提供了丰富的事件处理机制，可以监听用户在地图上的交互行为（如点击、移动等），并做出相应的响应。这使得用户可以与地图进行交互，如选择特定区域、查看详细信息等。 另外，Vue 的组件化开发方式可以很好地与 Leaflet 的插件系统配合使用。可以将地图相关的功能封装成组件，以便在应用中复用。这样可以减少重复的代码，提高开发效率。 最后，由于离线地图应用需要加载大量的地理数据，因此性能也是一个重要的考虑因素。Vue 和 Leaflet 提供了对性能优化的支持，如地图数据懒加载、数据缓存等。这些特性可以显著提升应用的加载速度和流畅度。 综上所述，使用 Vue 和 Leaflet 结合可以创建功能丰富、交互性强的离线地图应用。无论是在移动端还是在桌面端，都能够提供良好的用户体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值