WebGIS
关注
分享
扫一扫
文章平均质量分 77
何去何从2857
这个作者很懒，什么都没留下…
展开
-
Geoserver的WFS服务实现要素的增删改
Geoserver的WFS服务实现要素的增删改原创 2022-08-07 23:21:16 · 1894 阅读 · 0 评论 -
Geoserver发布WMTS服务中的坐标系转换与Mapbox加载
Geoserver发布WMTS服务中的坐标系转换与Mapbox加载原创 2022-08-07 16:35:08 · 4202 阅读 · 4 评论 -
Mapbox本地化处理思路总结
思路通过地图下载器、OSM、百度云、GIS数据服务网站等资源获取矢量数据通过Geoserver发布矢量切片服务（具体见之前的文章）通过开源工具spritezero cli或者java代码制作雪碧图通过开源工具node-fontnik制作字体pbf文件通过开源工具Maputnik本地化编辑地图样式，生成style.json文件Mapbox加载style.json数据实现本地化处理难点除了第3点和第4点不熟悉之外，其它的都已经自己动手实现过。这两点使用的spritezero cli和node原创 2021-10-29 20:06:23 · 1221 阅读 · 4 评论 -
Mapbox 实现画圆并高亮圆内要素
文章目录需求实现思路预览效果实现代码相关链接需求Mapbox官方示例只实现了点选和框选的空间查询方式，而在实际开发中也需要实现画圆并高亮圆内的要素。实现思路使用Canvas实现动态画圆根据圆心和鼠标所在位置，计算出半径，在map上创建circle图层通过turf工具函数，查询与圆相交或在圆内的要素预览效果与圆相交的要素：圆内要素：实现代码<!DOCTYPE html><html><head> <meta charset="ut原创 2021-10-02 09:25:26 · 1999 阅读 · 0 评论 -
Mapbox + ECharts 实现简单迁徙图
文章目录概述预览效果实现代码说明相关链接概述ECharts是开源的可视化图表库，其中有丰富的图表。本文使用Mapbox结合ECharts插件实现了简单的迁徙地图。预览效果实现代码<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>mapbox + echarts （简单迁徙图）</title> <meta name="viewport原创 2021-10-01 22:38:35 · 2279 阅读 · 0 评论 -
基于Tomcat的Geoserver安装步骤（Windows系统）
文章目录安装JDK测试本机是否安装JDK下载并安装安装Tomcat安装Geoserver参考资料安装JDK测试本机是否安装JDK按下Win + R键，输入cmd，打开小黑框输入命令：java -version，出现以下信息，说明环境变量配置成功下载并安装经过测试，如果没有显示java版本，则需要在本机安装JDK环境，本文使用的是Tomcat9.0.50，JDK版本需要高于1.8（本人安装时，本机已有JDK环境，故跳过该步骤，需要的可以搜索相关博客）安装Tomcat进入Tomcat官网原创 2021-07-13 15:04:02 · 2082 阅读 · 2 评论 -
Angular8通过npm引入Mapbox GL 和 Ant L7
ERROR in node_modules/@antv/l7-core/es/services/asset/IIconService.d.ts(1,8): error TS1259: Module '"/node_modules/eventemitter3/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag node_modules/@antv/l7-map/es/geo/trans..原创 2021-06-10 20:52:56 · 895 阅读 · 0 评论 -
Mapbox相机动画整理（3）动作播放整理
文章目录播放整理循环播放多个动作连续播放播放整理循环播放在一定时间内，循环播放var animationDuration = 80000; var start; function frame(time) { if (!start) start = time; // phase determines how far through the animation we are var phase = (time - start) / animationDuration; // phas原创 2021-04-20 22:30:23 · 528 阅读 · 0 评论 -
Mapbox相机动画整理（2）API整理
文章目录API 整理Geography 和 geometryLngLatLikePointLikeMercatorCoordinateProperties 和 OptionsAnimationOptionsCameraOptionsMapeaseTo(options, eventData?)API 整理Geography 和 geometryLngLatLike经纬度坐标var v1 = new mapboxgl.LngLat(-122.420679, 37.772537);var v2 = [原创 2021-04-14 22:50:03 · 1940 阅读 · 0 评论 -
Mapbox相机动画整理（1）示例解析
文章目录Examples 解析Animate a point along a routeAnimate map camera around a point （3D）Animate the camera along a path（3D）Customize camera animationsFly to a location based on scroll positionExamples 解析此处记录较复杂的示例，简单的会在后面整理的相关API中提及。Animate a point along a ro原创 2021-04-04 21:17:13 · 1589 阅读 · 0 评论 -
Mapbox常用表达式整理（4）
文章目录表达式参考ColorrgbrgbaMath+, -, *, /, %, ^abs, ceil, floor, roundsin, cos, tan, asin, acos, atane, ln, ln2, log10, log2, pimax, minZoomzoomHeatmapheatmap-density表达式参考Colorrgb从红色、绿色和蓝色组件中创建一个颜色值，其范围必须在0到255之间，alpha组件为1。如果任何组件超出范围，则该表达式将出错。["rgb", number原创 2021-04-04 11:16:07 · 1332 阅读 · 0 评论 -
Mapbox常用表达式整理（3）
文章目录表达式参考Decision 判定操作符!, !=, <, <=, ==, >, >=（高频率使用）all 逻辑与（高频率使用）any 逻辑或case 条件 （高频率使用）match （高频率使用）Ramps, scales, curvesinterpolate（高频率使用）step（高频率使用）String 字符串类型操作符concatdowncaseupcase表达式参考Decision 判定操作符!, !=, <, <=, ==, >, >=原创 2021-04-04 10:30:08 · 8715 阅读 · 0 评论 -
Mapbox常用表达式整理（2）
文章目录表达式参考Types类型操作符booleanformat表达式参考Types类型操作符boolean如果提供了多个值，则按顺序计算每个值，直到得到一个布尔值为止。如果所有输入都不是布尔值，则表达式是错误的。['boolean', ['feature-state', 'hover'], false]首先看['feature-state', 'hover']表达式的值是否为bool值，如果是，则返回对应的bool值；如果否，则按顺序依次往后看第二个值是否为bool值。format返回一原创 2021-04-01 21:37:26 · 3518 阅读 · 2 评论 -
Mapbox常用表达式整理（1）
文章目录概述数据表达式相机表达式组合表达式类型系统概述可以将任何layout属性，paint属性或filter的值指定为表达式。Mapbox GL提供的表达式运算符包括：数学运算符，用于对数值算术和其他运算逻辑运算符，用于处理布尔值和做出条件判断字符串运算符数据运算符，提供对源要素属性的访问相机运算符，可访问定义当前地图视图的参数数据表达式数据表达式允许要素的属性或状态确定其外观。常见的有：get，has，id，或feature-state。{ "circle-color":原创 2021-03-30 23:01:37 · 3260 阅读 · 0 评论 -
Mapbox GL 测距（动态画线 + Tooltip）
话不多说，直接上图和代码！<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Measure distances</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <script src="ht原创 2021-02-28 11:55:32 · 1462 阅读 · 2 评论 -
Mapbox GL 加载GeoServer发布的矢量切片
文章目录1. GeoServer发布单个图层的矢量切片1.1 安装插件1.2 创建Gridsets1.3 发布单个图层矢量切片2. Mapbox GL 加载单个图层的矢量切片3. 图层组矢量切片发布与Mapbox GL 加载1. GeoServer发布单个图层的矢量切片1.1 安装插件下载插件geoserver-2.13.3-vectortiles-plugin（需查找当前对应的GeoServer版本）http://geoserver.org/download/找到旧版本找到Vector原创 2021-02-22 20:16:56 · 5396 阅读 · 3 评论 -
Mapbox GL 加载GeoServer发布的WMS地图服务及点击查询
文章目录1. GeoServer发布WMS地图服务2. Mapbox GL 加载WMS source3. WMS地图服务点击查询4. 完整代码5. 参考文档1. GeoServer发布WMS地图服务GeoServer发布地图服务的常规操作：创建工作区添加新的数据存储添加新的图层不会的可自行在网上搜索，此处不再赘述。需要注意以下几点：添加新的数据存储时，需要注意属性表数据的编码格式，如果包含中文字符，需要选择GB2312或者GBK添加新的图层时，需要正确定义待发布图层的坐标系，此处强制原创 2021-02-20 16:35:36 · 5826 阅读 · 9 评论 -
Mapbox 笔记4（数据）
数据使用 Tilequery API 创建一个健康食物查询器要点添加地理编码器通过地理编码器查找周边符合条件的点数据渲染查询后的数据点使用 Mapbox GL JS 制作一张热力图要点原创 2020-11-10 20:07:34 · 895 阅读 · 0 评论 -
Mapbox 笔记2（Web应用——构建商店定位器）
文章目录Web应用使用 Mapbox GL JS 构建商店定位器实现思路第一种 加载内置标签初始化地图加载商店geojson数据创建商店列表添加事件监听（商店列表点击事件和地图点击事件）添加交互（flyToStore方法和createPopUp方法）第二种 加载自定义标签添加商店geojson数据创建商店列表（略）添加自定义Marker添加事件监听（商店列表点击事件和Marker点击事件）Web应用使用 Mapbox GL JS 构建商店定位器实现思路初始化地图加载商店geojson数据创建商原创 2020-11-08 18:42:22 · 492 阅读 · 0 评论 -
Mapbox 笔记1（Mapbox 是如何工作的）
文章目录初步了解MapboxMapbox 是如何工作的Access TokenToken的使用范围URL 限制创建和管理 access token创建新数据geojson数据格式创建数据集数据集转换为 tileset初步了解MapboxMapbox 是如何工作的Access Token需要获取 access token（访问令牌）以使用 Mapbox 的各种工具、API、SDK。Token的使用范围每个 access token 都可以限制Mapbox API的使用范围。在选择 token 范围原创 2020-11-01 12:20:21 · 2194 阅读 · 0 评论 -
Mapbox学习笔记（1）——style
目录改变一个地图的样式改变一个地图的样式地图样式：map的style属性mapbox://styles/mapbox/streets-v10mapbox://styles/mapbox/outdoors-v10mapbox://styles/mapbox/light-v9mapbox://styles/mapbox/dark-v9mapbox://styles/mapbox/satellite-v9mapbox://styles/mapbox/satellite-streets-v10m原创 2020-05-27 22:30:38 · 1860 阅读 · 0 评论 -
Openlayers6 Examples学习笔记（14）
文章目录山体阴影调整Shared Views（视图同步）Tile Load Events（瓦片加载事件）Vector Labels（矢量标注）WMS Capabilities Parsing（WMS功能解析）Vector Tile Info（矢量瓦片属性信息获取）Zoom Sliders（缩放滑块）山体阴影调整案例链接Shared Views（视图同步）案例链接Tile Load Ev...原创 2020-01-14 21:02:29 · 553 阅读 · 0 评论 -
Openlayers6 Examples学习笔记（13）
文章目录Lazy Source（按需加载数据源）Advanced Mapbox Vector Tiles（高级Mapbox矢量瓦片）Mapbox Vector Tiles（Mapbox矢量瓦片）Timezones in KML（KML时区）Measure（测量）OSM Vector Tiles（OSM矢量瓦片）Lazy Source（按需加载数据源）案例链接Advanced Mapbox ...原创 2020-01-14 20:38:07 · 675 阅读 · 0 评论 -
Openlayers6 Examples学习笔记（12）
文章目录案例链接案例链接案例链接案例链接案例链接案例链接案例链接案例链接案例链接案例链接案例链接案例链接案例链接案例链接原创 2020-01-13 22:15:28 · 338 阅读 · 0 评论 -
Openlayers6 Examples学习笔记（11）
文章目录XYZ（加载XYZ图层）Vector Label Decluttering（矢量标注冲突优化）重点Constrained Zoom（限制图层缩放）XYZ EsriFreehand Drawing（手绘模式）XYZ Retina Tiles（XYZ视网膜瓦片）WKT（加载WKT数据）Box Selection（框选）Custom Controls（自定义控件）Custom Tooltips（...原创 2020-01-13 21:40:16 · 584 阅读 · 0 评论 -
Openlayers6 Examples学习笔记（10）
文章目录WFS - GetFeature（获取要素，查询过滤）WMS GetLegendGraphic（获取图例）WMS 512x256 TilesSingle Image WMSWMTS（加载WMTS图层）WMS Time（时间动态更新数据）重点Tiled WMS Wrapping（WMS瓦片包裹）WMS without Projection（加载未知投影WMS数据）WMTS Tile Tran...原创 2020-01-13 20:52:57 · 791 阅读 · 0 评论 -
Openlayers6 Examples学习笔记（9）
TopoJSON（加载TopoJSON数据）案例链接原创 2020-01-13 19:59:42 · 485 阅读 · 0 评论 -
Openlayers6 Examples学习笔记（8）
文章目录Select Features（选中要素）Scale Line（比例尺控件）Select Features by Hover（鼠标悬浮高亮选中要素）Static Image（加载静态图片）Snap Interaction（捕捉交互集成）Stamen Tiles（Stamen瓦片地图）Synthetic Lines（合成线）Street Labels（路线标注-沿路径轨迹）Teleporti...原创 2020-01-11 21:50:48 · 363 阅读 · 0 评论 -
Openlayers6 Examples学习笔记（7）
文章目录View Min-Zoom（自适应最小缩放层级）Modify Features（修改矢量要素交互）Moveend Event（地图移动结束事件）Mouse Position（鼠标位置控件）Navigation Controls（缩放至固定范围控件）Overview Map Control（鹰眼地图控件）Magnify（地图放大镜）Preload Tiles（预加载地图）自定义多边形样式Ra...原创 2020-01-11 18:14:34 · 521 阅读 · 0 评论 -
Openlayers6 Examples学习笔记（6）
文章目录Interaction Options（互动选项）Limited Layer Extent（限制图层范围）Layer Spy（地图探查）Layer Swipe（卷帘地图）Layer Zoom Limits（图层缩放限制）Localized OpenStreetMap（本地化的OSM）Layer Z-Index（图层的Z-Index）LineString Arrows（绘制带有箭头的线）Ma...原创 2020-01-11 17:23:12 · 1050 阅读 · 0 评论 -
Openlayers6 Examples学习笔记（5）
文章目录View Animation（视图动画）GPX DataMap Graticule（地图网格）Earthquakes Heatmap（地震震级热力图）Hit ToleranceIcon Colors（自定义图片颜色）Vector Layer Hit Detection（矢量图层高亮）Icon Symbolizer（图标符号）Vector Image Layer（图层高亮）GeoJSON（加...原创 2020-01-11 16:50:14 · 918 阅读 · 0 评论 -
Openlayers6 Examples学习笔记（4）
文章目录turf.jsturf.jsfetch请求在线数据显示turf.js与OpenLayers 集成的示例。turf.js函数along用于在街道上每200米显示一个标记。本示例使用的lineDistance函数在高版本turf中已经不再使用，此处，直接通过script标签引入，若npm安装，需要注意版本号。import 'ol/ol.css';import Map from...原创 2020-01-11 11:26:06 · 2024 阅读 · 0 评论 -
Openlayers6 Examples学习笔记（3）
文章目录EPSG:4326Geographic Editing（地理要素编辑）EPSG:4326创建单位为度的比例尺将视图的坐标系统设置为EPSG:4326（默认是EPSG:3857——Web 墨卡托投影）import ‘ol/ol.css’;import Map from ‘ol/Map’;import View from ‘ol/View’;import {defaults a...原创 2020-01-08 00:10:29 · 564 阅读 · 0 评论 -
Openlayers6 Examples学习笔记（2）
Tiled ArcGIS MapServer笔记：加载ArcGIS Server发布的瓦片服务import 'ol/ol.css';import Map from 'ol/Map';import View from 'ol/View';import TileLayer from 'ol/layer/Tile';import {OSM, TileArcGISRest} from 'ol...原创 2020-01-07 13:32:54 · 557 阅读 · 0 评论 -
Openlayers6 Examples学习笔记（1）
Bing Maps笔记：通过Map实例的layers属性，一次性加载多个图层，默认设为visible为false通过TileLayer实例的setVisible()方法来动态控制某个图层的显示TileLayer实例的preload属性表示预加载，默认值为0代码：import 'ol/ol.css';import Map from 'ol/Map';import View fro...原创 2020-01-06 23:44:55 · 2550 阅读 · 2 评论 -
高德地图 数据可视化JS API示例学习笔记（2）——图标点 IconLayer
天气预报图形标记 - 天气预报。通过设置 source 来指定图片的链接地址或者 base64URL 字符串。// 天气图标 var pngs = ['baoyu', 'qing', 'daxue', 'duoyun', 'wu', 'wumai', 'yun']; var map = new AMap.Map('container', { showIndoo...原创 2020-01-01 17:48:31 · 1115 阅读 · 0 评论 -
高德地图 数据可视化JS API示例学习笔记（1）——基本功能
可视化图层创建使用 RoundPointLayer 点图层，绘制圆形点标记。<script src="//a.amap.com/Loca/static/mock/districts.js"></script> <script> var map = new AMap.Map('container', { mapS...原创 2020-01-01 17:26:32 · 1646 阅读 · 4 评论 -
高德地图 Web JS API UI组件示例学习笔记（10）——标注列表
完整示例使用MarkerList实现标注列表的完整示例。美食数据的json右侧POI列表<!-- poi列表 --><div id="panel" class="scrollbar1"> <ul id="myList"> </ul></div>按钮列表设置自定义属性data-path、data-eval、d...原创 2020-01-01 16:41:45 · 722 阅读 · 0 评论 -
高德地图 Web JS API UI组件示例学习笔记（9）——行政区划聚合（二）
排除部分区划使用DistrictCluster排除部分区划。在创建DistrictCluster实例时，通过excludedAdcodes属性，排除掉部分区划。function initPage(DistrictCluster, $) { var distCluster = new DistrictCluster({ map: map, //所属的地图实例 ...原创 2020-01-01 11:27:07 · 710 阅读 · 0 评论 -
高德地图 Web JS API UI组件示例学习笔记（8）——行政区划聚合（一）
区划聚合使用DistrictCluster实现按照行政区划聚合大量点信息的展示。function initPage(DistrictCluster, $) { var distCluster = new DistrictCluster({ map: map, //所属的地图实例 zIndex: 11, getPosition: fun...原创 2020-01-01 10:42:47 · 1171 阅读 · 0 评论