嗨!
我需要帮助,拜托了。
我可以创建悬停弹出在经验生成器(开发者版)?
我知道代码什么可以做悬停弹出。我看了很多文章,但还是不知道该在哪个地方和哪个文件中添加。
也许它可以在map初始化的地方完成。但我找不到它在代码中的位置。
谢谢你的帮助!
解决了!转到解决方案。
在你的代码中featureLayer是未定义的。如果你想引用某个特定的特性层,你需要在设置中添加另一个dataSourceSelector。TSX,然后使用该数据源来获得特征层。而且,在timer回调中没有执行hitTest,所以当你移动鼠标时,它就会运行。
这是一个粗略的解决方案。对于计时器回调,我们调用一个名为doHitTest的新函数,该函数使用指针事件在mapview上运行hitTest。一个弹出窗口将显示所有的图层图形,这些图层图形在该点截取了地图几何。
/** @jsx jsx */ import {React, AllWidgetProps, jsx} from 'jimu-core' import {JimuMapViewComponent, JimuMapView} from "jimu-arcgis";导出默认类Widget扩展React。PureComponent,任何> {状态= {jimuMapView:零,计时器: null }; doHitTest = (evt: PointerEvent) => { if(this.state.jimuMapView){ // Run hitTest on the map view using the pointer event this.state.jimuMapView.view.hitTest(evt).then((response) => { if(response.results.length > 0){ const graphicResults = []; // array to hold graphic results // Loop through the hitTest results for(const r of response.results){ // If r has a GraphicHit if(r.graphic){ // add it to the array of graphics graphicResults.push(r.graphic) } } if(graphicResults.length > 0){ // Open popup with the features from graphicResults this.state.jimuMapView.view.popup.open({ location: graphicResults[0].geometry.centroid, features: graphicResults }); } } }) } } activeViewChangeHandler = (jmv: JimuMapView) => { if (jmv) { this.setState({ jimuMapView: jmv }); // register the pointer-move event handler on the map view jmv.view.on("pointer-move", (evt) => { // if there is already a timer, cancel it if(this.state.timer){ clearTimeout(this.state.timer) } // set new timer that will call doHitTest after the interval // pass the pointer-move event as the parameter to doHitTest this.setState({ timer: setTimeout(this.doHitTest, 2000, evt) }) }); } }; render() { return ( {this.props.hasOwnProperty("useMapWidgetIds") && this.props.useMapWidgetIds && this.props.useMapWidgetIds[0] && ( ) } ); } }
您可以创建一个自定义小部件,并在小部件代码中实现此行为。
下面是一个修改版本的获取地图坐标示例,它显示了仅在悬停在一个点上2秒后的纬度长:
/ /小部件。tsx /** @jsx jsx */ import {React, AllWidgetProps, jsx} from 'jimu-core' import {JimuMapViewComponent, JimuMapView} from "jimu-arcgis";import Point from“esri/geometry/Point”;导出默认类Widget扩展React。PureComponent,任何> {状态= {jimuMapView: null, latitude: "", longitude: "", timer: null }; setLatLong = (lat: number, long: number) => { this.setState({ latitude: lat.toFixed(3), longitude: long.toFixed(3) }); } activeViewChangeHandler = (jmv: JimuMapView) => { if (jmv) { this.setState({ jimuMapView: jmv }); jmv.view.on("pointer-move", (evt) => { if(this.state.timer){ clearTimeout(this.state.timer) } const point: Point = this.state.jimuMapView.view.toMap({ x: evt.x, y: evt.y }); this.setState({ timer: setTimeout(this.setLatLong, 2000, point.latitude, point.longitude) }) }); } }; render() { return ( {this.props.hasOwnProperty("useMapWidgetIds") && this.props.useMapWidgetIds && this.props.useMapWidgetIds[0] && ( ) } Lat/Lon: {this.state.latitude} {this.state.longitude}
); } }
@JamesGough,非常感谢!
我在弹出窗口中使用了这段代码:
视图。在(“pointer-move”,函数(事件) {视图。hitTest(事件).然后(function (response) {if (response.results.length) {var graphic = response.results.length。过滤器(函数 (result) { // check if the graphic belongs to the layer of interest return result.graphic.layer === featureLayer; })[0].graphic; view.popup.open({ location: graphic.geometry.centroid, features: [graphic] }); } else { view.popup.close(); } }); });
我试着让他适应你的例子,但不能在正确的方式(得到问题与“featureLayer”或“[图形]”)。
是的,当然。非常感谢。
在你的代码中featureLayer是未定义的。如果你想引用某个特定的特性层,你需要在设置中添加另一个dataSourceSelector。TSX,然后使用该数据源来获得特征层。而且,在timer回调中没有执行hitTest,所以当你移动鼠标时,它就会运行。
这是一个粗略的解决方案。对于计时器回调,我们调用一个名为doHitTest的新函数,该函数使用指针事件在mapview上运行hitTest。一个弹出窗口将显示所有的图层图形,这些图层图形在该点截取了地图几何。
/** @jsx jsx */ import {React, AllWidgetProps, jsx} from 'jimu-core' import {JimuMapViewComponent, JimuMapView} from "jimu-arcgis";导出默认类Widget扩展React。PureComponent,任何> {状态= {jimuMapView:零,计时器: null }; doHitTest = (evt: PointerEvent) => { if(this.state.jimuMapView){ // Run hitTest on the map view using the pointer event this.state.jimuMapView.view.hitTest(evt).then((response) => { if(response.results.length > 0){ const graphicResults = []; // array to hold graphic results // Loop through the hitTest results for(const r of response.results){ // If r has a GraphicHit if(r.graphic){ // add it to the array of graphics graphicResults.push(r.graphic) } } if(graphicResults.length > 0){ // Open popup with the features from graphicResults this.state.jimuMapView.view.popup.open({ location: graphicResults[0].geometry.centroid, features: graphicResults }); } } }) } } activeViewChangeHandler = (jmv: JimuMapView) => { if (jmv) { this.setState({ jimuMapView: jmv }); // register the pointer-move event handler on the map view jmv.view.on("pointer-move", (evt) => { // if there is already a timer, cancel it if(this.state.timer){ clearTimeout(this.state.timer) } // set new timer that will call doHitTest after the interval // pass the pointer-move event as the parameter to doHitTest this.setState({ timer: setTimeout(this.doHitTest, 2000, evt) }) }); } }; render() { return ( {this.props.hasOwnProperty("useMapWidgetIds") && this.props.useMapWidgetIds && this.props.useMapWidgetIds[0] && ( ) } ); } }
@JamesGough,你好!
你能给点建议吗?
你说得对。我想参考特定的功能层。所以我改变了设置。tsx,并获得机会从我的地图小部件选择特征层(我想创建弹出什么可能能够为特定层,因为现在悬停弹出活跃的所有图形层)。但是悬停弹出窗口不能使用它。
你能详细介绍DataSourceSelector吗?例如,如何获得悬浮弹出的功能层?
有小部件。TSX和设置。tsx文件的附件(.zip与hoverPopup小部件)。这也是我的设定。tsx变化:
import {React, Immutable, IMFieldSchema, UseDataSource} from 'jimu-core' import {AllWidgetSettingProps} from 'jimu-for-builder' import {MapWidgetSelector} from 'jimu-ui/advanced/setting-components' import {DataSourceSelector, AllDataSourceTypes, FieldSelector} from 'jimu-ui/advanced/data-source-selector'Import {render} from '@testing-library/react';import {WebMapDataSourceImpl} from 'jimu-arcgis/arcgis-data-source';设置(道具:AllWidgetSettingProps<{}>){const onMapWidgetSelected = (useMapWidgetIds: string[]) =>{道具。onSettingChange({id: props。id, useMapWidgetIds: useMapWidgetIds});} const onFieldChange = (allSelectedFields: IMFieldSchema[]) =>{道具。onSettingChange({id: props。id, useDataSources:[{…道具。useDataSources[0],……{fields: allSelectedFields.map(f => f.jimuName)}}] }); } const onToggleUseDataEnabled = (useDataSourcesEnabled: boolean) => { props.onSettingChange({ id: props.id, useDataSourcesEnabled }); } const onDataSourceChange = (useDataSources: UseDataSource[]) => { props.onSettingChange({ id: props.id, useDataSources: useDataSources, }); } return ( { props.useDataSources && props.useDataSources.length > 0 && } ) };