带有Mapbox的本地GeoJSON文件

问题描述

我正在尝试将本地文件加载到MapBox并收到错误消息： ERROR parsererror No conversion from text to geojson来自ajax函数和 Error {message: "Input data is not a valid GeoJSON object."}用于evented.js

结构化的功能如下：

{ "type": "Feature","properties": { "score": 0.77,"pokemon": "Squirtle","color": "#42b9f5" },"geometry": { "type": "Point","coordinates": [ 2.768403197476528,39.806888683241638 ] } }

我正在使用Python创建geoJSON文件，@L_502_0@可以很好地加载它而不会出现任何错误，我认为这与我的Ajax请求有关。

<!DOCTYPE html>
<html>
<head>
    <Meta charset='utf-8' />
    <title></title>
    <Meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src='https://api.tiles.mapBox.com/mapBox-gl-js/v1.11.1/mapBox-gl.js'></script>
    <link href='https://api.tiles.mapBox.com/mapBox-gl-js/v1.11.1/mapBox-gl.css' rel='stylesheet' />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
</head>
<body>

<div id='map'></div>

<script>

    mapBoxgl.accesstoken = 'MY_TOKEN';

    var map = new mapBoxgl.Map({
        container: 'map',style: 'mapBox://styles/mapBox/streets-v11'
    });

    map.on('style.load',function() {
        map.addSource("pokemons",{
            type: "geojson",data: 
                $.ajax({
                    type: "GET",file: "../data_wrangling/points.geojson",dataType: "geojson",success: function(data) {
                        return data;
                    },error: function(jqXHR,textStatus,errorThrown) {
                        console.log('ERROR',errorThrown);
                    }
                })
        })
    })

</script>

解决方法

您正在将ajax对象传递为不支持的数据。尝试先获取数据，然后再将其传递到public function getItems($config){ //Sample data - this could be a DB call,a list in a folder,or a simple array like this $sampleArray[ "id1" => "ID 1 Label","id2" => "ID 2 Label","id3" => "ID 3 Label",]; $optionList = []; $count=0; //Cycle through each item,and add it to the desired dropdown list foreach ($sampleArray as $id => $label) { $optionList[$count] = [0 => $label,1 => $id]; $count++; } //Pass the data back to the tt_content.php page $config['items'] = array_merge($config['items'],$optionList); return $config; }中。 This demo可能会有所帮助。

或者，由于您的geojson是stored at an URL，因此您可以传递该URL而不是ajax对象/承诺。

ajax geojson mapbox