![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 67
地图工程师
世界上只有一种英雄主义
展开
-
基于AntD-Table的可编辑输入表格
文章目录需求描述基本要实现的共嗯那个不能实现的功能设计思路结构方案基于适配器模式AntD的table定制实现结构Adapter操作类职责功能技术重点adapter 操作类相关部分单元格菜单职责功能技术重点实例代码可编辑表格组件功能职责技术重点实例代码需求描述基本要实现的共嗯那个基于AntD的table控件,实现类似PPT中【表格】的功能可以基于配置的行数(nRow)、列数(nColumn)信息生成指定尺寸的表格,且每一个单元格都是一个可入输入框每一个输入框在输入完成后自动将输入值记录到组件sta原创 2021-10-06 14:46:24 · 1859 阅读 · 0 评论 -
React Leaflet Esri 交互式空间查询
任务准备安装AntD并实现按需加载安装esri-leaflet和leaflet具体任务主组件中加载一个矢量地图并确定三个功能按钮:清除选区:移除在当前地图上已经绘制的选区圈选查询:在地图上以鼠标交互方式绘制圆形选区,并利用绘制结果进行空间查询多变形查询:在地图上以鼠标交互方式绘制多边形选区,并利用绘制结果进行空间查询查询结果以AntD-drawer组件为容器,展示结果的属性表运行效果基本代码组件css#map_interactspatialquerytask {原创 2021-06-24 17:26:21 · 912 阅读 · 1 评论 -
React Leaflet Esri 聚集要素
问题描述esri-leaflet以插件(plugins)形式,直接在前端提供了要素图层的自动聚合功能,即esri.cluster.Featurelayer在react环境下,esri.cluster.Featurelayer的使用与直接引入CDN有一些使用的细节差异环境准备安装lealet/esri-leaflet操作步骤省略安装esri-leaflet-cluster插件npm install esri-leaflet-cluster leaflet.markercluste原创 2021-06-24 10:51:48 · 304 阅读 · 0 评论 -
React Leaflet Esri 静态切片加载
前置说明对于通过Arcgis-server直接发布的切片地图(不是图层),esri-leaflet可以对其进行解析与加载esri-leaflet本质上是对leaflet的layer进行了扩展,使其能够与map对象兼容,但没有对map进行扩展因此,对于不是wkid不是3857(即leaflet的map默认投影)的切片地图,在叠加时一定要手工设置map的crs参数leaflet的map不会因为初始化layer的crs自动调整自己的crs环境准备准备切片服务个人在arcgis-server上发布原创 2021-06-23 16:46:02 · 437 阅读 · 0 评论 -
React Leaflet Esri 自定义地图坐标系
任务说明默认情况下leaflet的地图容器的坐标系时3857不论图层是什么坐标系,leaflet都会自动进行转换,由此带来问题:对于动态图层而言,坐标系转换有可能跨椭球,因此偏移量非常大对应切片图层而言,无法进行动态投影,因此切片可能存储无法加载的问题因此需要对map容器的坐标系统进行修改,满足实际叠加图层坐标系的需求任务准备安装proj4相关包npm install proj4 proj4leaflet其中proj4用于完成地图投影和坐标变换,proj4leaflet是原创 2021-06-23 16:45:13 · 746 阅读 · 0 评论 -
React Leaflet Esri 安装与使用
环境准备与基本使用安装npm install leaflet esri-leaflet引入apiimport L from "leaflet"import * as esri from 'esri-leaflet';引入cssimport "../node_modules/leaflet/dist/leaflet.css"补充说明esri-leaflet实际是在leaflet基础上继承扩展而来的,因此要使用esri-leaflet必须安装leaflet以往直接和标签原创 2021-06-23 16:40:34 · 617 阅读 · 0 评论 -
React与Leaflet 环境安装与基本使用
文章目录环境准备与基本使用基本案例加载在线瓦片地图实例代码代码说明组件式Popup问题描述解决办法实例代码代码说明环境准备与基本使用leftlet包安装npm install leafletcss文件引入方式1:在根元素的css文件进行全局引用@import url("../node_modules/leaflet/dist/leaflet.css");方式2:在组件的jsx文件中进行引用import "../node_modules/leaflet/dist/leafl原创 2021-06-23 16:36:38 · 1434 阅读 · 0 评论 -
21 - Dva 框架使用 3 - 异步操作与模拟网络请求
文章目录基本要求实现准备涉及概念与基础主要操作步骤实现结果无代码部分说明准备模拟请求数据定义ProdcutModelProductPage组件ProductTool组件ProductContext组件应用总结Dva中的模拟数据容器异步Action的执行业务逻辑的进一步解耦基本要求可以从首页跳转至page页面,且在page页面中包含tool和context两个组件tool实现以下三个功能向内容列表中添加一个元素访问静态的测试数据,并更新整个内容列表访问动态的mock数据,并更新整个内容列表原创 2020-12-10 09:01:59 · 590 阅读 · 0 评论 -
20 - Dva 框架使用 2 - 页面组合与model集成
文章目录基本要求实现准备涉及概念与技术主要操作步骤实现结果MainModel定义与注册MainPage组件定义与路由配置定义功能组件并组合入口程序监听跳转应用总结Model注册与使用组件组合Model与组件通讯基本要求在空白脚手架的基础上添加一个跳转页面,记为MainPage,用于实现点击计数功能在MainPage中组合两个功能组件,分比记为MainToolComponent和MainContextComponet在MainToolComponent中添加两个按钮,实现页面中“增加技术”和“减少计原创 2020-12-10 08:59:51 · 578 阅读 · 0 评论 -
19 - Dva框架基础
文章目录基本概述Dva特征项目文件结构说明dva概念关系图dva开发设计要求主程序与容器组件路由挂接容器组件与功能组件分离功能组件与Model分离Model与基础操作分离脚手架安装与使用基本使用集成AntD基本概述Dva特征框架性:是完整的应用开发框架,而不是针对某个特定问题的插件自动集成了redux,router等常用插件,并进行良好的集成配置可以直接在框架基础上完成业务开发工作规范性:定义了项目中各类文件的物理组织形式定义了各个部件在项目的逻辑结合方式定义了数据和页面的访问原创 2020-12-10 08:53:47 · 961 阅读 · 1 评论