Web 无法使用OpenLayer
我对网络语言非常陌生,我必须在页面中集成地图。我正在Visual Studio 2015中使用cshtml 为此,我使用Web 无法使用OpenLayer,web,openlayers,Web,Openlayers,我对网络语言非常陌生,我必须在页面中集成地图。我正在Visual Studio 2015中使用cshtml 为此,我使用ol.js获取了一个代码。必须显示地图,对于我表格中的每个值,我从IP定位城市/国家,并显示每个国家的项目编号 这是我的Index.cshtml <script type="text/javascript"> var map; var countriesLayer; var citiesLayer; function newCou
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)