<!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. #二进制拆分，矩阵乘法#洛谷 6569 [NOI Online #3 提高组] 魔法值

    题目 分析 考虑一个点的权值能被统计到答案当且仅当其到1号点的路径条数为奇数条. 那么设 \(dp[i][x][y]\) 表示从 \(x\) 到 \(y\) 走 \(i\) 步路径条数的奇偶性, 这个 ...

  2. RabbitMQ 03 直连模式-可视化界面

    这里先演示最简单的模型:直连模式.其结构图为: 一个生产者 -> 消息队列 -> 一个消费者 生产者只需要将数据丢进消息队列,而消费者只需要将数据从消息队列中取出,这样就实现了生产者和消费 ...

  3. Redis 02 基础命令

    数据库 Redis 默认有 16 个数据库. 默认使用的是第 0 个数据库. 不同数据库存不同的值. 切换数据库 select 127.0.0.1:6379> select 1 OK 127.0 ...

  4. QImage将图片白色背景修改为透明色

    // 改透明色 QImage setImageColor(QImage img) { QImage img_color = img.convertToFormat(QImage::Format_RGB ...

  5. std::thread 二：互斥量（带超时的互斥量 timed_mutex()）

    timed_mutex . try_lock_for . try_lock_until #include <iostream> #include <thread> #inclu ...

  6. Bash与shell的区别

    Bash 与 shell 的区别 介绍 常见的 shell 解释器有 sh.bash 这两种,其他的 ksh.csh 和 zsh 等是不常见的.Mac OS 中默认安装了以上所有类型,Windows ...

  7. 《深入理解Java虚拟机》读书笔记：HotSpot的算法实现

    HotSpot的算法实现 HotSpot的算法实现概要 1.枚举根节点 由于目前的主流Java虚拟机使用的都是准确式GC(这个概念在第1章介绍Exact VM对Classic VM的改进时讲过),所以 ...

  8. HarmonyOS 3.1版本发布，全面进入声明式开发

    原文:https://mp.weixin.qq.com/s/kyyYCjrl6E8MBxKpBSKNWg,点击链接查看更多技术内容.   开发者的脚步永不停歇,2022年我们发布了HarmonyOS ...

  9. PIL.Image, numpy, tensor, cv2 之间的互转，以及在cv2在图片上画各种形状的线

    ''' PIL.Image, numpy, tensor, cv2 之间的互转 ''' import cv2 import torch from PIL import Image import num ...

  10. C#的基于.net framework的Dll模块编程（一） - 编程手把手系列文章

    从此博文开始分几篇介绍C#的开发.这次讲讲C#的.net framework的Dll文件类库模块的编程方法. 对于Windows来说,要运行应用程序要基于Dll类库和Exe执行文件.对于笔者来说,模块 ...