Формат данных листовки

1

Комментарий после оригинального вопроса и доработки публикации. Мой код теперь работает, но я до сих пор не понимаю, почему массив массивов не работает, а работает.

Создание карты с помощью Листовки через 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 = '&copy; ' + osmLink + ' Contributors',
  esriAttrib = 'i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP,\
and the GIS User Community & '+ esriLink,
  mapboxAttrib = '&copy; ' + mapboxCopy + '&copy;' + 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 отображается правильно.

Тайна для меня, но она работает.

1 ответ

1
Лучший ответ

map.fitBounds ожидает объект L.LatLngBounds или массив, состоящий из пар координат.

Вы пытаетесь использовать ввод массива, но как строку вместо массива.

Поэтому 2 простых решения:

  • Либо преобразуйте строку в массив в Ruby, прежде чем передать ее в gon.
  • Или проанализируйте строку в JavaScript: JSON.parse(streetExtentArray)
  • 0
    «Или синтаксический анализ строки в JavaScript: JSON.parse (streetExtentArray)» сводит массив массивов в простой массив, но данные представляют собой пары точек. Становится: [34.05904154805371,-118.26114524155857,34.058232697865755,-118.25941789895298,34.057708274388474,-118.25814116746189,34.0572549565647,-118.25762618333104]
  • 0
    Если ваша строка действительно была в форме "[[34.05904154805371,-118.26114524155857],[34. " И т "[[34.05904154805371,-118.26114524155857],[34. Д., JSON.parse бы ее правильно. Пожалуйста, поймите, что вам невозможно помочь, если вы не предоставите свои исходные данные и код, в том числе на стороне Ruby.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню