<!DOCTYPE html>

<html>

<head>

    <title>Layers Control Tutorial - Leaflet</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="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>

    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

    <style>

        html, body {

            height: 100%;

            margin: 0;

        }

        #map {

            width: 1000px;

            height: 700px;

        }

    </style>

</head>

<body>

<div id='map'></div>

<script>

    var grayscaleLayer= L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}', {id: 'map11',maxZoom: 16,minZoom: 4});

    var map = L.map('map', {

        minZoom: 5,

        maxZoom: 12,

        center: [39.73, -104.99],

        zoom: 10,

        zoomDelta: 0.5,//点击+-按钮的放缩刻度尺度，默认值1

        zoomSnap: 0.5,//地图能放缩的zoom的最小刻度尺度，默认值1

        fullscreenControl: false,//全屏控件，不显示

        zoomControl: false,//放大缩小控件，不显示

        attributionControl: false//右下角属性控件，不显示

    });

    map.addLayer(grayscaleLayer);

    var imageBounds = [[0, 50], [61.148, 180]];//图片的经纬度范围，西南角点,东北角点(纬度、经度)

    var imageUrl='url';//图片的地址

    var imageLayer =L.imageOverlay(imageUrl, imageBounds,{opacity:0.8});//opacity是透明度

    map.addLayer(imageLayer);

    //如果imageLayer已经创建，后续只需要切换url即可

    if(imageLayer!=null)

    {

        imageLayer.setUrl(imageUrl);

    }

</script>

</body>

</html>

leaflet叠加图片图层的更多相关文章

  1. arcgis api 4.x for js 自定义叠加图片图层实现地图叠加图片展示（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  2. 【09】openlayers 图片图层

    效果:  创建地图: var map = new ol.Map({ //设置显示地图的视图 view: new ol.View({ projection:'EPSG:4326',//投影方式 cent ...

  3. arcgis api for js入门开发系列十叠加SHP图层

    上一篇实现了demo的热力图,本篇新增叠加SHP图层,截图如下: 叠加SHP图层效果实现的思路如下:利用封装的js文件,直接读取shp图层,然后转换geojson,最后通过arcgis api来解析转 ...

  4. arcgis api 3.x for js 入门开发系列十叠加 SHP 图层（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  5. CALayer 知识：创建带阴影效果的圆角图片图层和创建自定义绘画内容图层

    效果如下: KMLayerDelegate.h #import <UIKit/UIKit.h> @interface KMLayerDelegate : NSObject @end KML ...

  6. openlayers3 在地图上叠加WFS查询矢量图层

    随着终端设备计算能力的加强,用户在使用地图的时候也须要越来越多的交互效果. 比方如今非常火的室内导航,为了获得好的用户体验,就须要当用户单击某一商店的时候该商店的颜色能对应的变化.这就须要叠加矢量图层 ...

  7. arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  8. android 图片特效处理之 图片叠加

    这篇将讲到图片特效处理的图片叠加效果.跟前面一样是对像素点进行处理,可参照前面的android图像处理系列之七--图片涂鸦,水印-图片叠加和android图像处理系列之六--给图片添加边框(下)-图片 ...

  9. android 图片特效处理之图片叠加

    这篇将讲到图片特效处理的图片叠加效果.跟前面一样是对像素点进行处理,可参照前面的android图像处理系列之七--图片涂鸦,水印-图片叠加和android图像处理系列之六--给图片添加边框(下)-图片 ...

  10. android图片特效处理之图片叠加

    这篇将讲到图片特效处理的图片叠加效果.跟前面一样是对像素点进行处理,可参照前面的android图像处理系列之七--图片涂鸦,水印-图片叠加和android图像处理系列之六--给图片添加边框(下)-图片 ...

随机推荐

  1. #构造，二分#[AGC006B] [AGC006D] Median Pyramid

    Easy Hard 分析(Easy) 若\(X=1\)或\(X=2n-1\)无解,否则在正中间构造\(X-1,X,X+1\), 其余位置升序铺入剩余数, 若\(X-1\)左侧数大于\(X-1\)那么\ ...

  2. 李俊刚：我是如何在OpenHarmony完成ap6275s WiFi驱动的HDF适配工作的？

    编者按:在 OpenHarmony 生态发展过程中,涌现了大批优秀的代码贡献者,本专题旨在表彰贡献.分享经验,文中内容来自嘉宾访谈,不代表 OpenHarmony 工作委员会观点. 李俊刚 深圳开鸿数 ...

  3. 算法笔记-完全二叉树个数计算(时间复杂度小于O(n))

    ------------恢复内容开始------------ 首先科普一个事实,对于一个满二叉树来说,节点个数=(1<< (高度))-1. 接下来我们看这道题,管他三七二十一,前面那么多树 ...

  4. 7月27日19：30直播预告：HarmonyOS3及华为全场景新品发布会

    7月27日 19:30 HarmonyOS 3 及华为全场景新品发布会 高能来袭! 在HarmonyOS开发者社区企微直播间 一起见证HarmonyOS的又一次智慧进化 扫码预约直播,与您不见不散!

  5. 抓包整理————tcp 三次握手[九]

    前言 简单抓包一下3次握手. 正文 握手的目标: 同步sequence 序列化 初始化序列化ISN(Initial Sequence Number) 交换tcp 通信参数 如MSS.窗口比例因子.选择 ...

  6. nginx重新整理——————热部署和日志切割[三]

    前言 简单演示热部署和日志切割. 正文 什么是热部署了,我们前文也说过了一个编译后的nginx 二进制. 热部署就是无需停止现有的nginx,替换正在运行的nginx. 步骤: 复制nginx 二进制 ...

  7. burp suite历程-安装burp suite

    安装时,捯饬了快一上午,不是jdk高了就是装上后不好使了,后来看了下以下文章,安装成功,特此记录以备不时之需: 内容拷贝至链接:https://juejin.cn/post/6844904111867 ...

  8. axios请求时获取不到错误提示问题。

    前端方面使用axios请求,由于新增时,有的条件格式填写错误.后端返回412状态码. ,axios可能封装不完善,他获取数据使状态码为4开头的统统不暴露出去,导致请求时,412这样的状态码,获取不到里 ...

  9. Mac搭建appium环境及python运行代码示例

    Appium主要是通过调用安卓提供的接口来执行命令的,所以需要安装Java和安卓SDK. 1.安装Appium服务端 appium的服务端是基于node的,直接使用npm(node包管理器)安装即可, ...

  10. 力扣219(java&python)-存在重复元素 II（简单）

    题目: 给你一个整数数组 nums 和一个整数 k ,判断数组中是否存在两个 不同的索引 i 和 j ,满足 nums[i] == nums[j] 且 abs(i - j) <= k .如果存在 ...