React Leaflet Esri 安装与使用

环境准备与基本使用

1. 安装

npm install leaflet esri-leaflet

2. 引入api

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

3. 引入css

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

3. 补充说明
   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地址不需要带图层索引号

主要步骤

1. 创建地图对象，并配置地图初始化属性（中心点，缩放层级）
2. 创建dynamicMapLayer对象，并配置图层初始化属性（url）
3. 加载到地图中
4. 扩展步骤：在地图上绑定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查询的链式语法各函数的意义

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

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

加载FeatureService

前置说明

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

主要步骤

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

实例代码

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上的，而不是Map
        layer.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;

代码说明

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