leaflet
关注
分享
扫一扫
炉火纯青-旺
这个作者很懒，什么都没留下…
展开
-
leaflet marker 动态移动
【代码】leaflet marker 动态移动。原创 2023-02-20 17:17:38 · 1069 阅读 · 2 评论 -
leaflet 叠加天地图经纬度瓦片绘制网格
1、index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-03-03 16:29:30 · 1290 阅读 · 0 评论 -
leaflet 笔记
1、阻止事件冒泡L.DomEvent.disableClickPropagation(document.querySelector('.layer_panel'))原创 2021-07-16 14:09:37 · 854 阅读 · 0 评论 -
react + leaflet 基础底图图层组hooks封装
1、useLayerGroup.jsimport { useEffect } from 'react';const { L } = window;const { TILE_URL, TK } = window.TDT_CONFIG;const useLayerGroup = (layerGroup, mapInfo) => { const { type, projection, name, minZoom, maxZoom } = mapInfo.toJS(); c原创 2021-06-28 09:53:49 · 484 阅读 · 0 评论 -
leaflet 添加arcgis rest 服务
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://cdn.bootcdn.net.原创 2020-11-04 12:33:09 · 1681 阅读 · 0 评论 -
leaflet 添加 wms
<!DOCTYPE html><html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/style.css".原创 2020-08-10 17:31:53 · 2055 阅读 · 7 评论 -
leaflet 添加geoserver + postgis database 发布的矢量瓦片
实现步骤：1：安装postgresql2：安装postgis3：postgresql创建数据库及空间数据导入3：geoserver发布矢量瓦片4：leaflet以天地图瓦片为底图添加矢量瓦片 安装postgresql 网盘地址：https://pan.baidu.com/s/1IIfUNi90upRRp5bPPbB6cQ 提取码：7xa8 安装步骤：参照博客https://blog.youkuaiyun.com/antma/article/details/83579920 安装...原创 2020-06-15 14:35:01 · 1968 阅读 · 1 评论 -
react + leaflet + 天地图瓦片
1：在pulblic文件夹index.html中引入全局leaflet css文件<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css">2：安装leafletcnpm install leaflet --save3：组件Map.js中添加天地图瓦片import React from 'react';import L from "leafle.原创 2020-05-25 10:12:26 · 3115 阅读 · 2 评论 -
leaflet 自定义投影添加天地图经纬度投影地图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-10-18 13:26:13 · 2088 阅读 · 0 评论 -
leaflet-echarts 叠加散点图
<html><head> <meta charset='utf-8'> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3l...原创 2018-11-23 14:44:22 · 2179 阅读 · 3 评论 -
leaflet 叠加天地图、谷歌、高德等瓦片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2019-03-04 21:56:17 · 3420 阅读 · 0 评论 -
leaflet 添加聚合marker点
<!DOCTYPE html><html><head> <!--<meta charset="utf-8" />--> <title>北京市顺义区学校聚合marker点</title> <link href="./css/leaflet.css原创 2019-03-13 10:55:54 · 4450 阅读 · 1 评论 -
leaflet api
L.MapAPI各种类中的核心部分，用来在页面中创建地图并操纵地图。Constructor（构造器）通过div元素和带有地图选项的描述的文字对象来实例化一个地图对象，其中文字对象是可选的。Options（选项）Map State Options（地图状态选项）centre（中心）：初始化地图的地理中心。zoom（缩放）：初始化地图的缩放。layers（图层）：初始化...翻译 2019-04-16 14:11:40 · 850 阅读 · 0 评论 -
leaflet 插件地址大全
1、常用地图切换加载（osm、google、baidu、gaode、tianditu.etc）https://github.com/htoooth/Leaflet.ChineseTmsProviders2、切片地图加载（wmts）（支持矢量切片）https://github.com/mylen/leaflet.TileLayer.WMTS3、wms地图服务加载https://gith...翻译 2019-04-16 14:13:52 · 1301 阅读 · 0 评论 -
leaflet 请求geojson数据绘制面层
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-06-13 14:02:25 · 2693 阅读 · 0 评论 -
leaflet 常用插件
一、常用插件1.地图底图切换https://github.com/htoooth/Leaflet.ChineseTmsProviders2.切片地图加载(wmts,支持矢量切片)https://github.com/mylen/leaflet.TileLayer.WMTS3.wms地图服务加载https://github.com/heigeo/leaflet.wms4....原创 2019-09-02 15:07:50 · 3444 阅读 · 0 评论 -
leaflet 卷帘效果实现
import L from 'leaflet';import 'leaflet/dist/leaflet.css';import "leaflet-side-by-side";import config from "./config"; let userconfig = {};//左侧地图const map = L.map("Map", {attributionControl: ...原创 2019-09-02 15:10:37 · 2019 阅读 · 1 评论 -
leaflet 笔记1 marker点高亮显示
Leaflet 笔记八：marker高亮显示这个plugin主要是为了方便实现marker的高亮显示。安装该库已经发布到npmjs上，所以安装非常简单。npm install leaflet.marker.highlight --save原理突出marker的原理非常简单，在marker附近突出动态显示放大的圆形。只需将一个新的div插入到marker的底下，用css3实现marker的高亮特效...转载 2018-06-15 10:03:05 · 5464 阅读 · 4 评论