Web 无法使用OpenLayer

我对网络语言非常陌生，我必须在页面中集成地图。我正在Visual Studio 2015中使用cshtml

为此，我使用

ol.js

获取了一个代码。必须显示地图，对于我表格中的每个值，我从IP定位城市/国家，并显示每个国家的项目编号

这是我的Index.cshtml

<script type="text/javascript">

    var map;
    var countriesLayer;
    var citiesLayer;

    function newCountriesLayer(start, end, item, result) {
        return new ol.layer.Vector({
            minResolution: 2500,
            source: new ol.source.GeoJSON({
                projection: 'EPSG:3857',
                url: '@Url.Action("GetCountries")'
                    + '?StartDate=' + start
                    + '&EndDate=' + end
                    + '&Item=' + item
                    + '&Result=' + result
            }),
            style: function (f, r) {
                return [
                    new ol.style.Style({
                        text: new ol.style.Text({ text: f.get("title"), fill: new ol.style.Fill({ color: '#673B8F' }), scale: 1.2 }),
                        image: new ol.style.Circle({ radius: 10, fill: new ol.style.Fill({ color: 'white' }) }),
                    })
                ];
            }
        });
    }

    function newCitiesLayer(start, end, item, result) {
        return new ol.layer.Vector({
            maxResolution: 2500,
            source: new ol.source.GeoJSON({
                projection: 'EPSG:3857',
                url: '@Url.Action("GetCities")'
                    + '?StartDate=' + start
                    + '&EndDate=' + end
                    + '&Item=' + item
                    + '&Result=' + result
            }),
            style: function (f, r) {
                return [
                    new ol.style.Style({
                        text: new ol.style.Text({ text: f.get("title"), fill: new ol.style.Fill({ color: '#673B8F' }), scale: 1.2 }),
                        image: new ol.style.Circle({ radius: 10, fill: new ol.style.Fill({ color: 'white' }) }),
                    })
                ];
            }
        });
    }

    $(document).ready(function () {
        var start = $('#startDate').val();
        var end = $('#endDate').val();
        var item = $('#item').val();
        var result = $('#resultat').val();

        countriesLayer = newCountriesLayer(start, end, item, result);
        citiesLayer = newCitiesLayer(start, end, item, result);

        map = new ol.Map({
            target: 'map',
            renderer: 'canvas',
            layers:
            [
                new ol.layer.Tile({
                    //source: new ol.source.TileWMS({
                    //    url: 'http://maps.opengeo.org/geowebcache/service/wms',
                    //    params: { LAYERS: 'openstreetmap', VERSION: '1.1.1' }
                    //})
                    source: new ol.source.OSM(),
                }),
                countriesLayer, citiesLayer
            ],
            view: new ol.View2D({
                center: ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'),
                zoom: 1,
            })
        });
    });
</script>

两者都返回：

return new ContentResult()
{
    Content = geoJson.ToString(),
    ContentEncoding = System.Text.Encoding.ASCII,
    ContentType = "text/json"
};

geoJson的值为：

{
    "type": "FeatureCollection",
    "crs": { 
        "type": "name",
        "properties": { 
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84" 
        } 
    },
    "features": [
    { 
        "type": "Feature",
        "properties": {
            "id":"CN-30-Guangzhou",
            "title":"2",
        }, 
        "geometry": { 
            "type": "Point",
            "coordinates": [113.25,23.1167]
        }
    },
    {
        "type": "Feature",
        "properties": { 
            "id":"CN-23-Shanghai", 
            "title":"1",
        },
        "geometry": { 
            "type": "Point",
            "coordinates": [121.3997,31.0456] 
        }
    },
]}

在我接受这段代码的项目中，它是有效的。这张地图在中国包含两个点：上海显示“1”，广州显示“2”

在我的项目中，我有一个错误：

未捕获的TypeError:无法读取null的属性“a”

at xl (ol.js:266)
at wl (ol.js:265)
at Bl (ol.js:268)
at Al (ol.js:269)
at nr (ol.js:471)
at pr.mr.f (ol.js:470)
at td (ol.js:38)
at N (ol.js:37)
at Xq.q (ol.js:467)

---

正如我所说的，我对网络非常陌生，我因为那个错误而迷失了方向。如果尝试检查ol.js，但它不可读。也许我丢失了一个图书馆或一个包裹，但我不知道如何知道。

习惯吧。在很多情况下，OL错误真的很糟糕，而且没有任何帮助。这些错误通常意味着传递的某些值的数据类型、格式等不正确。请检查传递的内容，尝试使用一些静态值……首先，请使用OpenLayers的最新版本，即4.0.x。请注意，不再有

ol.source.GeoJSON

。将

ol.source.Vector

与

ol.format.GeoJSON

一起使用。要获得更可读的堆栈跟踪，请使用

ol debug.js

而不是

ol.js

。我尝试过使用debug，但没有效果。我终于找到了问题所在：我的坐标是用

，

而不是

给出的。我为此浪费了3天。。。

at xl (ol.js:266)
at wl (ol.js:265)
at Bl (ol.js:268)
at Al (ol.js:269)
at nr (ol.js:471)
at pr.mr.f (ol.js:470)
at td (ol.js:38)
at N (ol.js:37)
at Xq.q (ol.js:467)