leaflet

Web GIS系列： 1. 搭建简易Web GIS网站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers3 2. 使用GeoServer+QGIS发布WMTS服务 3. 使用GeoServer+OpenLayers发布和调用WMTS、Vector Tile矢量切片服务 4. Leaflet入门：添加点线面并导入GeoJSON数据 OpenLayers与Leaflet都是开源WebGIS组件中的佼佼者。之前的WebGIS系列博客中，重点以OpenLayers为JavaScript库，获得了广大GISer的关注。本文将对Leaflet进行详细介绍。所有代码都会整理并上传到GitHub上，欢迎Star和Fork! 本篇文章主要参考了Leaflet官方的入门介绍。 Quick Start Using GeoJSON 第一幅地图 首先是初始化地图并加载底图，其中setView可以设定视图的中心点和缩放层级。对于底图，可以调用OSM的切片地图，也可以调用Mapbox的切片地图。对于Mapbox的地图，需要申请API key之后才能调用。不同风格的地图可以参考： https://studio.mapbox.com/tilesets/ 初始化地图代码如下： // Init the map var mymap = L.map('mapid').setView([51

前言 leaflet 入门开发系列环境知识点了解： leaflet api文档介绍 ，详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件 ，leaflet 的插件库，非常有用 内容概览 leaflet 结合 Echarts4 实现迁徙图 源代码 demo 下载 本篇 demo 利用 leaflet api 结合 Echarts4 实现迁徙图功能，效果图如下： 实现思路：在 leaflet 结合 Echarts4 实现散点图(附源码下载) 基础上实现的 地图初始化 var map = L.map('map' ); L.tileLayer( 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}' ).addTo(map); map.setView(L.latLng( 37.550339, 104.114129), 4); // 设置缩放级别及中心点 Echarts 相关 options 配置 var geoCoordMap = { "海门":[121.15,31.89 ], "鄂尔多斯":[109.781327,39.608266 ], …… }; var BJData = [ [{name:

前言 leaflet-webpack 入门开发系列环境知识点了解： node 安装包下载 webpack 打包管理工具需要依赖 node 环境，所以 node 安装包必须安装，上面链接是官网下载地址 webpack 配置介绍文档 详细的 webpack 文档配置介绍，适合新手查看，我也是边看边学 vscode 安装包下载 ，我这边用 vscode工具编译开发前端项目，个人觉的这款工具还不错 leaflet api文档介绍 ，详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件 ，leaflet 的插件库，非常有用 内容概览 leaflet 叠加图层控制 源代码 demo 下载 本篇 demo 实现是在 leaflet-webpack 入门开发系列二加载不同在线地图切换显示（附源码下载） 基础上优化而实现的，核心就是 leaflet 的 Control.Layers 控件，默认的底图切换以及叠加图层只有选中以及文字，没有图标样式的效果。 效果图如下： 实现思路如下 自定义底图切换，添加图标样式 // 构建图片形式的标题及图例 const getImageTitle = (text, imgUrl, size) => { return `<div style='display:inline-block;width:${size}px

前言 leaflet 入门开发系列环境知识点了解： leaflet api文档介绍 ，详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件 ，leaflet 的插件库，非常有用 内容概览 leaflet 实现地形剖面分析 源代码 demo 下载 本篇 demo 利用 leaflet api 实现地形剖面分析，效果图如下： 完整demo源码见小专栏文章尾部 ： GIS之家leaflet小专栏 文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波 来源： oschina 链接： https://my.oschina.net/u/4346195/blog/3499728

前言 leaflet-webpack 入门开发系列环境知识点了解： node 安装包下载 webpack 打包管理工具需要依赖 node 环境，所以 node 安装包必须安装，上面链接是官网下载地址 webpack 配置介绍文档 详细的 webpack 文档配置介绍，适合新手查看，我也是边看边学 vscode 安装包下载 ，我这边用 vscode工具编译开发前端项目，个人觉的这款工具还不错 leaflet api文档介绍 ，详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件 ，leaflet 的插件库，非常有用 内容概览 leaflet 地图卷帘 源代码 demo 下载 效果图如下： demo 实现的效果比较简单，直接就是用 leaflet 官方的地图卷帘插件 github： leaflet-side-by-side ，这个插件用的时候，左右两侧的底图要是同个的话，只能显示一个，不知道这个算不算一个bug demo 集成插件的步骤如下： npm 命令安装 leaflet-side-by-side 插件库 npm i leaflet-side-by-side --save 引用 leaflet-side-by-side 进来 import "leaflet-side-by-side"; 完整核心代码如下： import L from

前言 关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 4.x for js： esri 官网 api ，里面详细的介绍 arcgis api 4.x 各个类的介绍，还有就是在线例子： esri 官网在线例子 ，这个也是学习 arcgis api 4.x 的好素材。 由于 arcgis api 4.x for js 目前没有提供的同时展示多个气泡窗口展示， Popup 默认只可以弹出一个，某些情况下，用户想加载弹出多个窗口，所以，本篇实现了 arcgis api 4.x for js 自定义多个气泡窗口展示效果。 最终实现效果图： 实现思路：采用 leaflet 气泡窗口样式 css ，自定义 arcgis api 4.x 气泡窗口 div 容器，地图叠加 div 不难，难的是如何随着地图动态改变而刷新自定义窗口的位置，这也是本篇的核心内容，通过监听地图的变化事件，从而动态刷新气泡窗口的位置变化。 leaflet 气泡窗口样式 .leaflet- popup { position: absolute; text - align: center; } .leaflet -popup-close- button { position: absolute; top: 0 ; right: 0 ; padding: 4px 4px 0 0 ;

chianProvider使用不了，是通过LTitleLayer加载进来 <l-map :key="key" :style="{ height: mapHeight + 'px'}" :zoom="zoom" :center="center"> <!-- 加载天地图 --> <l-tile-layer :url="urlMap" :tms="isTms" :subdomains="subdomains" :options="options"></l-tile-layer> <l-tile-layer :url="urlAnnotion" :tms="isTms" :subdomains="subdomains" :options="options"></l-tile-layer> </l-map> 天地图加载的URL通过lTitleLayer加载 来源： oschina 链接： https://my.oschina.net/u/560237/blog/3689348

this.map.invalidateSize 这方法 在vue2-leaflet没有找到。后面通过给L-map加key 窗口变化时，组件重新加载啦。 mounted() { window.onresize = debounce(this.mapResize, 300, true); }, methods: { //窗口变化 mapResize() { this.mapHeight = document.documentElement.clientHeight - 20 - this.$refs.fullmap.getBoundingClientRect().top; this.key = +new Date(); }, } 来源： oschina 链接： https://my.oschina.net/u/560237/blog/3689264