vue+leaflet自定义popup样式
leaflet原生弹出的popup样式不符合要求时，可以配置class属性。自定义class样式，实现自定义popup样式。
Category: leaflet
leaflet
leaflet添加Marker和文字标注
把点以marker的形式添加到地图上，并把文字标注到marker中间
击marker可以查看点的详情或者跳转到详情页面
vue+leaflet实现热力图
let heatData= { data: [], max: 0 };//max 热力点最大值
//数据解析示例
data.forEach(i => {
heatData.data.push({ lat: i.lat, lng: i.lng, count: i.count })
if (i.count > heatData.max) {
heatData.max = i.count
}
})
heatmapLayer.setData(heatData);//设置数据
heatmapLayer.addTo(map);//添加到地图上
vue leaflet实现动态风场
气象数据动态展示，包括压力场、风场等
leaflet同时打开多个popup
leaflet同时打开多个popup
leaflet加载ArcGISServer dynamicMapLayer地图服务，并实现子图层控制
leaflet加载ArcGISServer dynamicMapLayer地图服务，并实现子图层控制
新的征程：leaflet官网部分sample修改和实现—–个人笔记
之所以写leaflet样例代码的博客，主要是因为想记录自己学习过程，提供一个笔记方便回头来看。n为什么要学leaflet？前面学了很久的 ArcGIS API for JS 虽功能齐全样式炫酷，但对于我这样的前端初学者来说十分不友好，并且他对geojson格式的处理也十分僵硬，sample没法改没法学。（不多bb，还是我菜）偶然间发现leaflet对geojson格式的处理很全，有官方sample…
给定坐标点，判断是否在某区域范围内 地理围栏算法
地图平台：leafletrn语言：jsrnrnrnindex.htmlrnnnn n Leaflet 快速开始指南示例n nn n nn n nn n n n n var map = L.map(‘map’).setView([24, 110], 5);n L.tileLayer(‘https://api.tiles.mapbox.com/v4/id/z/x/
地图处理方法-判断一个点是否在某个区域内
判断一个点是否在某个区域内(多边形)nn nn背景：nn 比如滴滴会根据乘客所在的不同区域，给出不同的价格。市区堵一点，那么价格也高点。获取服务范围只规定在某个范围内nn原理：nn 求解从该点向右发出的水平线射线与多边形各边的交点，当交点数为奇数，则在内部。nn 不过要注意几种特殊情况：1、点在边或者顶点上;2、点在边的延长线上;3、点出发的水平射线与多边形相交在顶点上nnnn源…
utility
;nnUTILn种效用函数，内部由Leaflet使用。nTransformationn仿射变换nvar transformation = L.transformation(2, 5, -1, 1…
首页地图渲染之国际化(三)—趋势图联动显示
实现效果1.三个趋势图一起联动显示var myChart = echarts.init(document.getElementById(‘main’), ‘infographic’); n myChart.setOption(option = n tooltip:n trigger: ‘axis
安装Python basemap包
1.pip install geosrn2.在https://www.lfd.uci.edu/~gohlke/pythonlibs/，中下载pyproj 和basemaprn如我的Python版本为3.5，则下载pyproj-1.9.5.1-cp35-cp35m-win_amd64.whl，basemap-1.1.0-cp35-cp35m-win_amd64.whlrn放在对应目录，如我的在D:\
基于 Cesium 的Web三维地球客户端程序开发框架
MarsGIS for Cesium三维地球框架 是火星科技研发的一个Web三维地图开发平台系统，是火星科技团队成员多年GIS开发和Cesium使用的技术沉淀。基于Cesium和现代Web技术栈全新构建， 集成了领先的开源地图库、可视化库，提供了全新的大数据可视化、实时流数据可视化功能，通过本产品可快速实现浏览器和移动端上美观、流畅的地图呈现与空间分析。 框架主要目的是升级Cesium的基础功能和…
画线 动画效果
js 画线 动画效果
supermap leaflet （二） 运动点及轨迹
本篇文章用setInterval方法实现运动点及轨迹。nn获取点位坐标组。nn var cord = [];n for(var i = 0; i < 200; i++)n cord[i] = [Math.random() * 10, Math.random() * 100 - 20];n nnn动态显示坐标点nnn //用setInterval动态显示n ...
Echart使用属性
1、修改每个柱状图颜色nn nnn series: [nn nn name: ‘2011年’,nn type: ‘bar’,nn data: [18203, 23489, 29034, 104970, 131744, 630230],nn item…
经纬度与网络墨卡托(Web Mercator)投影坐标的转换
本文用JavaScript实现了经纬度与Web Mercator投影坐标之间的转换…
利用Layer优化Group显示
每天逛逛TWaver论坛已经成为一种习惯，今天看到一个非常有意思的帖子：http://twaver.servasoft.com/forum/viewtopic.php?f=14&t=3129 rn当两个Group重叠时，Group中的Node会始终显示在两个Group之上，呈现结果如下图(引用了帖子中的图片)：rn rnrn这简直是无法忍受的，如果把这样的呈现效果拿给客户看，不被骂死才怪。我们要
leaflet地图介绍
n n n 本文将介绍有关于leaflet地图组件在web中的应用n什么是leaflet？nleaflet是一个轻量级的开源js地图组件，适用于移动设备，用法简单性能优越，如果你曾经使用过高德或者百度的地图api的话，相信你可以很轻易的上手更加简单的leafletnleaflet是怎么运作的？nleaflet的工作方法和高德百度之类的并不一样，由于leaflet是个开…
利用ztree开发带有滑动条的地图图层列表
之前在写安卓移动端时候，有这样的一个对地图多个图层管理界面，即在单独写了一个图层面板，里面列举app的所有图层，如果懂得Android开发方面的小伙伴，就是一个ListView里面添加了SeekBar拖动按钮，通过拖动按钮图层的透明度不断变化可以直观的在地图上展示不同图层渲染情况。这样的需求，在做三维地理信息系统中，也有用到的地方，但苦于我们在使用的第三方三维平台中没有提供有图层透明度接口，因此无…
vue整合ECharts
1.使用npm添加package.json文件中的配置并下载相关npm包依赖rnnpm install echarts –save rnrn2.然后在项目文件的入口js文件main.js中添加rnimport echarts from “echarts”rnrn3在需要添加图标的组件中创建依赖的实例rnvar echarts = require(‘echarts’);rnrnrnmain.jsrnrn // The …
mpvue地图连线代码备忘
nndata()n return n polyline: [n
[APIO2018] Circle selection 选圆圈(假题解)
题面nn自己去LOJLOJLOJ上找nnSolnn直接排序然后KDTreeKDTreeKDTree查询 n然后发现TLETLETLE了nn然后把点旋转一下，就过了。。nn# include n# define IL inlinen# define RG registern# define Fill(a, b) memset(a, b, sizeof(a))…
MBTiles
MBTiles 是一种地图瓦片存储的数据规范，它使用SQLite数据库，可大大提高海量地图瓦片的读取速度，比通过瓦片文件方式的读取要快很多，适用于Android、IPhone等智能手机的离线地图存储。rn官方地址：http://mbtiles.org —— 规范说明rnThe MBTiles format makes it easy to manage and share thousands or
SimilarTech网站
SimiarTech网站上比较mapping widget偶然的机会下进入了这个网站，上面提供了各种mapping widget的比较。 nhttps://www.similartech.com/categories/mappingn百度地图虽然在国内非常流行，但在全球范围内完全就是GoogleMap一家独大n高德和腾讯地图的数据缺失n百度地图的主要使用地区在中国、美国、港台、日本、俄罗斯n百度在全
Leaflet地图框架使用手册
n n n 因为要做一个交通仿真项目，需要用到这个地图库，但是查询官方API麻烦，而且这个地图框架的API做的用起来确实太麻烦了。。就从网上各种地方查找了一些，方便用， 大多都是复制，，见谅！！nL.MapnAPI各种类中的核心部分，用来在页面中创建地图并操纵地图。nConstructor（构造器）n通过div元素和带有地图选项的描述的文字对象来实例化一个地图对象，其…
实现当前的位置是否在指定的范围内
百度判断坐标点是否在指定的范围内rn1.获取后台的数据,声明一个变量coordinate来保存。rn2.将获取的数据coordinate用JSON.pase()这个方法转换成JSON对象，声明一个变量用coordinatePoint来保存rn3.当打来clock这个页面的时候，将coordinatePoint这个对象传到clock这个页面去rnrnrnrnrnrn在clocj.js页面接收点击拍照
python根据输入的数据在地图上生成热力图效果
nn#-*-coding:utf8-*-nn#输入data生成热力图html，借助了leaflet，没网不能用nnimport osnnimport foliumnndata=[[ 39.90403 , 116.407526 , 23014.59 ] , [ 39.084158 , 117.200983 , 16538.19 ] , [ 38.042309
图层叠加之美（二）
地图叠加之美（二） n 为了增强地图的展示能力，通过叠加数据可以实现。例如简单的叠加，可以将一份几乎废弃掉的数据起死回生。详见上一章节 《地图叠加之美（一）》 ，在这里不再重复。 n 实际上，很多时候我们需要对一份数据进行适当的处理后，再将结果与原数据进行叠加，这样才能更好的增强其显示效果。例如等高线的显示，一般情况下等值线是只有专业人员才能看得懂（当然了，不排除一些长期从事图形制作
JS 事件绑定、事件监听、事件委托详细介绍
在JavaScript的学习中，我们经常会遇到JavaScript的事件机制，例如，事件绑定、事件监听、事件委托（事件代理）等。这些名词是什么意思呢，有什么作用呢？nn事件绑定nn要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。nn在JavaScript中，有三种常用的绑定事件的方法：n…
地图API自定义点聚合
地图API自定义点聚合详见http://www.hjlib.org/cd/tiles/zoom/index.html
Leaflet API 翻译(一)
L.MaprnrnAPI各种类中的核心部分，用来在页面中创建地图并操纵地图。rnrnrnConstructor（构造器）rnrn通过div元素和带有地图选项的描述的文字对象来实例化一个地图对象，其中文字对象是可选的。rnrnOptions（选项）rnrnMap State Options（地图状态选项）rnrnrncentre（中心）：初始化地图的地理中心。rnrnzoom（缩放）：初始化地图的缩
R语言在线地图神器：Leaflet for R包（五） GeoJson文件的使用
七、使用GeoJson和TopoJson绘制地图： GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法的地理空间信息数据交换格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。——百度百科 因为json天然的ht…
[leaflet] 0 相关网站|相关插件|相关DEMO
插件rnrnrnrnrn名称rn说明rn网站rnrnrnrnrn路径动画插件rn&amp;nbsp;rnhttps://github.com/rubenspgcavalcante/leaflet-ant-pathrnrnrnrn
Bug笔记：Google Map第一次缩放位置偏移
这是个让人蛋疼的bug，认真查看Google maps API文档的童鞋们一定不会碰到。rnrn我的同事为项目写了个针对map这块的jQuery plugin，然后在项目测试中发现，刚加载完页面时，直接点击map上toolbar的zoom in/out按钮或者用鼠标滚轮对地图进行放大缩小时，位置不知道偏到哪个黑暗的小角落去了。我看了丫代码半天，没发现啥问题，感觉问题是出在center的值不对，可是
Leaflet 笔记一：简单入门
n n n Leaflet 笔记一：简单入门nnLeaflet可以说在我的博客当中应该出现了很多次，它首先是空间数据可视化的“佼佼者”，也是Mapbox.js的“父亲”。不同的是，Mapbox是个发展快速的商业公司，有些服务是需要看访问量收费的，而Leaflet是免费开源的组织，开放，开源，生态好，插件多。
js插件 leaflet插件库
id=25nnnn推荐一个很强大的js插件库leaflet；里面包含了很多地图类插件；热图，轨迹，画图等等nn nnnnnvar mymap = L.map(‘holder’, n crs: L.CRS.Simple,n n zoomSnap:0.5,n dragging:
R语言在线地图神器：Leaflet for R包（三） 符号标记
标记的方法名和语法如下：addMarkers(leaflet地图,数据)表示把这个数据加载到地图里面，示例如下：df = data.frame( latitude = runif(20,min=0,max=70), …
d3.js leaflet.js OpenStreetMap的综合应用
一个可视化的工作案例n效果图nnn代码的边捆绑算法借鉴了D3.JS官方案例的js库。 链接如下：点击打开链接n案例分析n本案例展示的上海市某一天12点出租车数据流量图，先将上海市进行区域划分，之后将出租车数据映射到相应的区域，并映射到osm地图上。最后用当D3标注出区域以及流量图。n一. 准备数据n对上海市出租车数据进行处理，处理后部分文件显示如下。data.json文件
JavaScript模块化编程实例——天气预报
良好的习惯是成功的一半。今天总结一个JavaScript模块化编程实例学习交流，这个例子是之前没有按照模块化概念来写的，今天把它按照AMD规范重新封装了一个js文件，主要实现天气预报数据的解析与地图绘制。天气API采用百度API集市提供的天气预报API。n1、weatherUtil.jsweatherUtil.js是解析天气预报数据模块，完成数据解析和图层绘制两个工作，代码如下,熟悉requirej
leaflet 自定义图标
// 添加当前位置 标注n var icon = new L.Icon(n iconUrl: ‘leaflet/images/marker-icon.png’,n shadowUrl: ‘leaflet/images/marker-shadow.png’,n iconSize: [25, 41],n iconAnchor: [12, 41],n popupAnch
点击列表的时候,点击的那个样式高亮其他的不亮
css添加一个变色的类rn.highlightn background-color: yellow;nnrnrnjsrnrnrnrnrn$(function()n $(‘.dht div’).click(function()n $(this).addClass(‘highlight’).siblings().removeClass(‘highlight’);n
乱谈Leaflet的插件在WebGIS中作用
n n n 乱谈Leaflet的插件在WebGIS中作用nn姐妹篇 从Mapbox的插件看Web GIS的发展nn前言nLeaflet和Openlayer都是两个主要的开源前端库。开放的程度都很高，但是考虑到移动端和小巧轻便易扩展，我大部分情况还是选择leaflet。兼容移动端似乎是必不可少的事情，放大缩小平移，都是一些必备的功能。
[GIS算法] 2.4.1 判断两线段是否相交 – C语言实现
判断两线段是否相交rnrnrn线段P1P2rn线段Q1Q2rnrnrnrnrn算法一rnrnrnrnrnrn快速排斥试验rnrnrn以线段P1P2为对角线的矩形Rrn以线段Q1Q2为对角线的矩形Trnrnrn【思路】如果R和T不相交 => 两线段也不相交。但是否相交，还需要第二步的判断：跨立试验rnrnrnrn跨立试验rnrn【思路】如果两线段相交，则两线段必然相互跨立对方 rn【判断依据】rnrnrnP1P2跨立Q1Q2： (P1-Q1)×(Q2-Q1…
Influxdb+collectd+grafana搭建现代化监控系统
在此采用centos＋Influxdb＋collectd＋grafana搭建监控系统，特此说明下influxdb的0.9,0.10,0.11,0.12均不支持delect功能，0.8和0.13支持delect功能，故个人建议第一次装的话还是采用0.13吧。 n第一步安装centos7 ，在此不描述。 n第二步安装influxdb：＃ cat <
地图滑动返回地图中心点
map.addEventListener(“dragend”, function showInfo() var pointss = map.getCenter(); alert(pointss.lng + “,” + pointss.lat););
实现地图天气预报的显示
很多时候，会用到地图与天气预报的相结合显示，本文结合web天气插件，实现地图天气预报的结合现实。
arcgis 切片发服务心得
转载自：https://blog.csdn.net/humianlueying/article/details/79862374
涉及IE浏览器的兼容性问题以及解决方案
1.双边距BUG float引起的 使用displayn2.3像素问题 使用float引起的 使用dislpay:inline -3pxn3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover activen4.Ie z-index问题 给父级添加position:relativen5.Png 透明 使用js代码 改n6.Min-height 最小高度 ！Imp…
判断点是否在多边形内(包括在多边形上)
判断点是否在多边形内(包括在多边形上) rn/** 检查某点是否包含在多边形的范围内(只用与判断在多边形内部，不包含点在多边形边上的情况)~ */rnrnrn- (BOOL) checkPointWithinPolygon:(PolyVerticesWrapper*)pvw point:(b2Vec2)point rnrnrn int verticesCount = [pvw verti
地图js技术调研
地图数据格式规范：geojson http://geojson.org/rn类型包括Point, LineString, Polygon, MultiPoint, MultiLineString,rn andMultiPolygon等rnrnrngeojsonrnrnrnrnrnrnrnrnrn1rnrn2rnrn3rnrn4rnrn5rnrn6rnrn7rnrn8rnrn9rnrn10rnrnr
ArcGlobe三维开发之十八——纵断面图的绘制
我是采用Dev控件中的绘图控件来绘制的纵断面图，下面主要来介绍下输电线路选址以及纵断面图的实时绘制的实现流程。nn一、关于输电线路的选址，首先要准备好基础地理数据，包括选线区的DOM，DEM，DLG以及属性数据等；其次选址采用二三维交互的方式，即以DLG和DOM为背景，初步选择线路路径，，而后在三维场景下将线路反映出来；再次，通过提取线路路径沿线的高程值，绘制纵断面图，并结合三维地貌对塔位进行
[WebGIS] Demo3-使用高德地图Web服务|路线规划
高德地图路径规划服务rn提供两个点之间的路线：步行、公交、驾车使用rnjQueryrnArcGIS API for javascript
OpenLayer修改WFS中的要素
n就像arcgis api一样既然我们加载要素图层服务，我们应该既然加载要素，有时候我们需要修改他，增加一些矢量数据或者修改矢量数据，在这里我写的如何去修改数据。代码参考扯淡大叔的修改WFS的代码，但是中间出现了了一些问题，在这里指出。nnn出现的问题如下图：n nnnn解决方案：nn1、nnnn nn nn nn nn nn nn2、nn添加新规则nnnn3、nn选择工作空间—->选择…
[WebGIS] Demo2-使用高德地图Web服务|POI搜索
高德地图Web服务提供多种查询POI信息的能力，使用jQuery框架使用此HTTP服务，显示搜索提示，点击搜索后使用ArcGIS api for javascript加载在地图上
地图选择及地图偏移解决方案（一）
现在智能机跟移动互联网的飞速发展，给移动开发者带来了前所未有的机遇，大量的移动APP问世，这其中与手机相关性最大的莫过于LBS相关APP了，移动终端与PC最大的区别无非在于：便携移动性所带来的随时随地访问，还有一点就是GPS定位，传统的PC只能通过IP来源大致取得用户城市等相关信息，但是移动终端上这得到了解决。rn rn 在开发LBS相关APP的过程中，总会遇到这么一个头疼的问题：如何选…
leaflet加载离线OSM(OpenStreetMap)
首先在这个网站下载leaflet的压缩包，其中包括了其API以及一些范例。https://github.com/Leaflet/Leaflet下载完之后，自己搭建一个服务…
技术服务线上沙龙——MVT矢量瓦片全流程解析线上问题整理
12月5日，超图集团质控与支持中心组织了岁末冲刺技术服务福利第二弹——MVT矢量瓦片全流程解析，在讲解过程中就不断有朋友们在留言区提问，后面有朋友们提出将问题整理为文档，方便大家后续查看。于是，技术支持的同事们打铁趁热，将线上关注度较高的问题整理出来，同时社区上也不少朋友提问，感兴趣的可以移步http://ask.supermap.comn矢量瓦片制作nQ:制作MVT矢量瓦片之前数据制作应该注意什…
EPSG:4326
This example shows how to create a map in EPSG:4326.rn这个例子用来展示如何使用EPSG:4326的投影来创建地图。rnrn代码：rnnn n EPSG:4326n n n n n n n n n var layers = [n new ol.layer.Tile(n
