leaflet 把图片放到地图上L.imageTransform或者L.imageOverlay.rotated,把视频放到地图上L.videooverlay，把geoJson放到地图上,

1.把图片放到地图上：

2. 有两种方法实现，这两种方式都需要下载js文件并引入项目中，

第一种L.imageTransform：https://github.com/ScanEx/Leaflet.imageTransform

var anchors = [[56.344, 136.595], [56.344, 137.878],[55.613, 137.878],[55.613, 136.595]],clipCoords = [[56.301, 136.905],[56.150, 137.839],[55.639, 137.531],[55.788, 136.609],[56.301, 136.905]],transformedImage = L.imageTransform('img/image.jpg', anchors, { clip: clipCoords });transformedImage.addTo(map);

第二种方式L.imageOverlay.rotated：https://github.com/IvanSanchez/Leaflet.ImageOverlay.Rotated

var topleft    = L.latLng(40.52256691873593, -3.7743186950683594),topright   = L.latLng(40.5210255066156, -3.7734764814376835),bottomleft = L.latLng(40.52180437272552, -3.7768453359603886);var overlay = L.imageOverlay.rotated("./palacio.jpg", topleft, topright, bottomleft, {opacity: 0.4,interactive: true,attribution: "&copy; <a href='http://www.ign.es'>Instituto Geográfico Nacional de España</a>"
}).addTo(map);

3. 把视频放到地图上（L.videooverlay）：https://leafletjs.com/examples/video-overlay/

 var videoUrls = ['https://www.mapbox.com/bites/00188/patricia_nasa.webm','https://www.mapbox.com/bites/00188/patricia_nasa.mp4'];var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);var videoOverlay = L.videoOverlay( videoUrls, bounds, {opacity: 0.8}).addTo(map);

4. geoJson放到地图上：

//geojson数据
var data= [{"type": "Feature","properties": {"name": "Coors Field","show_on_map": true},"geometry": {"type": "Point","coordinates": [-104.99404, 39.75621]}
}, {"type": "Feature","properties": {"name": "Busch Field","show_on_map": false},"geometry": {"type": "Point","coordinates": [-104.98404, 39.74621]}
}];//获取边界并放到地图上
var partyDistrictLayer = L.geoJson(data, {     //获取边界并定义style: {weight: 2,opacity: 1,color: 'red',dashArray: '4',fillOpacity: 0.2,fillColor: '#FFEDA0'},onEachFeature: ((feature, layer) => { //对每个小块进行定义layer.on({//mouseover：移入mouseover: ((e) => {var layer = e.target;layer.setStyle({weight: 5,color: '#666',dashArray: '',fillOpacity: 0.5});if (!L.Browser.ie && !L.Browser.opera) {layer.bringToFront();}}),//mouseout：移出mouseout: ((e) => {// that.partyDistrictLayer.resetStyle(e.target);     //恢复样式var layer = e.target;layer.setStyle({weight: 2,opacity: 1,color: 'red',dashArray: '4',fillOpacity: 0.2,fillColor: '#FFEDA0'});}),//click事件click: ((e) => {_map.fitBounds(e.target.getBounds());var code = parseInt(e.target.feature.id);})});})}).addTo(map);
map.fitBounds(partyDistrictLayer.getBounds());

leaflet 把图片放到地图上L.imageTransform或者L.imageOverlay.rotated,把视频放到地图上L.videooverlay，把geoJson放到地图上,相关推荐

抖音怎么上传照片图集？抖音照片视频怎么制作？大神教你轻松搞定！
抖音怎么上传照片图集?抖音照片视频或照片图集怎么制作?现在抖音上很多那种照片或图片做成的短视频,主题好,有音乐,还有文字或好看的切换效果.今天就请大神来教大家简单几步,轻松做一个好看的抖音照片图集!教 ...
leaflet引入图片作为地图
leaflet引入图片作为地图 HTML: <div id="map"></div> JS: data中声明的值: heatmapLayer:null, m ...
现在假定初始在第一站的时候公车上有k个人，以后每经过一站车上的人先下去一半ki/2（ki除2的整数部分），然后再上ki人，现在已知公车的限乘人数L，假定公车如果不能再上人就（即ki-ki/2+ki
随着城市的发展公交车变成了人们日常生活中不可缺少的交通工具,而在高峰期,经常出现公车坐慢的情况.现在假定初始在第一站的时候公车上有k个人,以后每经过一站车上的人先下去一半ki/2(ki除2的整数部分) ...
SSM开发书评网29：后台二：wangEditor图片上传；（主要内容是【wangEditor图片上传的文档要求】，【Spring MVC整合FileUpload组件，以实现文件上传功能】）
说明: (1)本篇博客内容说明:[在后台系统,我们点击新增按钮后,会弹出新增图书对话框]→[该对话框中,包含一个wangEditor富文本编辑器]→[wangEditor富文本编辑器中,可以包含图片] ...
rⅰd的意思_自动挡上的P、R、N、D、S、L是啥意思？一个口诀教会你！
很多人买了自动挡的车以后,往往都很容易看懵,这个自动挡上的P.R.N.D.S.L,到底是什么意思呢?今天车讯哥作为老司机,告诉大家,只要牢记这么一句口诀,轻松就能了解它们的具体意思了! 第一个:P挡, ...
r语言library什么意思_自动挡上的P、R、N、D、S、L是什么意思？新手多学学
"本文章已经通过区块链技术进行版权认证,禁止任何形式的改编转载抄袭,违者追究法律责任" 现在市面上可以见到的自动挡驾驶车辆越来越多了,那么这也是有一定的原因的.毕竟相对于手动挡汽车 ...
ios html5不显示图片,为什么iOS上的Safari不显示我的HTML5视频海报？
我有这个网页: http://healthpad.net/dashboard/ 它具有10< video>元素就可以了. 由于某些原因,当我在iPad上加载页面时,它不显示视频海报. 尝试 ...
Java敌人跟地图的碰撞_（译）加入敌人和战斗：如果使用cocos2d制作基于tiled地图的游戏：第三部分...
免责申明(必读!):本博客提供的所有教程的翻译原稿均来自于互联网,仅供学习交流之用,切勿进行商业传播.同时,转载时不要移除本申明.如产生任何纠纷,均与本博客所有人.发表该翻译稿之人无任何关系.谢谢合作 ...
【百度地图API】发布静态图API啦！只需一个网址，即可展示定制百度地图！
[百度地图API]发布静态图API啦!只需一个网址,即可展示定制百度地图! 原文:[百度地图API]发布静态图API啦!只需一个网址,即可展示定制百度地图! 摘要: 百度地图静态图API!您无须执行任 ...
爬取链家二手挂单房屋 - 匹配百度地图API坐标 - python出地图【2】(end) echarts调用百度地图画自己喜欢的底图，最终python出地图
在上一步得到了所有期待项目的地理坐标之后,可以把数据体现在地图上给领导看了.首先需要一张符合自己审美风格的底图来给领导留下强烈的印象:因为我对百度地图的初始配色非常不满,所以这个对我来说是刚需,恰好又 ...

leaflet 把图片放到地图上L.imageTransform或者L.imageOverlay.rotated,把视频放到地图上L.videooverlay，把geoJson放到地图上,

leaflet 把图片放到地图上L.imageTransform或者L.imageOverlay.rotated,把视频放到地图上L.videooverlay，把geoJson放到地图上,相关推荐

最新文章

热门文章