- 博客(219)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 WebGIS学习资源推荐（包含学习路线、软件和数据资源推荐）
写在前面很多人对于WebGIS不是很熟悉，尤其是刚接触WebGIS的开发人员来说，感觉这东西漫无边际，不知道如何下手，所以本篇文章就结合自己的开发和学习经验，给大家推荐一下学习路线和相关的学习资源。首先直接上一张学习路线图，图中绿标的知识必须要掌握。学习资源推荐1、Web开发方面1.1、Web开发基础知识学习资源Web开发基础知识无非就是前端三剑客：HTML、CSS、JavaScript。对于这三块知识学习的话，其实重点和难点还是在CSS和JS这两块，以下是一些推荐的学习网站和资
2021-01-20 17:07:32
5976
1
原创 主流前端框架下ArcGIS API for JavaScript的开发
在工作之余利用周末的时间录制了一门ArcGIS API for JavaScript的零基础开发课程，相关信息如下。课程介绍课程详细介绍请看如下地址中的视频介绍。课程特点课程所用API为目前最新版ArcGIS API for JavaScript 4.14 课程所用的主流前端框架为Vue和React课程主要是针对当前主流的Vue和React两个框架中如何结合ArcGIS API for JavaScript来进行WebGIS的开发进行了详细的讲解，并且针对使用频率较高的ArcGIS JS
2020-10-14 09:08:25
5759
3
原创 13 ArcGIS API for JavaScript开发入门文档
写在前面这篇文章写在我用ArcGIS API for JavaScript(后面统称为"ArcGIS JS API")开发了两年项目后的某一天夜里。写这篇文章主要是两个目的吧，第一个原因肯定是为后面越来越多的从事WebGIS开发的GISer提供一个学习路线，当然，我提供的这个学习路线仅仅是一个参考；第二个原因就是我想写文章了，八月份一直忙着做项目，忘记了更新博客。什么时候适合读这篇文章呢在校期间无聊想学WebGIS开发之前 当你参加Esri全国开发者大赛(目前最新的名称应该是"易智瑞全国.
2020-09-04 12:53:47
4735
15
原创 10、【WebGIS实战】图层篇——通用服务图层加载全流程（适用于全部图层）
图层可以理解为添加到地图上面的数据，比如我们要在地图上展示成都市所有大型公园的位置，那么当前地图中除了初始化地图时添加的底图之外，在底图的上面我们还叠加了一份关于公园位置的点位数据，这份数据就是一个图层；以上就是要素图层的初始化和加载流程，通过三行代码即可完成，剩余30多种图层API的使用方式跟其类似，都是可以通过四五行代码就可以完成，唯一区别就是在图层初始化时的一些参数不一样而已，但是大家不用担心，每一个图层API官网文档都给出了详细的讲解和示例代码，大家只需要按照文档中的描述去使用即可，没有任何难度。
2023-08-30 20:22:07
361
原创 9、【WebGIS实战】微件篇——地图微件通用开发流程（适用于全部微件）
但是有利就有弊，微件在为我们提供了便利的同时，也限制了一些功能的实现，例如公司内部有自己的UI设计人员，我们在自己的业务系统中加载进来一个ArcGIS API for JavaScript提供的测量微件时，它自带的主题色和功能操作逻辑可能会跟我们系统的UI设计与交互是不符合的，这时候如果要自己去改测量微件的主题与交互逻辑就会变得困难，此时需要我们自己去实现符合自己业务逻辑的一个测量功能模块，就不建议使用官方提供的测量微件了。接下来我们就来介绍其中两个微件的使用流程：主页微件和比例尺微件。
2022-09-22 07:11:26
1528
1
原创 8、【WebGIS实战】WebGIS项目初始化
大家好，我是X北辰北。本文是「WebGIS实战」系列，关注这个标签，阅读所有文章，成为WebGIS开发高手。WebGIS项目初始化跟普通Web项目初始化流程是一致的，唯一有区别的是在我们Web项目初始化之后需要配置引入地图API，所以接下来我们就来看看一个普通的Web项目初始化流程。
2022-08-25 07:22:59
1186
原创 ArcGIS API for JavaScript官网解析
此课程的重点是讲解ArcGIS API for JavaScript官网提供的各个API模块，可以当做是一个字典来使用，版本默认使用最新版（4.24，当前版本），如果此课程和《WebGIS培训》项目实战课结合使用，效果更佳。......
2022-07-15 06:41:34
1596
1
原创 7、【WebGIS实战】专题篇——API key
在介绍下一篇文章之前，应监工和广大粉丝的要求，临时加更一篇关于ArcGIS API for JavaScript中关于API key的专题文章，因为我们新手在查阅ArcGIS API for JavaScript的官方文档时，[Get started]阶段就会介绍关于API key的内容，如下所示：顺便说一句，各位同学如果后续在学习过程中有对哪一块内容不清楚或产生疑问较多的话，我们可以在脱离规划好的课程目录之外，加更专题篇来解答。虽然ArcGIS API for JavaScript文档在开始起步的阶段就介
2022-07-09 07:44:16
1433
原创 6、【WebGIS实战】软件操作篇——WebGIS开发环境搭建
大家好，我是X北辰北。本文是「WebGIS实战」系列，关注这个标签，阅读所有文章，成为WebGIS开发高手。
2022-07-09 07:39:22
2123
原创 5、【WebGIS实战】软件操作篇——服务发布及权限管理
大家好，我是X北辰北。本文是「WebGIS实战」系列，关注这个标签，阅读所有文章，成为WebGIS开发高手。
2022-06-26 08:33:31
599
原创 4、【WebGIS实战】软件操作篇——数据导入及处理
大家好，我是X北辰北。本文是「WebGIS实战」系列，关注这个标签，阅读所有文章，成为WebGIS开发高手。
2022-06-26 08:29:54
597
原创 3、【WebGIS实战】WebGIS基础环境搭建
大家好，我是X北辰北。本文是「WebGIS实战」系列，关注这个标签，阅读所有文章，成为WebGIS开发高手。
2022-06-07 06:28:43
1156
3
原创 2、【WebGIS实战】WebGIS开发流程介绍
大家好，我是X北辰北。本文是「WebGIS实战」系列，关注这个标签，阅读所有文章，成为WebGIS开发高手。
2022-06-06 21:24:50
3171
原创 如何在群里正确提问
在更新其他技术文章之前，临时更新一篇文章，关于如何在群里提问或者向大佬们请教问题的正确方式。请各位仔细阅读完。随着博客更新和课程售卖，也给大家赠送了一些免费答疑的服务，看清楚了哦，是赠送。本来的愿景是想通过答疑的方式能帮大家解决学习中的问题，避免走很多弯路，毕竟自己是小白的时候也走了很多弯路，但是随着学员群体的增多，有些事情慢慢的变了味。大多数同学的方式还是可以的，有问题时直接会说有什么问题，导致了什么结果，但是还有一少部分的同学提问方式往往让人不想回复，甚至火冒三丈，例如：大佬在么？然后如果不回复
2022-04-27 17:57:10
4298
4
原创 WebGIS脚手架工具改名
考虑到之前cdmap-cli输入繁琐以及检索不友好的问题，目前cdmap-cli改名为@xuqw/gis-cli，主要变更如下：1、安装方式变更npm i @xuqw/gis-cli -g2、使用命令变更// 查看版本号gis -V//创建项目gis create除此之外其与资源并未改变，欢迎大家尝试使用，有任何需求或问题及时联系，github地址如下，欢迎大家一起贡献代码：https://github.com/xuqwCloud/gis-cli...
2022-04-11 21:29:14
535
原创 19 html2canvas实现ArcGIS API for JavaScript 4.X截图功能
html2canvas实现ArcGIS API for JavaScript 4.X截图功能
2021-12-26 10:15:53
1217
原创 Create-react-app创建的项目打包后页面空白的解决方法
问题描述：当我们使用create-react-app脚手架创建一个react项目之后，等到项目开发完成想要打包部署时会发现，通过npm run build命令打包后的项目在浏览器端访问时会出现页面空白的情况。解决方法：此类问题一般有两种解决方法，其中第一种也是最常见的，当我们打开浏览器控制台时会发现，当首页空白时浏览器控制台会报一大堆的404资源请求错误，这种情况下很好解决，我们只需要在项目根目录下的package.json中添加一行配置即可，如下："homepage": "./",
2021-11-06 09:44:17
2067
1
原创 WebGIS开发培训(ArcGIS API for JavaScript方向)
将会学到的知识1、WebGIS学习路线，就业指导2、WebGIS项目整体构建流程，从系统需求、技术选型、项目开发、部署一整套流程3、ArcGIS平台使用流程，从软件安装、数据导入、处理、服务发布、前端调用、在线数据分析等一整套流程4、主流前端框架开发基础知识（不讲解框架源码，但会提供学习资料）5、ArcGIS API for JavaScript官网知识，大约50%的官网知识（剩余50%官网知识在WebGIS开发的生涯中不会遇到，所以不用太过关注）6、Github项目代码全流程管理（
2021-07-22 22:20:55
4082
28
原创 07 Chrome浏览器捕获hover元素样式
问题描述：我们在开发web页面时肯定会遇到很多hover元素面板，这些面板有一个特点就是：当我们鼠标移动到某个icon或文字时，相应的面板才会显示，鼠标一离开icon或文字，面板会立即隐藏。所以当我们想用Chrome浏览器的开发者工具去捕获这些面板来调试其样式时会变得很困难。如下图中的灰色子菜单面板就是一个hover元素面板，它只有在我们鼠标移动到相应的主菜单选项时才会展示，鼠标离开主菜单选项后就会隐藏，所以我们在开发者工具中通过左下角的捕获图标无法捕获到它。这篇文章就给大家介绍一个小技巧，
2021-06-11 18:20:29
1835
原创 26【React基础-5】React Hook
hook出现的意义hook是react 16.8版本才增加的知识，它出现的目的就是让我们可以在函数组件中使用很多类组件中才有的特性，例如state、生命周期等。hook简介hook说白了其实就是一些react中特殊的函数，只不过这些函数允许我们通过钩子的形式钩入一些react的特性，例如我们想要在函数组件中使用state的话就不用将其转为类组件，直接使用useState()这个hook函数即可；如果想要在函数组件中使用类似于类组件的生命周期这些函数的话，直接使用useEffect()这个h.
2021-05-26 16:23:02
411
2
原创 vue项目中使用vue-router
说明此处仅做简单记录，并没有做详细的整理。操作步骤1、通过以下命令安装路由，如下：npm install vue-router --save-dev2、在src根目录下新建router文件夹，然后新建router.js文件，输入以下代码：import Vue from 'vue';import Router from 'vue-router';import DataSource from '../components/system/content/dataSour.
2021-04-16 12:54:19
609
原创 vue项目中使用vuex
说明此处仅做简单的记录，并没有详细的去整理。步骤1、通过命令在项目根目录安装vuexnpm install vuex --save-dev2、然后在src目录下新建一个store文件夹，在文件夹中新建index.js文件，在此文件中输入以下代码：import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store();export default s.
2021-04-16 12:49:00
578
1
原创 用vue脚手架搭建一个demo
概述介绍过vue脚手架@vue/cli的安装和vue基础环境的安装之后，我们简单介绍了一下vue以及其应用的场景，但都是写一些基本的小段代码，跟真正运用到项目中来比的话还差很远，这篇文章就介绍下如何用脚手架搭建基础的项目demo框架。操作步骤1、新建一个文件夹，然后在此文件夹下运行命令行窗口，通过命令vue create mydemo来创建一个项目。2、输入命令后会提示你选择一个present，默认即可，然后进入创建好的项目根目录，运行npm run serve命令.
2021-04-16 12:44:44
545
原创 vue环境搭建--脚手架
概述最近由于项目的原因，在学习react的过程中抽出时间来学习一下vue，所以特此记录一些学习笔记，中间如果有一些问题的话欢迎大家指出。按理说react和vue的思想大致是一样的，所以在看vue的官网教程时也是比较顺利的，大部分内容能看得懂。在进行vue开发之前，我们先要搭建环境，在此处我们介绍vue-cli脚手架的使用。操作步骤1、其实vue-cli是1.X和2.X中的称呼，他在3.X中的新名字叫做@vue/cli，如果你已经安装过vue-cli这个旧版本的脚手架的话，那就使用命令.
2021-04-16 12:42:04
386
原创 全国行政区划数据处理及资源目录树实例化
写在前面在做WebGIS系统开发的时候，我们经常会遇到一个需求，就是要实例化一棵关于全国行政区划的目录树，方便组织管理用户数据平台上的一些资源数据，最终的示例效果图如下：上图就是通过实例化后的一棵全国行政区划目录树。由上图可看出，我们需要初始化这棵目录树之前需要首先进行数据处理，然后再进行实例化，所以接下来请看详细的操作步骤。具体操作步骤1、数据处理1.1、首先来看一下数据处理，关于原始数据的获取，大家可以百度下载，一般来说下载下来的数据基本是shp格式，所以我们只需要在..
2021-03-17 15:28:59
1085
原创 WebGIS脚手架工具更新啦！！！
写在前面WebGIS脚手架工具cdmap-cli推出已经快一个多月了，在此期间更新迭代了6个版本，目前最新版是 v1.0.5。一个多月的时间积累了300多的下载量，目前来说成绩还算可以，希望大家在后续的项目开发过程中尝试使用cdmap-cli工具，我也会在后续不断地进行更新~趁着春节期间，对cdmap-cli中的几个问题进行了修复，让我们接下来看看到底增加了哪些东西。cdmap-cli更新日志01 去除了Git依赖早期版本中的项目创建主要是基于 download-git-repo 来
2021-02-19 00:00:49
636
原创 自动化创建WebGIS项目
写在前面当你在开发WebGIS项目的时候是否为以下问题而烦恼呢？如何在Vue或React框架中配置ArcGIS API for JavaScript； ArcGIS API for JavaScript中每个API模块的知识点都了解，但是具体的功能开发却不知道如何组织； 如何配置Vue的路由跳转、如何配置Vue的全局状态管理，如果切换成React又该如何做呢； 一个完整的WebGIS项目中到底需要哪些插件呢，这些插件不同的版本又改如何去搭配呢； ……如果你也有以上同样的疑惑或者还有更多的疑
2021-02-01 14:37:12
1281
2
原创 18 ArcGIS API for JavaScript 4.18绘制线段和面要素之后获取长度及面积
写在前面上一文中我们介绍了一下如何通过鼠标点击的形式绘制点、线、面要素，大家看了代码之后应该感觉其实很简单，就是使用了"esri/widgets/Sketch/SketchViewModel"这个API模块来实现的。大致实现流程如下：实例化SketchViewModel 设置点、线、面三种符号的样式 激活SketchViewModel相应的绘制工具 绘制以上就是通过鼠标点击的形式绘制点、线、面要素的整体流程，我们可以通过下面绘制一个点要素的代码来看一下这个流程，代码如下：// 绘制
2021-01-08 15:33:45
1949
1
原创 17 ArcGIS API for JavaScript 4.18通过鼠标绘制点、线、面
写在前面此处仅仅是用代码记录一下通过鼠标拖拽的方式绘制点、线、面要素的过程，代码很简单，就没必要写过多的介绍了。最终效果整体代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> ..
2020-12-22 10:53:34
2554
2
原创 16 ArcGIS API for JavaScript 4.18基于ES Modules的新开发方式@arcgis/core
写在前面随着前端主流框架Vue和React的发展，大家在做WebGIS项目开发时是不是也在vue或者react项目里使用ArcGIS API for JavaScript呢，之前我们在vue或者react项目里使用ArcGIS API for JavaScript的时候一直给大家推荐"esri-loader"的AMD方式，示例代码如下所示(在这里仅仅演示React项目中的使用，Vue中的使用方式见文章后半部分)：//直接使用esri-loader的then()方法链式回调import React
2020-12-18 16:12:00
9747
17
原创 15 ArcGIS JS API 4.17更改测量控件黄白相间的默认样式
问题描述在使用ArcGIS API for JavaScript 4.17开发项目时，有一个需求是需要在地图上添加距离测量和面积测量的控件，这其实很简单，直接调用ArcGIS JS API自带的测量控件就可以实现，但是客户对控件自带的黄白相间、并且略粗的默认样式不满意，所以需要修改ArcGIS JS API自带的测量控件默认样式。我们先来看看ArcGIS JS API自带的默认样式：然后再来看看客户想要的样式：其实说白了就是要更改默认样式的宽度和颜色。解决思路..
2020-12-17 09:01:31
720
2
原创 04【ArcGIS Pro SDK for Microsoft .NET】系统部署
写在前面前面三篇文章大致介绍了ArcGIS Pro SDK for Microsoft .NET开发时的环境搭建过程、自定义页面添加过程以及相应的系统demo开发过程，这篇文章我们来介绍下开发完成后的系统如何在其他机器上安装部署。前提条件要部署的机器上安装和开发时相同版本的ArcGIS Pro操作步骤1、ArcGIS Pro SDK for Microsoft .NET开发后的系统要部署的话其实很简单，我们首先在VS里面的菜单面板确认下，你最后一次运行项目是用了哪种模式，如下：..
2020-12-07 17:29:08
836
原创 ArcGIS Pro 2.5安装中文汉化包时报错“指定路径为空”
问题描述之前在电脑上安装的是ArcGIS Pro 2.5版本的英文版，后期需要中文包的时候就安装了Pro的中文包，但是有一次将Pro卸载后，自己闲着没事干把Pro在本机上的含有离线许可的文件夹给删了，删的过程中可能不小心多删了其他文件，然后就出现了下述问题：后期不管是ArcGIS Pro 2.5还是2.6版本都能重新安装，也能正常使用，但是如果要安装中文包的话，就会报错说"指定路径为空"，如图：解决方法搞了好久都没搞定，最后在王老板的帮助下解决了，以下是解决流程：1、打开自己电.
2020-12-02 12:42:46
7646
8
原创 03【ArcGIS Pro SDK for Microsoft .NET】系统界面布局及定制菜单
写在前面前面的文章介绍了ArcGIS Pro SDK for Microsoft .NET开发环境的搭建，并且我们为创建的demo增加了自己的登陆界面，但是里面的登录逻辑并没有给大家进行详细的介绍，因为那些东西其实是完完全全属于WPF编程的知识，跟Pro SDK关系不大。这篇文章我们来给大家介绍下如何在ArcGIS Pro SDK for Microsoft .NET开发过程中，为我们新建的项目demo进行系统布局，并添加相应的菜单选项。操作步骤1、通过第一篇文章中创建demo的方式重新创.
2020-12-01 22:30:05
3878
原创 02【ArcGIS Pro SDK for Microsoft .NET】开发实现登录页面
写在前面前一篇文章介绍了ArcGIS Pro SDK for Microsoft .NET开发环境的搭建，并且在文章最后我们创建了一个demo并让它成功运行。这一篇文章我们介绍下如何在前面创建的demo基础之上增加一个登录页面。操作步骤1、打开上一节创建的demo代码，然后在"UI"文件夹上面鼠标右击，依次选择【添加 | 新建项】，在打开的新建项窗口选择新建一个WPF的窗口，并为其取名为"Login"，如下图所示：2、新建Login窗口之后，我们的右侧项目代码UI目录下会出现新建的.
2020-11-13 21:11:19
867
1
原创 01【ArcGIS Pro SDK for Microsoft .NET】环境搭建及Demo创建
写在前面ArcGIS Pro SDK for Microsoft .NET的开发环境配置其实很简单，它不用像配置前端开发环境那样安装nodeJS啥的，我们只需要安装一个Visual Studio就可以了。电脑已有环境windows 10 ArcGIS Pro 2.5操作步骤1、到网站(https://visualstudio.microsoft.com/zh-hans/downloads/)下载VS，目前VS2017和VS2019的社区版是免费的，所以我们直接下载社区版安装即可，如下：
2020-11-13 17:18:24
2003
原创 25【React基础-4】组件 & Props
写在前面本文是【React基础】系列的第四篇文章，这篇文章中我们介绍一下在react开发中经常提及的"组件"以及"props"到底是什么东西，以及它们之前的关系，并且简单介绍下组件的种类：函数组件和类组件。概述上文中我们简单介绍了"元素"的概念，并且了解到"元素构成组件，组件构成页面"这样一个规律。所以通过上文了解了元素之后，这篇文章我们来继续了解下组件的相关概念。项目demo地址https://github.com/xuqwCloud/reactbasic组件简介组件其实就
2020-11-02 11:02:21
396
原创 24【React基础-3】元素渲染
写在前面本文是【React基础】系列的第三篇文章，这篇文章中我们介绍一下在react中的"元素"这个概念，并且了解下它跟我们传统的浏览器DOM元素有什么不同。概述上一篇文章我们为大家介绍了react中独特的代码编写方式——JSX。通过上文的了解，我们知道我们可以将一段HTML标签代码直接赋值给一个JS变量，并且将这个变量传给react相应的方法之后，前端浏览器页面就会看到预期的显示效果，那在这个过程中，我们本文所介绍的"元素"这个东西到底是什么呢，我们接下来给大家简单介绍一下。项目demo地
2020-10-24 09:08:05
341
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人