Question

我正在尝试熟悉传单地图，但我发现他们的教程非常直观。我一直在使用他们的geojson教程，并查看他们的示例的源代码，尝试将我自己的数据添加到我正在创建的地图中，但是我没有成功地进行多边形显示。

HTML：

<!DOCTYPE html >

<html>
<head>

<title>Leaflet Ex</title>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<script src="creek.js" type="text/javascript"></script>

</head>

<body>

<div id="mapid" style="width: 1000px; height: 700px;"></div>

<script type="text/javascript">
        var map = L.map('mapid').setView([49.2485, -122.9995], 15);

        L.tileLayer('https://api.mapbox.com/styles/v1/***/civ43lux700032iqp0990mgfn/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZGd3YWx0b24iLCJhIjoiSUZURmlaUSJ9.FLL81KvyJ3kCFiUbUgCAWg', {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
            maxZoom: 18,
        }).addTo(map);

        L.geoJson(creek, {
            style: function (feature) {
                return feature.properties && feature.properties.style;
            }
        }).addTo(map);

</script>

</body>

</html>

JSON：

var creek = {

"type": = "Feature",
"properties": {
    "AREA":4575.273,
    "PERIMETER":1396.149,
    "CREEK_":2,
    "CREEK_ID":5,
    "TYPE":"water",
    "CODE":"Guichion Creek"
    "style": {
        weight: 1,
        color: "#000",
        opacity: 1,
        fillColor: "#0D00F2",
        fillOpacity: 0.7
    }   
}
"geometry": { 
    "type": "Polygon",
    "coordinates": [
                        [
                            [500001.59375,5455104],[500001.84375,5455110],[500010.09375,5455109.5],[500012.5,5455105.5],[500013.15625,5455100.5],[500013.78125,5455094],[500014.4375,5455085.5],[500014.4375,5455080],[500014.4375,5455076],[500013.5625,5455073.5],[500012.28125,5455068.5],[500010.75,5455065.5],[500008.59375,5455062.5],[500006.4375,5455059],[500004.90625,5455057],[500004.90625,5455049],[500004.90625,5455042.5],[500005.34375,5455038],[500006,5455031.5],[500006,5455028.5],[500006.4375,5455024.5],[500007.5,5455021],[500009.25,5455016.5],[500010.53125,5455014],[500010.96875,5455010],[500011.1875,5455005],[500011.84375,5454999.5],[500012.28125,5454991.5],[500013.78125,5454982.5],[500015.53125,5454975.5],[500016.84375,5454969],[500018.78125,5454964.5],[500019.875,5454959.5],[500022.25,5454947.5],[500023.96875,5454941.5],[500025.71875,5454936.5],[500026.375,5454928],[500027.25,5454921.5],[500026.59375,5454910.5],[500026.15625,5454906],[500026.375,5454893.5],[500027.03125,5454887],[500027.03125,5454881],[500027.25,5454876],[500027.875,5454871],[500028.96875,5454868.5],[500032.4375,5454864],[500033.96875,5454861],[500034.59375,5454856.5],[500033.75,5454851.5],[500031.125,5454847],[500028.75,5454842],[500026.59375,5454840.5],[500023.34375,5454838],[500020.5,5454836],[500019.65625,5454831.5],[500019.21875,5454826],[500017.46875,5454820.5],[500017.46875,5454814],[500016.40625,5454807],[500015.3125,5454801],[500014.21875,5454796],[500014,5454790.5],[500013.15625,5454786],[500013.5625,5454779],[500012.71875,5454775],[500011.40625,5454770.5],[500010.96875,5454760],[500011.1875,5454744],[500011.40625,5454734],[500010.53125,5454727.5],[500009.03125,5454721],[500008.375,5454712.5],[500006.4375,5454702],[500005.34375,5454694],[500004.46875,5454687],[500003.59375,5454683],[500003.375,5454673],[500003.15625,5454667],[500001.65625,5454659],[500000.78125,5454650.5],[500000.125,5454643],[499999.28125,5454639],[499998.40625,5454634.5],[499997.75,5454629.5],[499997.09375,5454624.5],[499996.21875,5454621.5],[499995.375,5454617.5],[499993.1875,5454613],[499991.25,5454609],[499991.03125,5454602.5],[499990.375,5454597.5],[499988,5454592],[499986.6875,5454588.5],[499986.03125,5454583.5],[499985.8125,5454578],[499984.53125,5454572],[499983.4375,5454561.5],[499981.9375,5454555],[499980.40625,5454550],[499980.40625,5454542],[499980.84375,5454532.5],[499978.6875,5454522.5],[499978.46875,5454517],[499977.375,5454514],[499971.9375,5454506],[499965.65625,5454499],[499958.28125,5454491],[499953.09375,5454486.5],[499947.03125,5454483],[499938.125,5454478],[499930.53125,5454474.5],[499922.53125,5454469.5],[499916.65625,5454464],[499914.0625,5454467],[499918.40625,5454470],[499922.75,5454474],[499929.03125,5454478.5],[499931.1875,5454479.5],[499935.09375,5454480],[499941.59375,5454484.5],[499952.65625,5454491.5],[499958.5,5454498.5],[499964.15625,5454504],[499968.46875,5454508],[499973.46875,5454523.5],[499975.40625,5454531.5],[499976.28125,5454546.5],[499978.46875,5454556],[499979.53125,5454566],[499981.9375,5454585],[499985.625,5454599.5],[499988.21875,5454615],[499992.125,5454629],[499994.9375,5454642],[499998.625,5454653],[499998.40625,5454660],[500000.78125,5454674.5],[500001,5454688.5],[500001.65625,5454700.5],[500003.59375,5454709],[500005.5625,5454724],[500005.125,5454736.5],[500005.125,5454756],[500007.28125,5454782],[500008.375,5454798.5],[500010.09375,5454809.5],[500014.21875,5454830.5],[500018.125,5454848],[500019.875,5454859.5],[500022.03125,5454864],[500022.46875,5454886.5],[500022.6875,5454903.5],[500022.03125,5454928],[500020.71875,5454935.5],[500017.46875,5454940.5],[500015.3125,5454962.5],[500011.1875,5454977],[500005.78125,5454990.5],[500005.78125,5454995],[500005.5625,5455005.5],[500003.8125,5455011.5],[500001,5455019.5],[499995.59375,5455034],[499990.8125,5455050.5],[499985.8125,5455062],[499983.65625,5455065.5],[499984.09375,5455078],[499986.25,5455080.5],[499990.15625,5455083.5],[499995.15625,5455090.5],[499999.90625,5455098],[500001.59375,5455104]
                        ]
                    ]
}
};

任何有助于弄清楚我的问题在哪里的人都会非常感激！

Answer 1

错字，就在这里：

"type": = "Feature",

检查object initializer syntax in JS，注意此处没有使用=运算符。

将来，请使用JSONlint和GeoJSONLint等工具来检查JSON / GeoJSON的有效性。尽可能避免手动编写JSON / GeoJSON。使用浏览器的调试功能来捕获这样的错误。

除此之外，请注意此L.LatLng的坐标系：

var map = L.map('mapid').setView([49.2485, -122.9995], 15);

GeoJSON中的坐标：

[500001.59375,5455104], ...

那些绝对不是纬度 - 经度坐标。从它的外观来看，它们应该是某种UTM坐标（假东向和北距500000和5000000）。

根据GeoJSON specs，特别是section 4 of RFC 7946：

所有GeoJSON坐标的坐标参考系统是a 地理坐标参考系统，使用世界大地测量学系统1984（WGS 84）[WGS84]数据，具有经度和纬度单位十进制度。

换句话说，如果要符合GeoJSON标准，请在WGS84（AKA EPSG：4326）中将坐标转换为lat-long。就像现在一样，Leaflet将尝试在西面500000度，北面5450000度处有一个点，这完全没有意义。

转换您的坐标。如果您对如何做到这一点没有任何线索，请先研究proj4，cs2cs或ogr2ogr等相关实用程序，proj4js之类的表兄项目，或图形GIS软件，如gvSIG和QGIS。

将JSON图层添加到Leaflet地图

1 个答案: