首页 > 其他分享 >Leaflet 使用图片作为地图

Leaflet 使用图片作为地图

时间:2023-12-26 16:32:04浏览次数:30  
标签:map false 缩放 地图 Leaflet new imageBounds 图片

Leaflet 使用图片作为地图
关键代码:

L.CRS.Simple.transformation = new L.Transformation(1, 0, 1, 0); // 坐标原点切换为左上角

var map = new L.Map('map', {
    crs: L.CRS.Simple, // 设置地图坐标模式为简单模式
    center: [0, 0], // 地图中心
    zoom: -0.5, // 缩放比例
    maxZoom: 1.9, // 最大缩放比例
    minZoom: -1.7, // 最小缩放比例
    zoomSnap: 0.1, // 缩放级别会捕捉到最接近的整数
    attributionControl: false, // 移除右下角leaflet标识
    doubleClickZoom: false, // 禁用双击放大
    zoomControl: false // 禁用 + - 缩放按钮
});

function loadMap(imgUrl, width, height) {
    let imageBounds = [[0, 0], [height, width]]; // [[0, 0], [高, 宽]]
    let imageLayer = L.imageOverlay(imgUrl, imageBounds);
    map.addLayer(imageLayer);
    map.panTo(new L.LatLng(imageBounds[1][0] / 2.0, imageBounds[1][1] / 2.0), { animate: false });
}

loadMap('images/building-images/010101.png', 1516, 1080)



标签:map,false,缩放,地图,Leaflet,new,imageBounds,图片
From: https://blog.51cto.com/u_5496753/8984777

相关文章

  • ionic在iOS16上遇到的一些问题,图片、图标不显示,样式不正常等
    近日,一个很久之前ionic5开发的APP的iOS版因为签名描述文件(profile、.mobileProvisioning)过期而不能使用了,所以需要重新创建一个描述文件,然后重新打包APP。但过程中却遇到了一系列的问题,特写此文记录下来。问题1,iOS打包遇到问题:在xcode的Signing&Capabilities面板中选择(导入)了......
  • 利用PaddleHub 进行人脸检测识别、并对图片进行抠图
    利用PaddleHub进行人脸检测识别、并对图片进行抠图 本文是利用百度的飞桨平台的paddle进行人脸的检测和抠图,但是里面也有一些小问题,特记录一下笔记,以便以后观看学习。环境:python3.9飞桨是2.5.2(截稿期是最新版)工具:PyCharm代码如下:#Thisisas......
  • Auto Image Attributes Pro v4.4:优化图片SEO,解锁Google图片流量
    AutoImageAttributesProv4.4已注册–WordPress插件AutoImageAttributesProv4.4:优化图片SEO,解锁Google图片流量一、插件概述在数字时代,图像已成为网站内容不可或缺的一部分。然而,仅仅上传图像并不足以吸引搜索引擎的注意。为了从图像中获得最大的SEO价值,您需要一款功......
  • 融云获评「全球领航者·年度服务商」,自制《地图》引领行业风潮
    12月19日,由新黄河、经济观察报与霞光智库共同举办的“潮起·奔流——2023全球领航者大会”在北京举办。关注【融云全球互联网通信云】了解更多大会重磅发布“全球领航者2023年度榜单”,融云获评“全球领航者·年度服务商”。作为在出海大年收尾时举办的一场总结大会,众多出海......
  • 使用 Flutter 制作地图应用
    使用Flutter制作地图应用本文主要介绍使用Flutter制作地图应用在本文中,我将向您展示如何使用Flutter向您的应用程序添加映射功能。对于本教程,您将不需要googlemapsAPI,因此您无需支付任何费用,因为我们将使用另一个免费API,所以不用多说,让我们深入研究它。依赖关系创建一个......
  • 通过深度学习进行图片分类
    1、机器学习前面博主发布了数据分析类模型(基于sql模式建立的模型)和数据挖掘类模型相关的场景示例,数据挖掘模型的建立充分利用到机器学习进行分类/预测,如预测模型和数据分析之间有什么不同?2、深度学习深度学习属于机器学习的一个子集,一般指神经网络,和之前咱们用到的算法(广义线性、决......
  • 3D组合地图在数据可视化大屏中的应用
    前言当下数据可视化大屏展示的花样层出不穷,可视化大屏的C位越来越卷,地图的样式已经不再止步于普通的平面地图,在虚拟环境中探索和交互,今天我们要介绍的这一款3D组合地图可以将复杂的数据以直观的方式呈现出来,使得数据更容易被理解和分析。例如,通过将人口分布、经济状况等数据与3D......
  • 地图服务器GeoServer的安装与配置
    目录1.安装配置Java2安装配置Tomcat3安装配置GeoServerGeoServer提供了多种安装配置方式,但是本质上GeoServer是一个基于JavaWeb的项目,因此我们理论上只需要安装Java,并且将其放置在一个Web服务器(例如ApacheTomcat)下进行发布就可以了。另外,GeoServer还提供了包含ApacheTomcat......
  • Halcon 5分钟学会9点标定 带图片示例、示例源码
    9点标定应用流程如果没有9个点,其实只需要一个点就可以,移动机械手,只需将这个点在视野内不同坐标即可,前置条件,相机焦距,视野固定高度和角度,光源光强度固定。移动机械手,使用螺丝批头,在视野范围内的白纸上,点九个点,记录每个点位的位置,每个点位的顺序要和图像上获取的圆心数组顺序一致,此时......
  • echarts在vue中不显示中国地图
    遇到的情况是在开发中,中国地图是正常显示的但是打包之后,放到服务器,地图就不显示了,经过搜索,说是因为低版本的echarts需要手动添加map首先找到这个文件然后手动写上这个最后重新打包试试吧......