README

使用 DataMaps（http://datamaps.github.io/）进行地图集成的基本包装器。

背景

我们时不时需要实现一些无法使用 Google 地图实现的地图功能。DataMaps 提供了一个强大且高度可定制的框架，用于任何类型的地图功能。此模块的目的是提供基本的包装器，以便轻松地将 DataMaps 集成到 Web 项目中。

用法

该模块提供了一个包含所有必要资源的 Drupal 库。

iq_datamaps/datamaps_base

它可以像任何其他 Drupal 库一样附加。除了 DataMaps 发行版外，它还包含非常基本的地图和提示样式，以及一个用于与 DataMaps JS 交互的 JS 类： iqDataMapsWrapper。

iqDataMapsWrapper 类

从 iqDataMapsWrapper 类创建新的 JS 对象

let mapObject = new iqDataMapsWrapper(element);

element: 将包含地图的 DOM 容器元素。

iqDataMapsWrapper 为 DataMaps 提供了一组基本设置，用于打印基本的世界地图和以下方法：

clearSettings()

移除所有基本设置。现在应用 DataMap 的默认设置。

类型：公共函数

clearSettings()

移除所有基本设置。现在应用 DataMap 的默认设置。

类型：公共函数

restoreBaseSettings()

恢复基本设置。

类型：公共函数

setScope(scope)

恢复基本设置。

类型：公共函数

initMap(scope) ⇒ DataMaps 对象

使用给定的自定义设置打印地图。

类型：公共函数

initMap(scope) ⇒ DataMaps 对象

使用 initMap() 使用给定的自定义设置打印响应式地图。

类型：公共函数

用例/示例

打印（响应式）世界地图

let element = document.getElementById('map-wrapper');
let dataMap = new  iqDataMapsWrapper(element);
dataMap.initResponsiveMap();

在世界地图上突出显示国家

let element = document.getElementById('map-wrapper');
let dataMap = new  iqDataMapsWrapper(element);
let highlights = {
  'CHE': {fillKey:  'active'},
}
dataMap.initResponsiveMap({data:  highlights});

打印瑞士地图

let element = document.getElementById('map-wrapper');
let dataMap = new  iqDataMapsWrapper(element);
dataMap.setScope('che');
dataMap.initResponsiveMap({
  setProjection:  function (element) {
    let  scaleFactor = element.offsetWidth * 12.5;
    var  projection = d3.geo.mercator()
      .center([8.2, 46.8182])
      .scale(scaleFactor)
      .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
    var  path = d3.geo.path().projection(projection);
    return { path:  path, projection:  projection };
  }
});

打印带有标记的瑞士地图

let element = document.getElementById('map-wrapper');
let dataMap = new  iqDataMapsWrapper(element);
let mapMarkers = [
  {
    'radius': 5,
    'latitude': 46.9376,
    'longitude': 7.3950,
    'tooltip_content':  "<strong>Oh, hi Marc!</strong>",
    'fillKey': 'active'
  }
];
dataMap.setScope('che');
dataMap.initResponsiveMap({
  setProjection:  function (element) {
    let  scaleFactor = element.offsetWidth * 12.5;
    var  projection = d3.geo.mercator()
      .center([8.2, 46.8182])
      .scale(scaleFactor)
      .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
    var  path = d3.geo.path().projection(projection);
    return { path:  path, projection:  projection };
  }
}).bubbles(mapMarkers, {
  popupTemplate:  function (geo, data) {
    return  '<div class="map-tooltip">' + data.tooltip_content + '</div>';
  },
  highlightFillColor:  'var(--map-color-active)',
  highlightBorderColor:  'var(--map-color-active)',
});