Комментарий после оригинального вопроса и доработки публикации. Мой код теперь работает, но я до сих пор не понимаю, почему массив массивов не работает, а работает.
Создание карты с помощью Листовки через Ruby on Rails. Проблема получения массива, который хранится в виде строки, которая должна быть понята JavaScript (полный код на https://github.com/MtnBiker/historical-streets-la). Часть кода streets.js
. Консоль.logs ближе к концу - вот где вопрос:
"use strict";
function makeMap() {
// Map tile URLs
var hamlin1908url = 'https://api.mapbox.com/styles/v1/mtnbiker/cj3gnezpq00152rt5o6g3kyqp/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibXRuYmlrZXIiLCJhIjoiNmI5ZmZjMzAyNzJhY2Q0N2ZlN2E1ZTdkZjBiM2I1MTUifQ.6R3ptz9ejWpxcdZetLLRqg',
Hill1928aws = 'https://crores.s3.amazonaws.com/tiles/1928Hills/{z}/{x}/{y}.png',
baistDetailAws = 'https://crores.s3.amazonaws.com/tiles/baistDetail/{z}/{x}/{y}.png',
baistKMaws = "https://crores.s3.amazonaws.com/tiles/bkm/{z}/{x}/{y}.png",
rueger1902aws = "https://crores.s3.amazonaws.com/tiles/1902rueger/{z}/{x}/{y}.png",
woods1908url = "https://crores.s3.amazonaws.com/tiles/1908woods/{z}/{x}/{y}.png",
// sanborn1894km1aURL = "//knobby.ws/crorestiles/sanborn1894km1a/{z}/{x}/{y}.png",
sanborn1888km1aURL = "https://crores.s3.amazonaws.com/tiles/1888SanbornKM1a/{z}/{x}/{y}.png",
sanborn1894km1aURL = "https://crores.s3.amazonaws.com/tiles/1894SanbornKM1a/{z}/{x}/{y}.png",
osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
esriUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServe\
r/tile/{z}/{y}/{x}',
googleUrl = 'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}'
// bingUrl = "baseMapUrl = new L.BingLayer('AtGe6-aWfp_sv8DMsQeQBgTVE0AaVI2WcT42hmv12YSO-PPROsm9_UvdRyL91jav, {type: 'Road'});"
// bingUrl = "http://bing.com/maps/default.aspx?cp=34.05~118.25&lvl=12&style=r",
// bingUrl = "https://dev.virtualearth.net/REST/v1/ Imagery/Map/resourcePath?queryParameters&key=AtGe6-aWfp_sv8DMsQeQBgTVE0AaVI2WcT42hmv12YSO-PPROsm9_UvdRyL91jav"
// Links for attribution
var osmLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>',
osmCopy = '<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
mapboxCopy = '<a href="https://www.mapbox.com/map-feedback/">Mapbox</a>',
esriLink = '<a href="https://www.esri.com/">Esri</a>',
mbLink = '<a href="https://mapbox.com/">OpenStreetMap</a>',
rumseyLink = '<a href="http://www.davidrumsey.com">The David Rumsey Map Collection</a>',
csunLink = "",
bigBlogMapLink = 'http://www.bigmapblog.com'
// Attribution
var osmAttrib = '© ' + osmLink + ' Contributors',
esriAttrib = 'i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP,\
and the GIS User Community & '+ esriLink,
mapboxAttrib = '© ' + mapboxCopy + '©' + osmCopy,
mwAttrib ='https://thinkwhere.wordpress.com',
rumseyAttrib = rumseyLink,
csunAttrib = csunLink,
bigBlogMapAttrib = bigBlogMapLink,
hamlinAttrib = ""
// Putting together as a Leaftlet tileLayer. First variable is the URL of the tiles
var rueger1902Map = L.tileLayer(rueger1902aws, {attribution: mapboxAttrib}),
osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
esriMap = L.tileLayer(esriUrl, {attribution: esriAttrib}),
// bing = L.tileLayer(bingUrl), // This approach doesn't seem to work, but the following does. bing is easier to read than OSM because many major street names don't show up in OSM
bing = L.tileLayer.bing('AtGe6-aWfp_sv8DMsQeQBgTVE0AaVI2WcT42hmv12YSO-PPROsm9_UvdRyL91jav'),
google = L.tileLayer(googleUrl, {attribution: 'Google'}),
hill1928 = L.tileLayer(Hill1928aws, {attribution: bigBlogMapAttrib}),
baistDetail = L.tileLayer(baistDetailAws, {attribution: rumseyAttrib}),
baistKM = L.tileLayer(baistKMaws, {attribution: rumseyAttrib}),
rueger1902 = L.tileLayer(rueger1902aws),
hamlin1908 = L.tileLayer(hamlin1908url),
woods1908 = L.tileLayer(woods1908url, {attribution: rumseyAttrib}),
sanborn1894km1a = L.tileLayer(sanborn1894km1aURL, {attribution: csunAttrib}),
sanborn1888km1a = L.tileLayer(sanborn1888km1aURL, {attribution: csunAttrib})
var overlayLayers = {
"<span style='color: blue'>1921 Baist detail</span>" : baistDetail,
"<span style='color: blue'>1921 Baist Key Map</span>" : baistKM,
"1928 Hill" : hill1928,
"woods1908" : woods1908,
"1908 Hamlin" : hamlin1908,
"1902 Rueger" : rueger1902,
"1894 Sanborn" : sanborn1894km1a,
"1888 Sanborn" : sanborn1888km1a
};
var baseLayers = {
"<span style='color: green'>Bing</span>" : bing,
"<span style='color: orange'>OSM Street</span>" : osmMap,
"<span style='color: green' >ESRI Satellite</span>" : esriMap,
"<span style='color: green' >Google Satellite</span>" : google
}
var map = L.map('map').setView([34.05, -118.25], 13,);
console.log("95. typeof gon.streetExtentArray: " + typeof gon.streetExtentArray);
var streetExtentArray = gon.streetExtentArray;
console.log("99. typeof streetExtentArray = gon.streetExtentArray: " + typeof streetExtentArray);
var arrayStreetExtent = JSON.parse(streetExtentArray); // using intermediary for testing
console.log("121. arrayStreetExtent: " + arrayStreetExtent + ". typeOf: "+ arrayStreetExtent.typeOf);
map.fitBounds(arrayStreetExtent); // zooms to area of interest
L.polyline(arrayStreetExtent).addTo(map);
L.tileLayer.bing('AtGe6-aWfp_sv8DMsQeQBgTVE0AaVI2WcT42hmv12YSO-PPROsm9_UvdRyL91jav').addTo(map);
L.control.layers( baseLayers, overlayLayers, {collapsed:true} ).addTo(map);
} // end makeMap
С консоли Chrome
95. typeof gon.streetExtentArray: string
99. typeof streetExtentArray = gon.streetExtentArray: string
121. arrayStreetExtent: 34.073492888603404,-118.28553155064584,34.07285302899903,-118.28437283635142,34.06673857126311,-118.27029660344125,34.061
В arrayStreetExtent
отображается одномерный массив, когда он должен выглядеть как [[34, -118], [34.1, -118.2]]. Но map.fitBounds(arrayStreetExtent)
правильно интерпретирует его, и диаграмма LINESTRING отображается правильно.
Тайна для меня, но она работает.
map.fitBounds
ожидает объект L.LatLngBounds
или массив, состоящий из пар координат.
Вы пытаетесь использовать ввод массива, но как строку вместо массива.
Поэтому 2 простых решения:
JSON.parse(streetExtentArray)
[34.05904154805371,-118.26114524155857,34.058232697865755,-118.25941789895298,34.057708274388474,-118.25814116746189,34.0572549565647,-118.25762618333104]
"[[34.05904154805371,-118.26114524155857],[34.
" И т"[[34.05904154805371,-118.26114524155857],[34.
Д.,JSON.parse
бы ее правильно. Пожалуйста, поймите, что вам невозможно помочь, если вы не предоставите свои исходные данные и код, в том числе на стороне Ruby.