<!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. 前端使用 Konva 实现可视化设计器（1）

    使用 konva 实现一个设计器交互,首先考虑实现设计器的画布. 一个基本的画布: [展示]网格.比例尺 [交互]拖拽.缩放 "拖拽"是无尽的,"缩放"是基于鼠 ...

  2. #Multi-SG#Poj 3537 Crosses and Crosses

    题目 有\(n\)个格子,可以在上面涂黑,连续三个黑色获胜,问先手是否必胜 分析 如果先手选择第\(i\)个格子涂黑,那么后手对于\(i-1,i+1,i-2,i+2\)一旦涂黑必败, 所以如果第\(i ...

  3. 【直播回顾】OpenHarmony知识赋能五期第三课——多媒体整体介绍

    5月5日晚上19点,知识赋能第五期第三节课<OpenHarmony标准系统多媒体子系统整体介绍>,在OpenHarmony开发者成长计划社群内成功举行. 本期课程,由深开鸿资深技术专家郭岳 ...

  4. 动态库 DLL 封装一：dll分类

    动态库分为三种: Non-MFC-DLL(非MFC动态库): 非MFC动态库不采用MFC类库结构,其带出函数为标准C接口,能被非MFC或MFC编写的应用程序所调用   MFC Regular DLL( ...

  5. 如何用 Prometheus Operator 监控 K8s 集群外服务?

    前言 前面系列文章中: Prometheus Operator 与 kube-prometheus 之一 - 简介 - 东风微鸣技术博客 (ewhisper.cn) 监控 Kubernetes 集群证 ...

  6. Asp .Net Core 系列：集成 Refit 和 RestEase 声明式 HTTP 客户端库

    背景 .NET 中 有没有类似 Java 中 Feign 这样的框架?经过查找和实验,发现 在 .NET 平台上,虽然没有直接的 Feign 框架的端口,但是有一些类似的框架和库,它们提供了类似的功能 ...

  7. DevEco Studio 3.1差异化构建打包，提升多版本应用开发效率

     原文:https://mp.weixin.qq.com/s/8XtgZ-k0mGXCjKHfSXFoOg,点击链接查看更多技术内容.     HUAWEI DevEco Studio是开发Harmo ...

  8. 前端vue+elementUI如何实现记住密码功能

    我们这回使用纯前端保存密码 既然是记住密码,前端也就是使用cookie保存,访问时用cookie读取 先来了解下cookie的基本使用吧 Cookie 所有的cookie信息都在document.co ...

  9. CentOS添加一个新的硬盘分区到挂载的过程

    1.分区 分区工具fdisk用法介绍    fdisk命令参数介绍    p.打印分区表.    n.新建一个新分区.    d.删除一个分区.    q.退出不保存.    w.把分区写进分区表,保 ...

  10. leetcode：1337. 方阵中战斗力最弱的 K 行

    1337. 方阵中战斗力最弱的 K 行 给你一个大小为 m * n 的方阵 mat,方阵由若干军人和平民组成,分别用 0 和 1 表示. 请你返回方阵中战斗力最弱的 k 行的索引,按从最弱到最强排序. ...