cyoubo的专栏

任务准备安装AntD并实现按需加载安装esri-leaflet和leaflet具体任务主组件中加载一个矢量地图并确定三个功能按钮：清除选区：移除在当前地图上已经绘制的选区圈选查询：在地图上以鼠标交互方式绘制圆形选区，并利用绘制结果进行空间查询多变形查询：在地图上以鼠标交互方式绘制多边形选区，并利用绘制结果进行空间查询查询结果以AntD-drawer组件为容器，展示结果的属性表运行效果基本代码组件css#map_interactspatialquerytask {

问题描述esri-leaflet以插件(plugins)形式，直接在前端提供了要素图层的自动聚合功能,即esri.cluster.Featurelayer在react环境下，esri.cluster.Featurelayer的使用与直接引入CDN有一些使用的细节差异环境准备安装lealet/esri-leaflet操作步骤省略安装esri-leaflet-cluster插件npm install esri-leaflet-cluster leaflet.markercluste

前置说明对于通过Arcgis-server直接发布的切片地图(不是图层)，esri-leaflet可以对其进行解析与加载esri-leaflet本质上是对leaflet的layer进行了扩展，使其能够与map对象兼容，但没有对map进行扩展因此，对于不是wkid不是3857(即leaflet的map默认投影)的切片地图，在叠加时一定要手工设置map的crs参数leaflet的map不会因为初始化layer的crs自动调整自己的crs环境准备准备切片服务个人在arcgis-server上发布

任务说明默认情况下leaflet的地图容器的坐标系时3857不论图层是什么坐标系，leaflet都会自动进行转换，由此带来问题：对于动态图层而言，坐标系转换有可能跨椭球，因此偏移量非常大对应切片图层而言，无法进行动态投影，因此切片可能存储无法加载的问题因此需要对map容器的坐标系统进行修改，满足实际叠加图层坐标系的需求任务准备安装proj4相关包npm install proj4 proj4leaflet其中proj4用于完成地图投影和坐标变换，proj4leaflet是

环境准备与基本使用安装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以往直接和标签

文章目录环境准备与基本使用基本案例加载在线瓦片地图实例代码代码说明组件式Popup问题描述解决办法实例代码代码说明环境准备与基本使用leftlet包安装npm install leafletcss文件引入方式1：在根元素的css文件进行全局引用@import url("../node_modules/leaflet/dist/leaflet.css");方式2：在组件的jsx文件中进行引用import "../node_modules/leaflet/dist/leafl