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

Leaflet 使用图片作为地图

时间:2023-12-21 14:36:51浏览次数:41  
标签: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://www.cnblogs.com/s0611163/p/17918949.html

相关文章

  • # cesium 截取图片
    cesium截取图片没啥好说的,直接贴代码吧 toImg(){if(viewer){viewer.scene.render();letcanvas=viewer.scene.canvas;letimage=canvas.toDataURL("image/png").replace("image/png","image/octet-stream");......
  • vue上传图片到指定文件夹
    vue代码<template><divclass="app-container"> <divclass="wenben"><el-upload:disabled="dis==0?true:false"class="upload-demo":action="uploadUrl":on-......
  • vue3+vite动态引入图片(import.meta.glob)
    Vite官方提供的 import.meta.glob API。这个方法一般用于批量引入js或者ts文件,但实际上这个方法就是很多import语句的集合而已,import是可以引入图片的,所以import.meta.glob也同样可以引入图片资源,只不过需要加入配置项as:'url'就可以了。 通常来说,我们可以用ES提供的......
  • 图片转换成base64格式的优缺点
    前言什么是base64?Base64,顾名思义,就是包括小写字母a-z、大写字母A-Z、数字0-9、符号"+“、”/“一共64个字符的字符集,(另加一个“=”,实际是65个字符,至于为什么还会有一个“=”,这个后面再说)。任何符号都可以转换成这个字符集中的字符,这个转换过程就叫做base64编码。图片转换成base6......
  • Vue中动态(import 、require)显示img图片
    vue中,经常会遇到显示图片的问题,如果是一个普通组件的话,那么这样就可以了<imgsrc="../assets/images/avtor.jpg"width="100%">上文的弊端有两个:首先,是采用绝对路径引入。如果以后图片移动了位置,需要修改代码。其次,如果说图片是一个logo图片,同一页面内有多处用到。就需要引用......
  • Vue项目引入图片的两种场景和三种方式
    场景一:public目录下的图片public目录public目录下的图片引入方式:Bash<!--'/images/'+图片名称,这种属于绝对路径,/指向public目录--><imgsrc="/images/image.png"> 场景二:在src目录下的图片src目录 通过import引入图片Bash//第一步:import引入importerrG......
  • 使用JavaScript实现基于图片地址的图片下载功能
    前言在Web开发中,有时我们需要让用户能够通过点击按钮或链接来下载特定的图片。使用JavaScript,我们可以轻松地实现这一功能,让用户能够方便地下载网页上显示的图片。本文将介绍如何使用JavaScript根据图片地址下载图片,并提供详细的代码示例。为什么需要图片下载功能?在许多网站和We......
  • ArcGis加载天地图山东WMTS服务
    转自http://www.taodudu.cc/news/show-6306550.html?action=onClickhttp://www.taodudu.cc/news/show-4749559.html?action=onClick一、使用条件1.软件:本次测试软件ArcMap10.82.电脑可以连接互联网3、进入山东省地理信息公共服务平台完成注册山东省地理信息公共服务平台(s......
  • Typora图片保存到gitee
    Typora图片保存到gitee初始化Gitee仓库登录gitee,在【设置】-【安全设置:私人令牌】新增一个令牌提交之后把token复制下来,这个token只会出现这一次,丢了就再生成新的令牌创建一个新的仓库,必须是公开的,因为markdown需要外部访问才能显示出图片下载Typora官方链......
  • 下载图片中文乱码问题解决记录
    1.问题背景需求需要做一个场所码下载的需求,后端接口实现使用的是AWT[1]。在本地Windows开发环境联调接口一切正常,当部署到测试环境Linux服务器上之后,前端同事反馈下载的图片如下:这个问题其实不能算是乱码,而是字体缺失,图片中的汉字使用了微软雅黑字体,而测试环境使用的是docker部......