如何获取地图图例以填充外部数据集？

时间：2019-05-30 14:22:13

标签： javascript google-maps-api-3

我正在尝试使用外部数据集文件显示带有大小圆圈的地图图例，但图例未显示所需的实际信息。

如果我在JS代码中创建一个数据数组，这似乎可以工作，但是我需要它与我从中提取的.js文件一起工作。

我正在使用的JavaScript如下：

SELECT *
FROM ( VALUES
('something'),
('something2'),
('n'),
(...)) AS base2(ColumnA)
CROSS APPLY dbo.fnExample('2019-05-01')

我为该项目准备的小提琴在这里：https://jsfiddle.net/Strawmr/uoc8vwhf/7/

1 个答案:

答案 0 :(得分：0)

一种选择是使用我对your earlier question的回答中的代码，并创建一个创建固定图例的函数（而不是尝试从数据动态生成它）。

function makeLegend(map) {
  var legendmap = {
    scale1: {population: 8},
    scale2: {population: 80},
    scale3: {population: 200},
    scale4: {population: 450},
    scale5: {population: 1900},
    scale6: {population: 5000}
  };
  var icons = [];
  // Construct the circle for each value in legendmap.
  // Note: We scale the area of the circle based on the population.
  for (var entry in legendmap) {
    // Add the circle for this entry to the map.
    var icon = getCircle(legendmap[entry].population);
    if (!icons[icon.scale])
      icons[icon.scale] = icon;
  }

  var legend = document.getElementById('legend');
  for (var key in icons) {
    var type = icons[key];
    var name = type.name;
    var icon = type.icon;
    var scale = type.scale;
    var opacity = type.fillOpacity;
    var div = document.createElement('div');
    div.innerHTML = "<img src='data:image/svg+xml;utf8,<svg viewBox=\"0 0 100 100\" height=\"" + 8 * scale / 8 + "\" width=\"" + 8 * scale / 8 + "\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"50\" cy=\"50\" r=\"50\" style=\"fill: green; stroke: white; stroke-width: 1;\" opacity=\"" + opacity + "\"/></svg>'> " + name;
    legend.appendChild(div);
  }
  // add the created legend to the map
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}

proof of concept fiddle

screenshot of resulting map

代码段 

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {
      lat: 27.964157,
      lng: -82.452606
    },
    mapTypeControl: false,
    streetViewControl: false,
    styles: styles,
  });

  var script = document.createElement('script');
  script.src = 'https://trialscout.com/Scripts/landscapedata/tampadata_geojsonp.js';
  document.getElementsByTagName('head')[0].appendChild(script);

  map.data.setStyle(function(feature) {
    var nctcount = feature.getProperty('count_of_nct_id');
    return {
      icon: getCircle(nctcount)
    };
  });

  makeLegend(map);
}

function getCircle(nctcount) {
  var nctamt = nctcount;
  if (nctamt <= 10) {
    return {
      path: google.maps.SymbolPath.CIRCLE,
      fillOpacity: 1,
      fillColor: 'green',
      scale: 5,
      strokeColor: 'white',
      strokeWeight: 0.5,
      name: "<= 10"
    };
  } else if (nctamt <= 100) {
    return {
      path: google.maps.SymbolPath.CIRCLE,
      fillOpacity: 0.8,
      fillColor: 'green',
      scale: 10,
      strokeColor: 'white',
      strokeWeight: 0.5,
      name: "<= 100"
    };
  } else if (nctamt <= 250) {
    return {
      path: google.maps.SymbolPath.CIRCLE,
      fillOpacity: 0.6,
      fillColor: 'green',
      scale: 15,
      strokeColor: 'white',
      strokeWeight: 0.5,
      name: "<= 250"
    };
  } else if (nctamt <= 500) {
    return {
      path: google.maps.SymbolPath.CIRCLE,
      fillOpacity: 0.4,
      fillColor: 'green ',
      scale: 20,
      strokeColor: 'white',
      strokeWeight: 0.5,
      name: "<= 500"
    };
  } else if (nctamt <= 2000) {
    return {
      path: google.maps.SymbolPath.CIRCLE,
      fillOpacity: 0.2,
      fillColor: 'green',
      scale: 25,
      strokeColor: 'white',
      strokeWeight: 0.5,
      name: "<= 2000"
    };
  } else {
    return {
      path: google.maps.SymbolPath.CIRCLE,
      fillOpacity: 0.2,
      fillColor: 'green',
      scale: 35,
      strokeColor: 'white',
      strokeWeight: 0.5,
      name: "> 2000"
    };
  }

}

function tslandscape_callback(response) {
  map.data.addGeoJson(response);
}

function makeLegend(map) {
  // entries in the legend
  var legendmap = {
    scale1: {population: 8},
    scale2: {population: 80},
    scale3: {population: 200},
    scale4: {population: 450},
    scale5: {population: 1900},
    scale6: {population: 5000}
  };
  var icons = [];
  // Construct the circle for each value in legendmap.
  // Note: We scale the area of the circle based on the population.
  for (var entry in legendmap) {
    // Add the circle for this entry to the map.
    var circle = getCircle(legendmap[entry].population);
    if (!icons[circle.scale])
      icons[circle.scale] = circle;
  }

  var legend = document.getElementById('legend');
  for (var key in icons) {
    var type = icons[key];
    var name = type.name;
    var icon = type.icon;
    var scale = type.scale;
    var opacity = type.fillOpacity;
    var div = document.createElement('div');
    div.innerHTML = "<img src='data:image/svg+xml;utf8,<svg viewBox=\"0 0 100 100\" height=\"" + 8 * scale / 8 + "\" width=\"" + 8 * scale / 8 + "\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"50\" cy=\"50\" r=\"50\" style=\"fill: green; stroke: white; stroke-width: 1;\" opacity=\"" + opacity + "\"/></svg>'> " + name;
    legend.appendChild(div);
  }
  // add the created legend to the map
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}
var styles = [{
  "featureType": "all",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#ff0000"
  }]
}, {
  "featureType": "administrative",
  "elementType": "geometry.fill",
  "stylers": [{
    "color": "#e7e8e9"
  }]
}, {
  "featureType": "administrative",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#06262d"
  }]
}, {
  "featureType": "administrative.country",
  "elementType": "labels",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "administrative.locality",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#085c66"
  }]
}, {
  "featureType": "administrative.neighborhood",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#7ca7ad"
  }, {
    "visibility": "on"
  }]
}, {
  "featureType": "landscape",
  "elementType": "all",
  "stylers": [{
    "color": "#f2f2f2"
  }]
}, {
  "featureType": "landscape",
  "elementType": "geometry.fill",
  "stylers": [{
    "color": "#f7f8f9"
  }]
}, {
  "featureType": "landscape",
  "elementType": "labels.text",
  "stylers": [{
    "visibility": "on"
  }]
}, {
  "featureType": "landscape",
  "elementType": "labels.text.fill",
  "stylers": [{
    "visibility": "simplified"
  }, {
    "color": "#ff0000"
  }]
}, {
  "featureType": "landscape.natural.terrain",
  "elementType": "labels.text.fill",
  "stylers": [{
    "visibility": "simplified"
  }]
}, {
  "featureType": "poi",
  "elementType": "all",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "poi.park",
  "elementType": "geometry",
  "stylers": [{
    "visibility": "on"
  }, {
    "color": "#e3ece7"
  }]
}, {
  "featureType": "road",
  "elementType": "all",
  "stylers": [{
    "saturation": -100
  }, {
    "lightness": 45
  }]
}, {
  "featureType": "road.highway",
  "elementType": "all",
  "stylers": [{
    "visibility": "simplified"
  }]
}, {
  "featureType": "road.highway",
  "elementType": "geometry.fill",
  "stylers": [{
    "color": "#e7e8e9"
  }]
}, {
  "featureType": "road.highway",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#0a5d66"
  }]
}, {
  "featureType": "road.highway",
  "elementType": "labels.icon",
  "stylers": [{
    "visibility": "on"
  }, {
    "hue": "#00e8ff"
  }, {
    "saturation": "22"
  }, {
    "gamma": "1"
  }]
}, {
  "featureType": "road.arterial",
  "elementType": "geometry.stroke",
  "stylers": [{
    "color": "#e7e8e9"
  }]
}, {
  "featureType": "road.arterial",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#7ca7ad"
  }]
}, {
  "featureType": "road.arterial",
  "elementType": "labels.icon",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "road.local",
  "elementType": "geometry.stroke",
  "stylers": [{
    "color": "#e7e8e9"
  }]
}, {
  "featureType": "road.local",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#afc6c6"
  }]
}, {
  "featureType": "road.local",
  "elementType": "labels.icon",
  "stylers": [{
    "visibility": "simplified"
  }]
}, {
  "featureType": "transit",
  "elementType": "all",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "transit.station.airport",
  "elementType": "all",
  "stylers": [{
    "visibility": "on"
  }]
}, {
  "featureType": "transit.station.airport",
  "elementType": "geometry.fill",
  "stylers": [{
    "color": "#e7e8e9"
  }]
}, {
  "featureType": "transit.station.airport",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#0a5d66"
  }]
}, {
  "featureType": "water",
  "elementType": "all",
  "stylers": [{
    "color": "#46bcec"
  }, {
    "visibility": "on"
  }]
}, {
  "featureType": "water",
  "elementType": "geometry.fill",
  "stylers": [{
    "color": "#afc6c6"
  }]
}, {
  "featureType": "water",
  "elementType": "labels.text",
  "stylers": [{
    "color": "#0a5d66"
  }]
}]
html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

#map {
  height: 100%;
  width: 100%;
}

#legend {
  font-family: Arial, sans-serif;
  background: #fff;
  padding: 10px;
  margin: 10px;
  border: 3px solid #000;
}

#legend h3 {
  margin-top: 0;
}

#legend img {
  vertical-align: middle;
}
<div id="map"></div>
<div id="legend"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

相关问题
最新问题