<!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. 测试开发之前端篇-CSS层叠式样式表

    CSS是层叠样式表(Cascading Style Sheets)的缩写,用于描述如何在屏幕.纸张或其他媒体上显示HTML元素,包括了定义网页及其元素的布局.风格.大小.位置和颜色等属性. CSS的语 ...

  2. IT的贵与慢

    本文于2019年7月24日完成,发布在个人博客网站上. 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来. 笔记而已,没有逻辑. 贵与慢,一方面是事实,另一方面是偏见. 流 ...

  3. 并发编程面试必备之ConcurrentHashMap源码解析

    ConcurrentHashMap在我的面试生涯中,10次有8次是会被问到的,记得刚毕业那会,被问到ConcurrentHashMap源码的无助与苦涩,无奈只能网上找了一些教程,背一背,才算是蒙混过关 ...

  4. Djangorestframework 记录一个报错 -- rest_framework.authentication.ToKenAuthentication

    今天在使用 Djangorestframework 这个框架时,发生报错: ImportError: Could not import 'rest_framework.authentication.T ...

  5. MogDB/openGauss数据库package关键字的两种用法

    MogDB/openGauss 数据库 package 关键字的两种用法 本文出处:https://www.modb.pro/db/237701 package 关键字在 MogDB 数据库里有两种用 ...

  6. HarmonyOS数据管理与应用数据持久化（二）

    通过键值型数据库实现数据持久化 场景介绍 键值型数据库存储键值对形式的数据,当需要存储的数据没有复杂的关系模型,比如存储商品名称及对应价格.员工工号及今日是否已出勤等,由于数据复杂度低,更容易兼容不同 ...

  7. 电脑开机时报错No Bootable Device找不到索引的解决方法

      本文介绍笔记本电脑出现No Bootable Device错误提示,且无法开机的多种解决办法. 1 问题产生   最近,笔记本电脑正在正常使用时,突然蓝屏,出现你的设备遇到问题,需要重启.的提示: ...

  8. 鸿蒙HarmonyOS实战-ArkUI组件（页面路由）

    一.路由导航 路由导航是指在应用程序中通过路径导航定位到特定页面的过程.路由导航的实现通常采用路由器(router)来进行管理,路由器根据路径的不同值将用户请求导向到不同的页面. 在HarmonyOS ...

  9. 如何使用Plotly和Dash进行数据可视化

    本文分享自华为云社区<从数据到部署使用Plotly和Dash实现数据可视化与生产环境部署>,作者: 柠檬味拥抱. 数据可视化是数据分析中至关重要的一环,它能够帮助我们更直观地理解数据并发现 ...

  10. 快速上手Linux核心命令

    Linux 的重要性不用我多说了吧,大多数互联网公司,服务器都是采用的Linux操作系统 Linux是一个主要通过命令行来进行管理的操作系统. 只有熟练掌握Linux核心命令,在使用起来我们才会得心应 ...