随笔分类 - leaflet
摘要：实现效果（这里做了1条主河道和5个支流）： 核心代码使用了Leaflet.hotline插件，github下载地址链接 详情见我之前整理的一篇文章介绍河流热力图 核心代码逻辑： // 处理河流数据以及渲染热线图 let coorObj = this.handleRiverData(this.wate
阅读全文
摘要：实现地图遮罩效果（主要显示目标区域内部，外部用暗色填充）： 地图遮罩实现思路：外部建一个很大的矩形区域和内部行政区边界线组成一个镂空的polygon，然后给这个polyon一个透明度为0.4的黑色即可。 源代码： //边界高亮及遮罩效果，arr是内部行政区边界线的geojson的坐标 drawBou
阅读全文
摘要：在 Leaflet 中，map panes 隐式地将图层组合在一起，而开发者并不知道这一点。这种分组允许 Web 浏览器以比单独处理图层更有效的方式同时处理多个图层。 Map panes 使用 z-index CSS 属性来让某些图层始终显示在其他图层之上。默认的排序是： TileLayer 和 G
阅读全文
摘要：1、Leaflet-polycolor github地址：https://github.com/Oliv/leaflet-polycolor 插件缺陷：需要把每个折点的颜色都指定才行，一般做不到 2、Leaflet.hotline github下载地址：https://github.com/iosp
阅读全文
摘要：1、Leaflet Ant Path（线条流动效果） 在交通项目、管网应用的项目中，常常需要标注出道路的走向、河流的流向或者管线的流向等等，Leaflet Ant Path能够很好的解决这类问题： github下载地址：https://github.com/rubenspgcavalcante/le
阅读全文
摘要：/** * 根据一个经纬度及距离角度，算出另外一个经纬度 * @param {*} lng 经度 113.3960698 * @param {*} lat 纬度 22.941386 * @param {*} brng 方位角 45 正北方：000°或360° 正东方：090° 正南方：180° 正西
阅读全文
摘要：Turf.js官网地址：http://turfjs.org/ Turf.js中的几何数据组织规范以WKT格式为标准。其官网中包含了详细的接口介绍和样例讲解。这里我给出我们需要用的接口： 参考地址： https://www.cnblogs.com/naaoveGIS/p/7346299.htmlhtt
阅读全文
摘要：1、国内几种常用坐标系说明 WG-S84: GPS仪器记录的经纬度信息，Google Earth采用，Google Map中国范围外使用，高德地图中国范围外使用。GCJ-02: 火星坐标系，中国国家测绘局制定的坐标系统，由WGS-84加密后的坐标。Google中国和搜搜地图，arcgis地图，高德地
阅读全文
摘要：参考文章：https://www.jianshu.com/p/c39a2c72dc65?from=singlemessage 1、国内几种常用坐标系说明 （1）名词解释 坐标系统：用于定位的系统，就跟二维笛卡尔坐标系统一样，一个点使用(x,y)，就能确定该点在笛卡尔坐标系统中的唯一位置。这里讲的坐标
阅读全文
摘要：先看效果 js文件：blinkmarker.js L.blinkMarker = function (point, property) { // 使用js标签,便于操作,这个temDivEle的作用是将divEle通过innerHTML的方式获取为字符串 var tempDivEle = docum
阅读全文
摘要：createGeojson:function(arr) { let geoArr=[]; for(let i=0;i<arr.length;i++) { let obj={ "type": "Feature", "properties": {"value": -999}, "geometry": {
阅读全文
摘要：1、GitHub地址：https://github.com/oeo4b/kriging.js 2、核心代码 var variogram = kriging.train(t, x, y, model, sigma2, alpha):使用gaussian、exponential或spherical等模型
阅读全文
摘要：let map = L.map("mapid", { minZoom: 10, maxZoom: 15, center: [37.005646, 114.52044], zoom: 11, zoomDelta: 0.5, fullscreenControl: false, zoomControl:
阅读全文
摘要：在uni-app上自带有map组件，但是那个组件功能太弱，很多高级用法很难实现。用npm添加leaflet呢，又各种报错。 偶然和朋友聊起，可以用html来实现leaflet地图，然后用webview组件来加载这个html。webview其实就是一个浏览器内核。它可以渲染html，而且性能可以完全媲
阅读全文
摘要：GeoJSON是一种基于JSON的地理空间数据交换格式，它定义了几种类型JSON对象以及它们组合在一起的方法，以表示有关地理要素、属性和它们的空间范围的数据。 2015年，互联网工程任务组（IETF）与原始规范作者组建了一个GeoJSON工作组，一起规范GeoJSON标准。在2016年8月，推出了最
阅读全文
摘要：geojson需要先制作shp，然后导入下面网站生成geojson。 https://mapshaper.org/ geojson，最好放后台，前台通过异步请求去加载json，然后显示。 getGeojsonByName({name:geojson_name}).then(data=>{ if (t
阅读全文
摘要：<!DOCTYPE html> <html> <head> <title>Layers Control Tutorial - Leaflet</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-wi
阅读全文
摘要：<!DOCTYPE html> <html> <head> <title>Layers Control Tutorial - Leaflet</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-wi
阅读全文
摘要：可执行示例一个，如下： <!DOCTYPE html> <html> <head> <title>Layers Control Tutorial - Leaflet</title> <meta charset="utf-8" /> <meta name="viewport" content="wid
阅读全文
浙公网安备 33010602011771号