Leaflet
关注
分享
扫一扫
IT1995
每周个人笔记分享，欢迎广大网友查阅！
展开
-
Leaflet工作笔记-GIS地图上构造echarts的3D图
这里要实现的是这样的效果：在地图上有一个柱子，3D的，直接显示，而不是使用什么label或者点击，在界面上显示。原理如下：1.使用leaflet的marker标签，插入一个html；2.在这个html中设置css，将其background-color设置为transparent；并设置ID3.把echarts直接初始化到刚刚那个ID上面源码如下：<!DOCT...原创 2020-02-10 10:30:33 · 8558 阅读 · 1 评论 -
Leaflet工作笔记-多个标签在地图显示不关闭
就是这个例子：网页一进去就是被打开的。并且多个标签同时显示。要实现这种效果，需要如下设置：1.设置bindPopup时把autoClose设置为false，这样点开一个就不会关闭另外一个了。2.在所有脚本设置好了，通过fire函数传入'click'，再指定坐标，可以在页面加载后，就显示了。源码如下：<!DOCTYPE html><html>...原创 2020-02-09 19:57:57 · 6039 阅读 · 0 评论 -
Leaflet文档阅读笔记- Showing video files解析
目录官方解析博主例子官方解析这里，官方首先告诉我们，当<video>这个标签还没出现的时候，在web上展示视频是很艰巨的。现在有了这个标签，只需要如下代码就能在web页面上展示视频：<video width="500" controls> <source src="https://www.mapbox.com/bites/00...原创 2019-09-16 11:00:24 · 4315 阅读 · 1 评论 -
Leaflet笔记-把leaflet-tilelayer-wmts移植到vue cli中（含思路）
目录前言过程前言关于leaflet的webpackage使用npm安装官方是有明显的解析但是关于插件特别是TileLayer.WMTS是不提供的，但提供了源码，可以稍微修改下，就能在vue cli中使用，在此记录下，这个经验很有用，方便自己以后查阅。过程先把leaflet下载下来npm install leaflet把leaflet...原创 2019-09-11 14:12:32 · 6944 阅读 · 0 评论 -
Leaflet文档阅读笔记-Extending Leaflet: Handlers and Controls笔记
目录官方解析博主栗子官方解析Leaflet 1.0中出现了处理者这个新概念，处理浏览器里的dom事件单击，双击，地图滑动及map状态的改变。当处理者启动时调用addHooks()函数，未启动时调用removeHooks()，结构如下：L.CustomHandler = L.Handler.extend({ addHooks: function() { L...原创 2019-09-11 11:15:31 · 4622 阅读 · 0 评论 -
Leaflet笔记-Leaflet与echarts结合使用（在地图上绘图表）
目录基本概念代码与实例基本概念在本地地图上绘制图表，图表经过响应弹出来。想想真是令人兴奋的事情，到时候用Qt的Widget和QGraphicsView结合QWebEngine搞一层。来一个科技感十足的魔幻页面。下面来说明下这个逻辑。使用Leaflet的WMTS接口请求本地Geoserver服务，从而获取数据。然后再把echarts放到Leaflet的响应事件...原创 2019-09-10 15:21:23 · 10895 阅读 · 2 评论 -
Leaflet文档阅读笔记-Zoom levels笔记
目录官方解析博主例子官方解析把地图放缩锁定到0级var map = L.map('map', { minZoom: 0, maxZoom: 0});var cartodbAttribution = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetM...原创 2019-09-10 09:50:37 · 5245 阅读 · 0 评论 -
Leaflet文档阅读笔记-Using GeoJSON with Leaflet笔记
目录官方解析博主例子官方解析个人觉得这官方教程给得是相当的好，因为功能非常的强大，在此记录下，方便以后使用，以后肯定会经常用到！此节将会学到从GeoJson对象中创建且调用map vectors。GeoJson对象如下：var geojsonFeature = { "type": "Feature", "properties": { "nam...原创 2019-09-09 15:20:35 · 4807 阅读 · 0 评论 -
Leaflet文档阅读笔记-Markers With Custom Icons笔记
目录官方解析博主例子官方解析这个内容主要是把自定义图片，放到地图上，并且还可以增加阴影图片，以及点击图片后的弹出事件。官方是准备了下面这4张图片：使用下面这种方式可以单独设置，自定义图标var greenIcon = L.icon({ iconUrl: 'leaf-green.png', shadowUrl: 'leaf-shadow.png',...原创 2019-09-09 11:09:43 · 4591 阅读 · 0 评论 -
Leaflet文档阅读笔记-Leaflet on Mobile笔记
目录CSS和HTML改如何设置定位功能CSS和HTML改如何设置如下的设置：body { padding: 0; margin: 0;}html, body, #map { height: 100%; width: 100vw;}这里还要设置禁止浏览器进行不必要的放缩<meta name="viewport" content="wid...原创 2019-09-07 16:37:30 · 4634 阅读 · 0 评论 -
Leaflef笔记-使用leaflet-tilelayer-wmts插件获取地图及坐标（含错误分析思路）
目录如何调用插件并实现功能对WMTS服务的进一步了解及可能会遇到的问题如何调用插件并实现功能首先说明下本篇博文的环境，本篇博文利用了Geoserver，搭建了一个中国地图的WMTS服务，地图层级为4-9级。详细搭建过程请参考这篇博文：https://blog.youkuaiyun.com/qq78442761/article/details/100581622下面来个...原创 2019-09-07 15:30:19 · 11155 阅读 · 6 评论 -
Leaflet文档阅读笔记-Quick Start Guide笔记
目录网络加载JS和CSS初始化地图在地图上做标记在地图上点击事件获得坐标个人对这篇文档的体会网络加载JS和CSS先要加载css，然后在加载js<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE...原创 2019-09-04 15:09:30 · 4604 阅读 · 0 评论