一碗老面i-CSDN博客

原创全国省市县行政区划，边界线GeoJSON数据下载

一站式行政区划数据下载、应用平台数据下载符合民政部数据规格,省、市、县三级数据，提供历史版本数据。提供在线可视化下载、服务SDK、服务、可视化组件能不同的数据应用方式方便。提供 GeoJSON、JSON、TopoJSON、CSV、KML多种数据下载方式，提供 SVG 格式图像下载

2023-03-13 11:02:18 3095 1

原创 TypeScript 语言服务在其启动后已中止 5 次。将不会重启该服务

最近使用VS Code 写 Vue 项目时，发现Vue/Js的代码提示功能良好，但是TS文件突然之间不好使了，语法不提示，代码书写没有智能提示，并且eslint也不提示语法错误！搞的代码写的很慢很痛苦啊。下面具体介绍的我遇到的问题和解决办法：打开VS Code左下角一直有上面这个提示“初始化 JS/TS 语言功能”/“Initializing JS/TS language features” ，右下角开始频繁的弹“The typescript language service has b..

2021-12-14 11:24:41 7865 5

原创 uni-app+vue3+typescript工程搭建

前言通过vue-cli创建的项目，更易维护，可以使用非HbuilderX编辑器进行编码，通过终端直接执行编译命令HbuilderX没有Linux版本（不含wine），但有大神移植了linux版本下的微信开发工具:cytle/wechat_web_devtools dragonation/wechat-devtools因此linux环境下也可以开发微信小程序，这样三种常见操作系统都可以正常的进行开发调试模板初始化使用uni-app官方提供的vue3基础模板安装vue-clin

2021-11-08 14:31:59 17567

原创 leaflet layerGroup 控制图层显示/隐藏问题

this._ViewGroup=L.layerGroup().addTo(this.viewer);//显示/隐藏图层组this._ViewGroup.eachLayer(item=>{item.setOpacity(1);});this._ViewGroup.eachLayer(item=>{item.setOpacity(0);});

2021-05-18 15:35:32 2312

原创 Cesium加载矢量切片点击事件触发获取矢量切片的矢量信息

结合上篇写的如何加载矢量切片https://blog.csdn.net/qq_29808089/article/details/107941079近来同事使用后，在项目中有需要点击矢量切片并触发获取矢量切片的矢量信息..发现现有的mvt.js里面的 pickFeatures 方法是returnundefined，无奈...只有更新pickFeatures方法。效果图：1.地图事件点击触发var handler = new Cesium...

2021-04-14 11:49:30 2404 7

原创 Cesium 监听模型添加事件

之前遇到的问题都是Cesium底图加载完毕做监听执行一些事件，今天突然同事问到监听entity添加事件...瞬间懵逼，就翻了一下api文档上面有对entity的changedEvent事件说明，那就意味着是可以进行监听的~http://cesium.xin/cesium/cn/Documentation1.62/CustomDataSource.html?classFilter=CustomDataSource话不多说，直接上代码！<!DOCTYPE html><.

2021-04-09 14:25:57 2264 1

原创 Git第一次提交代码到远程仓库

Git第一次提交代码到远程仓库第一步：空文件夹开始， git init 初始化项目文件夹第二步：再粘贴你的文件后，git add . 键所有文件添加到暂存区第三步：git commit -m "first commit"提交到本地仓库第四步：git remote add origin XXX（XXX就是你github或者码云等远程仓库的地址，git branch这个命令可以看到你所在的分支，删除某个仓库地址使用git remote rm origin）第五步：git pull 拉取..

2021-02-25 19:48:29 1358

原创前端框架使用总结

UI框架element-ui 2.14.1Element Plussortablejsbetter-scroll前端框架vue 2.6.12 + vuex 3.6.0 + vue-router 3.4.9vue 3.0.5 + vuex 4.0.0-rc.2 + vue-router 4.0.3网络请求框架axios0.18.1图形框架echarts 5.0.0工作流框架X6地图框架二维：MapBox / Leaflet三维：MapBox /.

2021-02-05 16:57:02 540 1

原创 cesium之地图显示坐标、视角高度、比例尺、海拔效果篇

效果图:实现代码：const self = this; let lontitude = '', latitude = '', h = ''; var handler3D = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); handler3D.setInputAction(function (movement) { var pick = new Cesium.Cartesian2(mo

2021-01-13 18:19:47 2099 1

原创 Cesium实现云图时序播放

先上效果图：代码实现：<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-sc.

2021-01-06 10:53:40 1747 1

原创 WebGL report 内容解析

深度纹理？创建一个作为深度纹理贴图来使用的纹理。需要支持WEBGL_depth_texture扩展。深度纹理实际就是一张渲染纹理，只不过它里面存储的像素值不是颜色值，而是一个高精度的深度值。由于被存储在一张纹理中，深度纹理的深度值范围是[0,1],而且通常是非线性分布的，那么，这些深度值是从哪里得到的呢？总体来说，这些深度值来自于顶点变换后得到的归一化的设备坐标(Normalized Device Coordinates,NDC)。一个模型要想要最终被绘制到屏幕上，需要把它的顶点从模型空间变换到齐次

2021-01-04 11:13:57 458

原创 WebGL和OpenGL的联系和区别

WebGL和OpenGL的区别为：性质不同、插件支持不同、用途不同。WebGLWebGL的缩写为Web图形库。它主要用于渲染二维图形和交互式三维图形。它是可以与HTML5一起使用的Javascript API。它支持跨平台，并且仅以英语提供。WebGL程序由用JavaScript编写的控制代码组成1.WebGL 是基于 OpenGL ES 2.0 的 Javascript API，而不是纯OpenGL(ES代表“嵌入式系统”)。2.WebGL通过 HTML5 的 Canvas 来和 DOM

2021-01-04 10:52:33 10060

原创 VScode 文件顶部加入作者信息、日期和函数注释设置

1.vscode安装插件KoroFileHeader2.左上角选择文件--首选项---设置---输入"fileheader"---点击"在setting.json中编辑"3."fileheader.configObj"同级输入// 文件头部注释 "fileheader.customMade": { "Descripttion": "说明", "version": "V1.0", "Author": "SL", "Date": "Do not edit",

2020-12-21 13:57:47 3636

原创 cesium 设置限制缩放大小

CesiumAPI属性文档viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1000;viewer.scene.screenSpaceCameraController.maximumZoomDistance = 300;

2020-12-17 10:16:00 4222

原创 echarts 添加自定义geojson数据源实现map地图展示/数据源更新替换

1.找到本地echarts引入的数据源文件2.以山东数据源为例，替换features节点数据和修改UTF8Encoding属性为false即可features属性内容从DataV.GeoAtlas下载geojson数据进行替换

2020-12-14 18:03:15 1138

原创 Web 性能实战

1.优化压缩CSS/JS/HTML CSS,JS,HTML写法优化 2.优化压缩图片（JPG,PNG,SVG,GIF），字体（字体压缩，font-face次联，font-display,unicode-range） jpeg优化插件3.页面懒加载4.页面渲染性能及渲染机制（重构、回流、重排）渲染流程-> 解析HTML以创建DOM，解析CSS以创建CSSOM 布局元素（DOM+CSSOM 树组合创建渲染树，然后执行布局，应用CSS规则，创建UI...

2020-12-11 14:37:12 432

原创 Cesium 鼠标滚轮改变地图层级（height）及视角改变监听

1.viewer鼠标滚轮改变地图层级监控var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction(click => {}, Cesium.ScreenSpaceEventType.WHEEL); // cesium 鼠标滚轮行为2.viewer.camera视角改变监控viewer.camera.changed.addEventListener(f.

2020-12-10 13:47:40 3699 1

原创 echarts 数据重置图表刷新，带动画效果刷新

1.数据源更新，图表刷新，带动画constmyChart=this.$echarts.init(_id);myChart.clear();myChart.setOption(option,true);2.监听窗口变化，重置echarts表格window.onresize = function () { mycharts.resize();};

2020-12-10 11:36:33 15741 1

原创 Cesium imageryLayers，entity remove 删除，漏删问题

问题：删除imageryLayers/entity的时候，使用forEach/ for遍历删除的时候会实时修改 viewer.imageryLayers/viewer.entities的下标，例如 entitys.length = 20，找到第一个设其为第10个实体）的实体删除后，entitys.length 变成 19，而原来的第11个实体变成了第10个实体，所以循环的时候会漏掉。解决方法：1.倒叙遍历for(var i=entities.length-1;i>=0..

2020-12-10 11:34:50 3447

原创 Cesium 如何区分单击LEFT_CLICK和双击事件LEFT_DOUBLE_CLICK

var timeoutID = null;handler.setInputAction(function(movement){ clearTimeout(timeoutID); timeoutID= window.setTimeout(function(){ }, 200);},Cesium.ScreenSpaceEventType.LEFT_CLICK); handler.setInputAction(function(movement){ c...

2020-12-09 19:16:46 661

原创 Cseium 多个entity叠加点击获取下层属性

Cseium鼠标点击事件//返回多个模型属性viewer.scene.drillPick(click.position);//返回最上层模型属性viewer.scene.pick(click.position);

2020-12-09 19:07:05 775 1

原创 MapBoxGL 热力图实现-样式自定义

参考网站：https://blog.csdn.net/qq_40996400/article/details/107597948参考网站：https://www.mapbox.cn/coronavirusmap/数据来源：https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson实现效果：实现代码：<!DOCTYPE html><html> <head> <meta

2020-11-17 14:32:22 1032

原创 MapBoxGL 热力图实现-官网示例

实现效果：实现代码：<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Create a heatmap layer</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="http

2020-11-17 14:27:26 1407

原创 MapBoxGL 图层样式修改

先进行地图加载，然后加载图片(修改背景图/图层背景图需要用到)_self.map.loadImage( window.location.origin + item.url, function (error, image) { if (error) throw error; _self.map.addImage(item.id, image); })1.背景图及颜色透明度修改背景图修改：window.map.

2020-11-17 11:41:00 2811

原创 MapBoxGL 加载echarts统计图表

效果图：实现代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>mapboxgl-echarts</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalab

2020-11-17 11:02:29 1373

原创 MapBoxGL 加载显示经纬度的网格

效果图：代码实现：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>MapBoxGL</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"

2020-11-17 10:57:51 1697 2

原创 MapBoxGL 加载矢量服务MVT

效果图：代码：注意addLayer里面的"source-layer": "county"，county对应矢量服务的图层名！<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>MapBoxGL</title> <meta name="viewport" content="width=device-width,initial-sc

2020-11-17 10:45:06 2377

原创 MapBoxGL 加载天地图

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>MapBoxGL</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <link.

2020-11-17 10:38:29 5808

原创 MapBoxGL 入门

近期公司准备用mapboxgl弄在线制图系统..由于对矢量图层的大量渲染及加载等选型mapboxgl。官网API地址：https://docs.mapbox.com/mapbox-gl-js/api/大致了解API及示例程序之后，为了尽快熟悉想实现哪些效果，建议在Mapbox Studio里面自己自行配置想要的效果，然后在项目分享下导出json文件查看其属性再进行本地代码运行加载。Mapbox Studio新建地址：https://studio.mapbox.com/本地离线化...

2020-11-17 10:30:21 6914

原创 MapBoxGL 本地离线部署

首先大概官网示例中心，拷贝一份可在线查看的demo代码例子代码：https://docs.mapbox.com/mapbox-gl-js/example/simple-map/<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Display a map</title><meta name="viewport" content="initial-s

2020-11-17 10:26:17 4339

原创 MapBoxGL message: “Unimplemented type: 4“

问题主要出现在mapboxgl的字体没有引入进来，先查看字体引入情况在地图初始化的位置查看路径是否正确glyphs:this.map = new mapboxgl.Map({ container: domId, style: { "version": 8, "sprite": localhost + "/css/sprite", "glyphs": localhost + "/css/font/{fonts

2020-11-17 10:14:00 4022

原创 MapBoxGL map鼠标点击无边框

在MapBoxGL下地图加载之后发现，当鼠标点击地图的时候，在map div周边有黑色边框效果如下：如何清除？在页面下添加样式即可：.mapboxgl-canvas{outline: none;}

2020-11-06 16:20:01 437

原创天地图数据资源

imageUrl:"http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=ebf64362215c081f8317203220f133eb",vectorUrl:"http://t{s}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=ebf64362215c081f8317203220f1...

2020-11-03 16:58:12 1623

原创 Vscode Web开发 setting.json相关配置

setting.json配置{"liveServer.settings.donotShowInfoMsg":true,"vetur.format.defaultFormatter.html":"js-beautify-html",//html不换行"vetur.format.defaultFormatter.js":"vscode-typescript",//js不换行"vetur.format.defaultFormatterOptions":{...

2020-10-30 13:57:30 440

原创 Vue img 动态写入图片

<imgclass="imgStyle":src="img">this.img=require(`@/assets/img/${item.sceneName}.png`)

2020-10-29 13:43:06 866

原创 element表格勾选状态下翻页勾选状态保持

在<el-table标签加上 row-key=“set_id”在<el-table-column type=“selection” 列加上 :reserve-selection=‘true’<el-table ref="multipleTable" :data="tableData" row-key="set_id" tooltip-effect="dark" style="width: 532" @selection-change="handleSelectionChange"

2020-10-28 11:28:55 943

原创 GIS空间数据下载

地理空间数据云http://www.gscloud.cn/

2020-10-20 19:02:20 440

原创 JS线性结构数组与树形结构相互转换

数据结构//树结构node = { id: number, // 数值 parentId: number, // 数值 name: string, children: [] || null, // 用数组的方式保存子节点，适合更多业务场景 }//线性结构list = [ { id: number, parentId: number, name: string }, { id: number, parentId: number, name: string },

2020-10-15 18:01:28 536

原创 DOM DEM DLG DRG之间的区别

1、DRG (数字栅格地图)　　数字栅格地图是纸制地形图的栅格形式的数字化产品。可作为背景与其他空间信息相关，用于数据采集、评价与更新，与DOM、DEM集成派生出新的可视信息。2、DLG (数字线划地图)　　现有地形图上基础地理要素分层存储的矢量数据集。数字线划图既包括空间信息也包括属性信息，可用于建设规划、资源管理、投资环境分析等各个方面以及作为人口、资源、环境、交通、治安等各专业信息系统的空间定位基础。3、DEM (数字高程模型)　　数字高程模型是以高程表达地面起伏形态的数字集合。可制作

2020-10-13 14:35:06 10551 2

转载 Cesium 坐标转换

cesium中常用的坐标有两种WGS84地理坐标系和笛卡尔空间坐标系(世界坐标)。我们平时常用的以经纬度来指明一个地点就是用的WGS84坐标，笛卡尔空间坐标系常用来做一些空间位置变换如平移旋转缩放等等。二者的联系如下图, 笛卡尔空间坐标的原点就是椭球的中心.Pick----屏幕坐标 Cartesian----世界坐标 cartographic-----地理坐标（弧度） Point----经纬度坐标1.屏幕坐标转世界坐标var pick= new Cesium.Cartesian2(...

2020-10-13 14:31:40 622

CesiumHeatmap.js

CesiumHeatMap.js文件 cesium热力图显示插件 http://www.patrick-wied.at/static/heatmapjs/

2020-10-12

Cesium 海面波纹waterNormals.jpg

Cesium 海面波纹waterNormals.jpg viewer.scene.primitives.add(_entity);

2020-10-12

jq设置页面多分辨率自适应 agent.js

jq设置页面多分辨率自适应，核心思想： function resize() { //window.screen.display=3; if(window.screen.display == 2) { resizeCenter();//居中模式，垂直填充 } else if(window.screen.display == 3) { resizeFull();//拉伸填充，水平和垂直拉伸 } else { resizeWidth();//水平填充 } }

2020-10-01