地图
各种地图中的疑难杂症
whyfail
编程界崇尚以简洁优雅为美,很多时候,如果你觉得一个概念很复杂,那么很可能是你理解错了!
展开
-
mapbox测量工具2.0
基于mapbox原生的测量工具2.0原创 2022-12-28 16:26:05 · 457 阅读 · 0 评论 -
maobox-gl测量工具
为了解决mapbox-gl的测量功能实现原创 2022-11-18 15:45:22 · 718 阅读 · 0 评论 -
Cesium测量距离、测量面积工具
Cesium测量距离、测量面积工具原创 2022-10-29 18:24:28 · 2199 阅读 · 0 评论 -
Cesium离线加载
Cesium token 离线加载原创 2022-10-26 09:34:41 · 279 阅读 · 0 评论 -
Leaflet一些功能插件
一、使用Leaflet加载Arcgis地图服务Esri Leaflet一套使用ArcGIS服务的工具。支持地图服务,特征层,ArcGIS在线瓷砖等。二、分屏展示两个地图用于比较Leaflet.Control.SideBySide一个Leaflet控件,用于添加一个分屏来比较两个地图。Demo三、Leaflet添加动态天气图Windy-Leaflet-plugin使用Windy的免费API在你的页面上显示动态天气图。Demo四、Leaflet标记碰撞检测Leaflet..原创 2022-03-03 14:11:19 · 1626 阅读 · 1 评论 -
geoserver地图服务的一些操作
具体可从以下链接查看geoserver的一些地图服务操作,我记录一下我项目中曾经用过的一些常规地图服务操作。Web Feature Service (WFS)一、从wms图层中筛选出图层/geoserver/xxx/wms?CQL_FILTER=( 属性1 = '值1' )OR( 属性2 = '值2' )注意:CQL_FILTER后面的属性有空格间隔不要丢了/** * 从整块的wms地图中筛选出需要的地图 * layer: 图层名称 如:xxx:xxx * zIndex: 地图..原创 2022-03-03 10:22:25 · 1093 阅读 · 1 评论 -
.gpx文件转geojson
一、需求移动端生成路径轨迹文件.gpx文件,需要pc端进行展示需要将.gpx文件转可以解析的geojson数据二、需要的库axios@mapbox/togeojson三、方法//通过url获取资源async function apiByUrlToInfo(url) { try { const response = await axios.get(url); return response; } catch (e) { return (type.原创 2022-01-19 10:56:13 · 821 阅读 · 0 评论 -
Leaflat迷你小地球仪
一、效果展示二、代码根据leaflet-globeminimap模块化改写leaflet-globeminimap.js// L, d3, topojsonimport * as L from "leaflet";import * as d3 from "d3";import * as topojson from "topojson";import { wordJson } from "./world";L.Control.GlobeMiniMap = L.Control.ex.原创 2021-11-22 18:04:05 · 884 阅读 · 0 评论 -
Leaflet中Maker碰撞监测
一、问题当地图中使用的maker数量比较多的时候,就会出现一个问题,多个maker拥挤在一块儿,如下:二、解决方式解决方式可以使用聚合方法,或者这里讲到的碰撞监测官网所提供的插件里有一个:Leaflet.LayerGroup.Collision插件要讲插件使用到React或者Vue框架中,需要做一些修改,后面会把代码贴上,可直接复制使用插件中使用到的的rbush版本不能太高,不然会出问题,后面同样贴有使用版本的源码import * as L from "leaflet";imp.原创 2021-10-19 17:16:09 · 1188 阅读 · 1 评论 -
leflet使用kriging.js构建气象图层
一、克里金法kriging.jskriging.js是一个 Javascript 库,通过普通克里金算法提供空间预测和映射功能。克里金法是一种高斯过程,其中使用核回归将二维坐标映射到某个目标变量。该算法经过专门设计,可通过为变异函数参数分配先验参数来准确地对较小的数据集进行建模。二、构图函数调用canvas在地图实例标签同列,定义一个canvas标签-POINT数据world数据import kriging from "./kirging.js";// .原创 2021-10-18 13:27:20 · 1746 阅读 · 0 评论 -
如何在React和Vue框架中实现leafLet.js测距和测面工具
现在大部分前端项目都是使用框架开发,比如React和Vue,那如何在这些框架中实现leafLet.js的测距和测面功能呢,且待我徐徐道来。一、使用到的插件leaflet-measure-path将里面的leaflet-measure-path.js和leaflet-measure-path.css文件拷出来到项目中将leaflet-measure-path.css文件直接引入到项目中需要修改leaflet-measure-path.js文件,改成如下import * as L from..原创 2021-09-08 10:10:35 · 1672 阅读 · 3 评论 -
Arcgis js 4.18 空间范围查询
一、先把Sketch工具加上用来画多边形import Map from "@arcgis/core/Map";import MapView from "@arcgis/core/views/MapView";import Sketch from "@arcgis/core/widgets/Sketch";import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";// 创建地图const map = new Map({ b.原创 2021-04-28 16:51:43 · 798 阅读 · 0 评论 -
ArcGIS中FeatureLayer图层显示不全问题
问题使用arcgis js 4.18 版本使用FeatureLayer加载图层,出现图层显示不全问题原因featurelayer图层发布的时候,参数中服务器返回的最大记录数默认为1000解决参数中服务器返回的最大记录数值整大点就行了(整个一万)...原创 2021-04-08 17:45:36 · 1587 阅读 · 0 评论 -
在线地图资源
谷歌地图谷歌地图WMTS服务地址:https://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali参数分析mt1.google.cn ----- google WMTS 服务的服务器地址。(mt0 ~ mt3 均可以)lyrs ----- 表示图层类型,即网片类型,具体:s:卫星图(无注记)y:卫星图(带注记)h:中文注记图m:交通道路图t:地形图(无.原创 2020-10-23 13:24:29 · 1488 阅读 · 0 评论 -
基于Cesium的指南针插件
因为cesium自身没有携带指南针插件,所以需要引用其他的插件这里我采用的是:CesiumNavigation.umd作者github库:CesiumNavigation.umd由于国内访问慢,我把库引到了gitee上,便于国内访问:CesiumNavigation.umd也可以直接在这里下载使用:CesiumNavigation.umd使用方法在html文件中引用Cesium和Cesium必要样式表在html文件中引用CesiumNavigation.umd.js和cesiu..原创 2020-07-16 09:22:49 · 2952 阅读 · 4 评论