前端
文章平均质量分 77
M1412
在职前端工程师,业余GIS开发
展开
-
leaflet 移动端h5地图开发(一) 点聚合&矢量瓦片(附项目代码和数据)
leaflet 移动端h5地图开发(一) 点聚合&矢量瓦片(附项目代码和数据)leaflet是一个轻量级的GIS前端框架,支持多种GIS服务(wfs,wms,wmts,arcgis mapserver,mvt矢量切片)。但是leaflet不支持三维,如果不考虑三维的话,leaflet是做移动端h5地图很好的选择。技术栈前端 : vue (uniapp) +leafletGIS服务器:geoserver案例项目界面效果(仿高德):在线预览地址:http://magic1412.gitee.原创 2021-02-19 10:46:59 · 2481 阅读 · 4 评论 -
特殊字符 “[”和“]” (方括号,中括号) 的处理
特殊字符 “[”和“]”的处理主要用于处理特殊文件名SQL语句处理eg:select * from FarmTransferApprovalwhere ApprovalName like '%沪府土/[2010/]86号%' escape '/'js处理eg//访问后端静态资源文件时decodeStr(str) { return str.trim().replace(new RegExp('\\[', 'gm'), '%5B').replace(new RegExp(']', 'g原创 2020-12-01 22:37:57 · 1843 阅读 · 0 评论 -
Cesium-EarthSdk简单功能实现(四)——3D POI兴趣点
Cesium-EarthSdk简单功能实现(四)——3D POI兴趣点效果1、将poi点数据处理成如下图jsonid为唯一id,xy分别为经纬度,val为poi标签[ {"id":"df10eda4-f339-4ebb-967a-f7d665b125a9","x":121.4833408,"y":31.23464991,"h":58.72487865,"val":"01"},{"id":"ba15bc56-0c0c-4a19-919c-6dd7643810ad","x":121.47744原创 2020-11-29 22:51:21 · 2311 阅读 · 0 评论 -
Cesium-EarthSdk简单功能实现(三)——3D柱状图
Cesium-EarthSdk简单功能实现(三)——3D柱状图效果:1、用QGIS或ArcGIS的渔网工具生成统计点阵,并转成如图所示jsonx和y分别为经纬度坐标,value为柱状图在该点的值2、参考cesium官网案例,使用cesium原生接口实现 addBarChart() { //获取json var barData = require('@/assets/json/bar.json') //实例化barEntity,添加至vie原创 2020-11-28 17:38:55 · 1775 阅读 · 3 评论 -
Cesium-EarthSdk简单功能实现(二)——流动道路
Cesium-EarthSdk简单功能实现(二)——流动道路效果:1、使用QGIS或ArcGIS将道路数据处理成如图所示jsonoid为某条道路的唯一id,x和y分别为道路上节点的经纬度坐标2、加载并处理道路jsonloadODLineData(dataFunc) { Cesium.Resource.fetchJson('./assets/json/line.json').then((data) => { var timeDuration = 5.0; var mov原创 2020-11-27 16:49:38 · 2468 阅读 · 0 评论 -
Cesium-EarthSdk简单功能实现(一)——建筑物点击弹出事件
Cesium-EarthSdk简单功能实现(一)——3DTile建筑物点击弹出事件效果如图方法一 ,调用原生接口实现1、设置鼠标左键监听事件,获取点击的建筑物对象(Cesium3DTileFeature)的属性信息2、构建pin弹出框json对象3、将pin对象加入场景setBuildingClickHandler(bool) { this._handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);原创 2020-11-26 21:07:02 · 2893 阅读 · 2 评论 -
Leaflet结合wms和wfs实现点击选中要素
Leaflet结合wms和wfs实现点击选中要素Openlayers结合wfs服务要素选中的方法较为简单, 参考官方文档搜索select案例即可。但是leaflet并没有封装相关选中要素的函数,所有需要自己写方法请求wfs服务来实现选中要素功能。具体思路如下:1、读取wms服务(3857坐标),添加图层至map对象this.planLayer = L.tileLayer.wms("http://*.*.*.*:8090/geoserver/cite/wms", { layers: 'ncite原创 2020-07-13 22:52:53 · 3751 阅读 · 5 评论