Question

我是网络语言的新手，我必须在页面中集成地图。我在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>

在我的Controller.cs中，我有两个功能：

public ContentResult GetCities(string StartDate, string EndDate, string Item, string Result){...}

public ContentResult GetCountries(string StartDate, string EndDate, string Item, string Result){...}

都返回：

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] 
        }
    },
]}

在我使用此代码的项目中，它有效。该地图在中国包含2个点：上海显示“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但它是不可读的。也许我错过了一个图书馆或一个包，但我不知道怎么知道。

无法使用OpenLayer

0 个答案: