如何在反应传单地图上显示 geodjango rest api 响应

如何解决如何在反应传单地图上显示 geodjango rest api 响应

我收到来自 django rest 的以下回复：

[
   {
    "area": 0.0,"perimeter": 0.0,"town_name": "Cheptais","town_id": 4,"town_type": "Market Centres","geom": "SRID=4326;MULTIPOINT (34.4500007629395 0.800000011920929)"
},{
    "area": 0.0,"town_name": "Dadaab","town_id": 3,"town_type": "Trading Centre","geom": "SRID=4326;MULTIPOINT (40.3199996948242 0.070000000298023)"
},"town_name": "Eldas","geom": "SRID=4326;MULTIPOINT (39.5499992370605 2.52999997138977)"
}
]

以这种方式使用 axios 获取端点：

await axios
  .get("/api/gis/areas/",headers)
  .then((response) => {
    this.setState({ places: response.data });
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

}

 const handleEachFeature = (feature,layer) => {
  layer.bindPopup('<font size="4">' + feature.properties.town_name);
}

使用 react Leaflet，我创建了一个地图实例，如下所示：

<Map className="map" onEachFeature={handleEachFeature} style={{height:'100%',width:'100%'}}>
      <GeoJSON data={places}/>
</Map>

但是，这不会在我的地图上覆盖 api 响应..我错过了什么吗？

解决方法

正如我在评论中提到的，您必须将 wkt 转换为 geojson 才能使其正常工作，有几种解决方案可以实现这种转换，但这里最简单的一种是导入 wicket 库（只需使用 npm install wicket） ，您还需要使用唯一键创建，这是来自相同数据的工作组件（请注意，我没有使用 axios，因为我在本地测试数据），：

import React,{ Component } from 'react'
import './styles/styles.css'
import {Map,TileLayer,GeoJSON} from 'react-leaflet'
import './leaflet/leaflet.css'
import Wkt from 'wicket'
import L from 'leaflet'
import Data from '../../Data/wkt_file.json'

import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

// this is for maker to show up:
let DefaultIcon = L.icon({
    iconUrl: icon,shadowUrl: iconShadow
});

L.Marker.prototype.options.icon = DefaultIcon;

export default class map extends Component {
    constructor(props){
        super(props);
        this.state={
            wkt_json_holder:[],json_ob:<></>,json_key:1,tile:'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png',}
        this.setGeoJSON = this.setGeoJSON.bind(this)
        this.onEach = this.onEach.bind(this)
    }
    async componentDidMount(){
        await this.setState({wkt_json_holder:Data});
        this.setGeoJSON()
    }

    setGeoJSON=()=>{
        let json_data = this.state.wkt_json_holder.map(point=>{
            let wkt_geom = point['geom'].replace('SRID=4326;','')
            let wkt = new Wkt.Wkt();
            wkt.read(wkt_geom)
            let geojson_geom = wkt.toJson()
            let coords = geojson_geom['coordinates']
            let type = geojson_geom['type']
            let geojson_obj={
                "type": "Feature","geometry": {
                    'type':type,'coordinates':coords
                },"properties": {
                    "town_name": point['town_name'],"town_id": point['town_id'],"town_type":point['town_type'],"perimeter": point['perimeter'],"area": point['area']
                }
            }
              return geojson_obj
            }
              
            )
            console.log(json_data)
            let json_ob= <GeoJSON data={json_data} key={1} style={{color:'red'}} onEachFeature={this.onEach}/>
            this.setState({json_ob})
    }

    // handling Popups 
    onEach(feature,layer){
        console.log(feature)
        let PopupContent = `
            <Popup>
                <p>town id:${feature.properties.town_id}</p>
                <p>town name:${feature.properties.town_name}</p>
            </Popup>
        `
        layer.bindPopup(PopupContent)
    }

    render() {
                
        return (
        <div style={{width:'100%',height:'100%'}}>
            <Map center={[2.197035,38.703588]} zoom={6} style={{width:'100%',height:'100%'}}>
                <TileLayer url={this.state.tile}/>
                {this.state.json_ob}
            </Map>
                
        </div>
        )
    }

    
}