彩票走势图

DHTMLX Scheduler是一个全面的 UI 组件，用于处理面向业务的 Web 应用程序中复杂的调度和任务管理需求。但是，某些场景可能需要自定义解决方案。例如，如果项目的资源（即劳动力）有限，则需要确保以更高的精度分配他们的工作量。为此，应用条形图等数据可视化工具会很有用。

DHTMLX Scheduler 最新版下载 

在本教程中，您将学习如何将 Maptiler 库添加到使用 DHTMLX 构建的 JavaScript 调度程序的 Map 视图。

向调度程序添加自定义地图适配器的分步指南

MapTiler是一款功能强大的地图提供程序，可提供可自定义的高质量地图图块，供开发者在各种项目（包括 Web 应用）中使用。在下面的示例中，您可以看到一个带有地图视图的 JavaScript 调度程序，您可以在其中通过 MapTiler 查看地图上的所有即将到来的约会。

下面，让我们详细解释如何向您的 Web 项目添加类似的功能。

步骤 1：初始化调度程序

您可以使用init方法初始化 DHTMLX Scheduler 。该方法将 HTML 容器（或其 ID）作为参数，Scheduler 将放置在其中。

scheduler.init("scheduler_here");

步骤 2：将地图视图添加到调度程序

由于地图视图不是 Scheduler 中的默认选项，因此您必须添加它。

步骤 3：创建自定义地图适配器

现在，我们来集成自定义地图适配器。为此，您需要创建一个实现 Scheduler 地图适配器接口的类，该接口由我们文档的此部分中描述的 9 种方法组成。

这些方法代表用户可以使用 Scheduler 的地图视图执行的主要操作。

要创建 Maptiler 适配器，请使用以下代码：

export class maptilerAdapter {
    constructor(scheduler) {
        this.map = null;
        this.options = {};
        this._markers = [];
        this.scheduler = scheduler;
    }
    initialize(container, options) {
        maptilersdk.config.apiKey = options.accessToken;
        const map = new maptilersdk.Map({
          container: container, // container's id or the HTML element in which the SDK will render the map
          style: maptilersdk.MapStyle.STREETS, // style of the map
          center:[options.initial_position.lng, options.initial_position.lat], // starting position [lng, lat]
          zoom: options.initial_zoom // starting zoom
        });
        }
}

MapTiler 的地图使用maptilersdk.Map API 进行初始化，其中，您可以使用initialise()方法的第一个参数指定容器属性。其他属性可根据您的需要使用。

注意下面这行代码：

maptilersdk.config.apikey = options.accesstoken;

这里，options.accesstoken指的是您的 MapTiler API 密钥，它应该在scheduler.config.map_settings.accesstoken配置中设置。

步骤 4：在地图上创建事件

您可以让最终用户通过双击在地图上添加约会地点。您需要应用dblclick事件处理程序来实现此目标。在此事件处理程序中，您应该使用来自本机事件对象 ( e.lnglat.lat、e.lnglat.lng ) 的坐标创建一个调度程序事件。此外，您必须通过向指定的地理编码发送请求来指定事件的位置。

以下是如何实现这一目标的一个例子：

map.on("dblclick",async function(e){
    let response = await fetch(`//api.maptiler.com/geocoding/${e.lngLat.lng},${e.lngLat.lat}.json?key=${options.accessToken}`).then(response => response.json());
    if (response.features){
        let address = response.features[0].place_name_en;
        scheduler.addEventNow({
            lat: e.lngLat.lat,
            lng: e.lngLat.lng,
            event_location: address,
            start_date: scheduler.getState().date,
            end_date: scheduler.date.add(scheduler.getState().date, scheduler.config.time_step, "minute")
        });
    } else {
        console.error("unable receive a position of the event");
    }
});

步骤 5：使用标记在地图上显示事件

现在，是时候向您展示使用特殊标记在日历中显示即将发生的事件的可能性了。在后台，您可以使用多种方法来处理标记，例如addEventMarker(event)、removeEventMarker(eventId)、updateEventMarker(event)和clearEventMarkers()。

在我们的场景中，它的工作方式如下：

addEventMarker(event) {
    let config = [
        event.lng,
        event.lat
    ]
    if (!event.lat || !event.lng) {
        config = [this.options.error_position.lng, this.options.error_position.lat];
    }
    // create the popup
    const popup = new maptilersdk.Popup({ offset: 25 }).setHTML(this.scheduler.templates.map_info_content(event));
    // create the marker
    const marker = new maptilersdk.Marker()
        .setLngLat(config)
        .setPopup(popup)
        .addTo(this.map);
    // create the tooltip
    const tooltip = new maptilersdk.Popup({
            closeButton: false,
            closeOnClick: false
        });
    const markerInfo = {event, marker};
    // we need to collect all markers in order to find the required one when we will ipdate or delete it
    this._markers.push(markerInfo);
}

removeEventMarker(eventId) {
    for (let i = 0; i < this._markers.length; i++) {
        if (eventId == this._markers[i].event.id) {
            this._markers[i].marker.remove();
            this._markers.splice(i,1);
            i--;
        }
    }
}

updateEventMarker(event) {
    for (let i = 0; i < this._markers.length; i++) {
        if(this._markers[i].event.id == event.id) {
            this._markers[i].event = event;
            if (!event.lat || !event.lng){
                this._markers[i].marker.setLngLat([this.options.error_position.lng, this.options.error_position.lat]);
            } else {
                this._markers[i].marker.setLngLat([event.lng, event.lat]);
            }
        }
    }
}

clearEventMarkers() {
    for (let i = 0; i <this._markers.length; i++) {
        this._markers[i].marker.remove();
    }
    this._markers = [];
}

所有这些方法都应包含一个简单的存储系统，用于存储已创建的标记，以便轻松更新和删除地图上的标记。在我们的例子中，它是通过this._markers数组完成的，该数组存储有关标记和相关事件的信息。

要在网格区域中单击事件时在地图上显示标记，您应该使用onEventClick(event)函数。在代码中，它实现如下：

onEventClick(event) {
    // move to the marker on the map when the event is clicked in the description area
    if (this._markers && this._markers.length > 0) {
        for (let i = 0; i <  this._markers.length; i++) {
            const popup = this._markers[i].marker.getPopup();
            if (popup.isOpen()){
                popup.remove();
            }
            if (event.id ==  this._markers[i].event.id) {
                this._markers[i].marker.togglePopup();
                if (event.lat && event.lng) {
                    this.setView(event.lat, event.lng, this.options.zoom_after_resolve || this.options.initial_zoom);
                } else {
                    this.setView(this.options.error_position.lat, this.options.error_position.lng, this.options.zoom_after_resolve || this.options.initial_zoom);
                }
            }
        }
    }
}

步骤 6：调整地图视图显示

MapTiler 的 API 允许精确控制地图的显示。例如，您可以使用 setView (latitude, longitude, zoom)方法将地图视图调整到由纬度和经度坐标确定的特定位置以及所需的缩放级别。因此，您可以设置所需的地图焦点，确保最终用户可以轻松查看和与相关地理信息交互。

setView(latitude, longitude, zoom) {
   this.map.setCenter([longitude, latitude]);
   this.map.setZoom(zoom);
}

如果数据库未存储事件的坐标，调度程序会自动为config中指定的事件设置默认位置。因此应该有resolveAddress(string)方法，该方法通过向指定的地理代码发送请求从event.location属性获取事件的位置（lng，lat） 。

应该这样实现：

async resolveAddress(string) {
    // get the position(lng,lat) of the event from event.location if the event doesn't have event.lat or event.lng
    let response = await fetch(`//api.maptiler.com/geocoding/${string}.json?key=${this.options.accessToken}`).then(response => response.json());
    let position = {};
    if (response && response.features.length) {
        position.lng = response.features[0].center[0];
        position.lat = response.features[0].center[1];
    } else {
        console.error(`Unable recieve a position of the event's location: ${string}`);
    }
    return position;
}

destroy()方法用于删除地图实例：

destroy(container) {
      this.map.remove();
      while (container.firstChild) {
         container.firstChild.remove();
      }
      container.innerHTML = "";
}

总而言之，maptilerAdapter.js 应该包含 9 种方法才能正确运行，如上所述。

步骤 7：将新的 Map 适配器添加到 Scheduler

最后一步是将新的地图适配器添加到您的 JS 调度日历中。为此，您需要导入模块并将适配器添加到scheduler.ext.mapView.adapters ，并在scheduler.config.map_view_provider配置中指定其名称。因此，调度程序配置将如下所示：

scheduler.config.header = [
    "day",
    "week",
    "month",
    "map",
    "date",
    "prev",
    "today",
    "next"
];

// activate the Map view extension
scheduler.plugins({
    map_view: true
});

scheduler.ext.mapView.adapters.maptiler = new maptilerAdapter(scheduler); // add new adapter to the extension
scheduler.config.map_view_provider = "maptiler"; // specify the map provider
scheduler.config.map_settings.accessToken = "8alNOUBUrHjEje2Qmkfc"; // specify the MapTiler API key.
scheduler.config.map_settings.initial_zoom = 8;

scheduler.locale.labels.map_tab = "Map";
scheduler.locale.labels.section_location = "Location";
scheduler.xy.map_date_width = 180; // date column width
scheduler.xy.map_description_width = 400; // description column width
scheduler.config.map_start = new Date(2019, 3, 1);
scheduler.config.map_end = new Date(2025, 9, 1);

scheduler.config.lightbox.sections = [
    { name: "description", height: 50, map_to: "text", type: "textarea", focus: true },
    { name: "location", height: 43, map_to: "event_location", type: "textarea" },
    { name: "time", height: 72, type: "time", map_to: "auto" }
];

scheduler.init('scheduler_here', new Date(2024, 5, 1), "map");

const mapEvents = [
    { "id": 278, "start_date": "2024-07-22 12:10:00", "end_date": "2024-07-22 12:15:00", "text": "Sudan", "event_location": "Janub Kurdufan, Sudan", "lat": 7.7172005929348435, "lng": 387.9898595809937 },
    { "id": 285, "start_date": "2024-08-01 02:40:00", "end_date": "2024-08-01 15:05:00", "text": "Ships", "event_location": "Australia", "lat": -28.08958685494885, "lng": 513.4549713134767 },
    { "id": 286, "start_date": "2024-09-15 00:00:00", "end_date": "2024-09-15 00:05:00", "text": "Argentina", "event_location": "Argentina", "lat": -33.288010117378505, "lng": 293.6837553977967 },
    { "id": 90, "start_date": "2024-09-16 00:00:00", "end_date": "2024-09-16 00:05:00", "text": "Berlin", "event_location": "Berlin", "lat": 52.523403, "lng": 13.411400 },
    { "id": 268, "start_date": "2024-07-22 11:35:00", "end_date": "2024-07-22 11:40:00", "text": "Brazil", "event_location": "Brazil", "lat": -15.813189304438533, "lng": -47.91412353515626 }
];

scheduler.parse(mapEvents);

这些是主要步骤，可让您将基于 MapTiler 的自定义地图适配器集成到您的 JavaScript 调度日历中，就像在我们的示例中一样。

结论

DHTMLX Scheduler 中的地图视图提供了事件调度的地理视角。通过添加自定义地图适配器，我们的 JS 调度组件中的地图视图在选择最适合项目需求的地图选项方面提供了更大的灵活性。如果您是 DHTMLX Scheduler 的新手，但需要一个具有多种视图（包括地图视图）的综合调度工具来处理您的项目，欢迎下载试用体验。