环境准备与基本使用

安装

npm install leaflet esri-leaflet

引入api

import L from "leaflet"
import * as esri from 'esri-leaflet';

引入css

import "../node_modules/leaflet/dist/leaflet.css"

补充说明
1. esri-leaflet实际是在leaflet基础上继承扩展而来的，因此要使用esri-leaflet必须安装leaflet
2. 以往直接和标签引入leaflet和esri-leaflet的cdn后，可以之际使用L.esri.xxx调用esri-leaflet的相关api
3. 但在react中以import方式导入时，建议两个分开都要导入，并直接使用esri.xxx调用esri-leaflet的相关api

注意事项
上述关于引入说明，并不是最好的解决办法，只是暂时没有找到更好的处理方式

基本案例

加载MapService

前置说明

这里是将Arcgis-server中具有多个图层的地图对象整体当作一个leaflet中的一个layer对象进行添加。因此，不论Arcgis-server的地图中有多少各图层，leaflet都认为只有一个图层，简单来说url地址不需要带图层索引号

主要步骤

创建地图对象，并配置地图初始化属性（中心点，缩放层级）
创建dynamicMapLayer对象，并配置图层初始化属性（url）
加载到地图中
扩展步骤：在地图上绑定click事件，实现图层的indentify查询

实例代码

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import "./simpleDynamicMapLayer.css"
import L from "leaflet"
import * as esri from 'esri-leaflet';
import { message } from 'antd';
import PropertiesPopup from "../testPopup/PropertiesPopup"function SimpleDynamicMapLayer(props) {useEffect(()=>{//创建地图对象let map = L.map('map').setView([29.654,106.145],13);//创建dynamicMapLayer对象，注意url结尾没有图层索引let layer = esri.dynamicMapLayer({ url: "https://localhost:6443/arcgis/rest/services/02_Tky_GDCGK/MapServer"})//添加到地图中layer.addTo(map);//向地图对象绑定click事件，执行identify查询map.on("click", (evt)=>{//注意查询过程利用链式语法执设置查询才是参数和回调layer.identify().at(evt.latlng).on(map).run((error, result) => {if(error){message.error(error);return}if(result.features.length>0){let div = document.createElement('div');ReactDOM.render(PropertiesPopup(result.features[0].properties), div);L.popup().setLatLng(evt.latlng).setContent(div).openOn(map);}})})},[])return (<div id = "map"></div>);
}export default SimpleDynamicMapLayer;

代码说明

执行identify查询的链式语法各函数的意义

identify()：创建一个identify任务并返回任务对象
at():指定indentify任务的中心点参数并返回任务对象
on():指定indentify任务的在的空间边界，默认为地图容器的空间范围，返回任务对象
run():执行indentify任务，指定执行后的回调，具体参数包括：
1. error：执行失败的原因字符串
2. result：查询的要素结果集合，一般可以用result.features访问到具体的结果要素列表

特别地，在esri-leaflet中所有的查询任务都是在run函数中指定回调函数，后期在做空间查询或属性查询时可沿用此规律

加载FeatureService

前置说明

这里是将一个Arcgis-server中的FS图层当作leaflet的一个图层，因此fs的url结尾要带图层索引号

主要步骤

创建地图对象，并配置地图初始化属性（中心点，缩放层级）
创建featureLayer对象，并配置图层初始化属性（url，要素渲染样式）
加载到地图中

实例代码

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import L from "leaflet"
import * as esri from "esri-leaflet"
import "./simpleFeatureLayer.css"
import SimplePropertiesPopup from "../testPopup/PropertiesPopup"function SimpleFeatureLayer(props) {useEffect(()=>{let map = L.map("map2").setView([29.776,106.308], 13);//注意示例中，0图层是一个点要素图层，其样式一定要在pointToLayer及进行指定let layer = esri.featureLayer({ url:"http://localhost:6080/arcgis/rest/services/02_Tky_GDCGK/FeatureServer/0",pointToLayer: function (geojson, latlng) {return L.circleMarker(latlng, { radius: 5, color: "#2d84c8" })}})//注意：这里的click事件是绑定在FeatureLayer上的，而不是Maplayer.on("click", (event)=>{let {properties} = event.sourceTarget.feature;let div = document.createElement('div');ReactDOM.render(SimplePropertiesPopup(properties), div)L.popup().setLatLng(event.latlng).setContent(div).openOn(map);})layer.addTo(map)},[])return (<div id="map2"></div>);
}export default SimpleFeatureLayer;

代码说明

整体的加载步骤过程与dynamicMapLayer没有太大区别
因为featurelayer是一个可交互图层对象，因此click事件可以直接绑定到图层上，而不是map中
对于点状矢量图层一定要设置要通过config对象中的pointToLayer: function (geojson, latlng)回调设置要素样式，因为不论FS自身是什么样式，leaflet都不会加载，而是会按照默认leaflet自带的图标进行展示。
对于线状或面状图层,leaflet可以自动获得FS配置的要素样式，如无特殊需要可以不用单独配置，如果要在前端修改，指定style: function (feature)回调进行调整

React Leaflet Esri 安装与使用相关推荐

React Leaflet Esri 聚集要素
问题描述 esri-leaflet以插件(plugins)形式,直接在前端提供了要素图层的自动聚合功能,即esri.cluster.Featurelayer 在react环境下,esri.cluste ...
gatsby_如何使用Gatsby和React Leaflet创建自己的圣诞老人追踪器
gatsby The Christmas season is a magical time of year. We have Santa flying around spreading cheer a ...
React Native的安装和初始化(android /ios)
2019独角兽企业重金招聘Python工程师标准>>> 好久没有写东西,最近想学一下React Native,借此写一写笔记 React Native 的安装使用React Nat ...
react leaflet_如何使用React Leaflet和Leaflet Gatsby Starter设置自定义Mapbox底图样式
react leaflet Building maps can be pretty powerful, but often you're stuck with open source options ...
从头开始react后台管理系统-安装ant-Design
从头开始react后台管理系统-安装ant-Design introduce 在做微信小程序, 想着顺便做一个管理系统的随便扯扯我是个菜鸡,很菜很菜的菜鸡,春招各家凉,现在还是0offer.心情很 ...
React React-Redux的安装，使用
本人第react-redux 小白一个,如果你是大佬,路过即可其实在使用redux 之前,我并不了解redux 的作用,我在编写react的过程中遇到一个登录的问题在不断的使用React的过程中, ...
巩固——React的详细安装教程
react中文官网如图所示.在中文官网 https://reactjs.bootcss.com/ 中也有入门教程. 1.首先,要安装 Node.js 及 NPM . 具体参考之前的文章:Nodejs安 ...
React学习笔记——vscdoe中react插件的安装
步骤打开VSCODE的扩展商店搜索react选择此图标并点击安装该插件的最常用的两个代码片段 rcc 和 rfc rcc :react class component rfc :react fu ...
react + Leaflet初始化
效果源码 import { useState, useEffect, useRef } from 'react'import L from 'leaflet' // 不引入样式文件地图会错乱或不显示 ...

React Leaflet Esri 安装与使用

环境准备与基本使用

基本案例

加载MapService

前置说明

主要步骤

实例代码

代码说明

加载FeatureService

前置说明

主要步骤

实例代码

代码说明

React Leaflet Esri 安装与使用相关推荐

最新文章

热门文章