leaflet叠加图片图层

<!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/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/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>

原文地址:https://www.cnblogs.com/tiandi/p/12321334.html

时间: 2024-10-16 16:17:13

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

如何制作手绘地图?如何将图片图层精确地对准在地图上?

最近大家常常在问,如何制作鼓浪屿手绘地图,如何将气象图层叠加在高德地图上啊? 其实地图上的研发量很小,几行代码就可以搞定. 关键是在图片绘制上,有较高的要求. 下面就用简单粗暴的方法来实现,如有不妥之处,请大家轻喷. 确定图片绘制范围 以鼓浪屿地图为例,打开框选取点工具:http://zhaoziang.com/amap/getBounds.htm 获取到左下角和右上角的坐标,这个就是图片的显示范围. 如下图,3是左下角,1是右上角. bounds: new AMap.Bounds( [118.

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

效果如下: KMLayerDelegate.h 1 #import <UIKit/UIKit.h> 2 3 @interface KMLayerDelegate : NSObject 4 5 @end KMLayerDelegate.m 1 #import "KMLayerDelegate.h" 2 3 @implementation KMLayerDelegate 4 5 /** 6 * 根据角度,获取对应的弧度 7 * 8 * @param degree 角度 9 *

ggplot2叠加不同图层

数据sample flanking mean sd CNV0 365 15 955100 367 15 1018200 369 15.1 1025300 370 15.1 1027400 372 15.2 1031500 373 15.3 1032600 375 15.3 1033700 377 15.3 1034800 378 15.4 1034900 380 15.4 1037 a=read.table("SDandCNV.txt",header=T) lilbrary("

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

随着终端设备计算能力的加强,用户在使用地图的时候也需要越来越多的交互效果.比如现在很火的室内导航,为了获得好的用户体验,就需要当用户单击某一商店的时候该商店的颜色能相应的变化,这就需要叠加矢量图层.如何能在瓦片地图之上叠加矢量图层呢,这个就需要用到WFS查询. 我的思路是:基于WFS查询把得到需要矢量显示的图层中数据,然后再显示.具体思路为: 1.通过geoserver的WFS服务查询所需要矢量显示的数据信息 2.设置矢量数据的显示样式 3.openlayers添加矢量图层 4.设置鼠标移上去的

【转】六、android图片特效处理之图片叠加

这篇将讲到图片特效处理的图片叠加效果.跟前面一样是对像素点进行处理,可参照前面的android图像处理系列之七--图片涂鸦,水印-图片叠加和android图像处理系列之六--给图片添加边框(下)-图片叠加两篇文章,此篇所讲的与之前有一点区别.叠加原理是两张图片的像素点按透明度叠加,不会进行颜色过滤.叠加图片可以是JPG格式,跟前在一样,最好是放大assets目录.下面看效果图: += 代码: /** * 图片效果叠加 * @param bmp 限制了尺寸大小的Bitmap * @return *

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

这篇将讲到图片特效处理的图片叠加效果.跟前面一样是对像素点进行处理,可参照前面的android图像处理系列之七--图片涂鸦,水印-图片叠加和android图像处理系列之六--给图片添加边框(下)-图片叠加两篇文章,此篇所讲的与之前有一点区别.叠加原理是两张图片的像素点按透明度叠加,不会进行颜色过滤.叠加图片可以是JPG格式,跟前在一样,最好是放大assets目录.下面看效果图: += 代码: [java] view plain copy /** * 图片效果叠加 * @param bmp 限制了

esri-leaflet入门教程(4)-加载各类图层

by 李远祥 在leaflet中图层一般分为底图(Basemap)和叠加图层(Overlay).前面章节已经介绍过底图其实也是实现了TileLayer 接口,而其他的叠加图层要么就是叠加的业务图层,要么就是动态显示的图形和符号.这一点在esri leaflet中也是有对照的. ArcGIS产品中比较让人熟知的图层包括ArcGISDynamicMapServiceLayer.ArcGISImageServiceLayer.ArcGISTiledMapServiceLayer.FeatureLaye

【高德地图API】从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具),最重要最不可缺少的就是覆盖物了.覆盖物有多种,包括,标注.折线.多边形.信息窗口.聚合marker.麻点图和图片覆盖物.本文会详细介绍每一种覆盖物的概念,添加方法,修改方法,移除方法等.最后会提供示例和源代码下载. 示例demo:http://zhaoziang.com/amap/zero_3_1.html ----------------------------

OpenLayers 之 图层(Layers) 详解

声明:文章为本人原创,转载或使用请注明作者和出处!!谢谢! 如果不是专业的地图工作者,看到地图,可能觉得地图就是一张将三维世界映射到二维空间,很多信息混杂在一起表示空间信息的动态可交互图片,其实这只是表面现象.实际上地图是由一个或多个图层组成的,使用不同的图层存储不同类型的地物,比如由存储道路的图层,有展示拥堵情况的图层,通常还有一个含有基础地理信息(比如政区划分)的底图图层. 在 OpenLayers 中,图层是使用 layer 对象表示的,主要有 热度图层(heatmaplayer).图片图