MindSphere Web Components
Asset 地图

Asset 地图在基于 OpenStreetMap 的地理地图上显示当前租户的 assets。它使用 Asset Management 提供的 assets 位置。

Asset 地图的中心使用坐标定义，并且可以定制位置标记。缩放可以配置为只支持 Ctrl 键或也支持鼠标滚轮。

China 1 区域地图差异

China 1 区域地图显示基于高德地图。
China 1 区域高德地图不支持通过 CTRL 键缩放。
您应该通过 https://lbs.amap.com/dev/key/app 为您的 Web 应用申请 Web端(JS API)类型高德地图key。
默认情况下高德地图不支持海外地图服务。如果您需要海外地图服务，请通过 https://lbs.amap.com/dev/ticket/type 向高德服务提交工单申请开通。
您应该添加以下代码片段到您的 Web 应用<head>中来集成高德地图服务。

高德地图集成示例

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&;key={Amap key}&plugin=AMap.MarkerClusterer"></script>
<script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js"></script>

示例¶

Asset-Map

接口¶

### 选择器

<mdsp-asset-map></mdsp-asset-map>

属性¶

名称	类型	相应的属性	默认	描述	允许的值
assetClickHandler	`AssetClickHandlerType`	asset-click-handler	Custom	当用户选择单个 asset 或 asset 组时配置事件处理器类型。	- Custom: 执行您已经实施的自定义动作。 - SelectionList: 打开嵌入式弹窗。
assetTypeFilter	`AssetTypeFilter`			配置将显示的 asset types。
clusterDistance	`number`	cluster-distance	40	配置集群之间的最小距离(以像素为单位)。如果设置为0，将禁用集群。
context	`string`	context		配置组件的上下文。同样参见这里。
draggable	`boolean`	draggable		如果为 `true`，启用可拖拽的地图。
errorNotification	`boolean`	error-notification		如果有错误抛出，启用错误控件。这可以用于调试目的。对于在生产环境中使用，应在应用中捕获并处理错误事件。同样参见这里。
latitude	`number`	latitude		配置地图中心的纬度。
locale	`string`	locale		指定显示组件的时间区域默认提供时间区域 `en` 和 `de`。同样参见这里。
localeManager	`LocaleManager`			返回 LocaleManager 对象。它可用于添加时间区域或者时间区域的设置。同样参见这里。
longitude	`number`	longitude		配置地图中心的经度。
markerStyle	`MapMarkerStyle`			返回用于自定义标记的对象，请参考 MapMarkerStyle 模型。
model	`IDataModel`			返回用于数据模型处理的对象，请参考 IDataModel 模型。
popup	`MapPopup`			返回用于弹出处理的对象，请参考 MapPopup 模型。
popupVisible	`boolean`
selectedAsset	`IAsset`			指定选定的 asset。
sharedAssets	`boolean`	shared-assets	false	指定是否显示其它租户的共享asset。
subtenantFilter	`string`	subtenant-filter	null	指定是否只显示特定子租户的asset。请不要使用租户id，应使用子租户id为值。
view	`IMapViewModel`			返回用于视图处理的对象，请参考 IViewModel 模型。
wheelZoom	`boolean`	wheel-zoom	false	如果为 `true`，启用通过鼠标滚轮的缩放控件。否则，必须按下 control 键进行缩放。
zoomLevel	`number`	zoom-level		指定地图的缩放等级。	0-20

China 1 区域属性差异

wheelZoom 属性如果为 false时，高德地图不支持通过 control 键缩放。
zoomLevel 属性高德地图允许的值为 3-20 。

事件¶

名称	类型	描述
selectedAssetChanged	`EventEmitter<IAsset>`	当选择新的 asset 或 asset 集群时触发。此事件仅当 SelectionList 在 assetClickHandler 中配置后触发。
assetsClicked	`EventEmitter<AssetClickEvent>`	当点击单个 asset 或 asset 集群时触发。此事件仅当 Custom 在 assetClickHandler 中配置后触发。
viewChanged	`EventEmitter<IMapViewState>`	在更改地图视图时触发。
connected	`EventEmitter<any>`	在组件被创建、初始化并附加到 DOM 树后触发。
error	`EventEmitter<MdspUiError>`	当组件或正在访问 API 发生错误时触发。同样参见这里。

模型¶

IAssetClickEvent

interface IAssetClickEvent {
  position: IMapCoordinates;
  assets: IAsset[];
}

IDataModel

interface IDataModel {
    // forces reload of data, e.g. re-loading the assets
    refresh(): void;
}

IViewModel

interface IViewModel {
    refresh(): void;
}

IMapViewState

interface IMapViewState {
    initial: IMapViewPort;
    current: IMapViewPort;
}

IMapViewModel

interface IMapViewModel extends IViewModel {
    update(viewState: IMapViewState): void;
}

IMapViewState

interface IMapViewState {
    initial: IMapViewPort;
    current: IMapViewPort;
}

IMapViewPort

interface IMapViewPort {
    center: IMapCoordinates;
    zoom: number;
}

IMapCoordinates

interface IMapCoordinates {
    longitude: number;
    latitude: number;
}

MapPopup

class MapPopup {
    // Shows defined htmlElement as marker popup
    public show(position: MapCoordinates, htmlElement: HTMLElement): void;
    // Hides popup
    public hide(): void;
}

MapMarkerStyle

class MapMarkerStyle {
    public set default(style: any);
    public set selected(style: any);
    public set clustered(style: any);
    public set clusteredSelected(style: any);
}

备注¶

如果 clusterDistance 设置为0，Asset 地图最多支持2000个标记。
建议根据租户的 pin 大小和 assets 数量调整clusterDistance。
每月向底层地图服务的免费请求最多可达25,000个。如需扩充，请与分配的 Account Executive 或 Customer Success Manager 联系。

角色¶

mdsp:core.AssetManagement.xxx(使用 Asset Management API)

代码段¶

使用自定义标记¶

这个示例使用 PNG 图片。

const assetMapComp = document.querySelector('mdsp-asset-map');
assetMapComp.markerStyle.default = { src: '/lib/pin_red.png' };
assetMapComp.markerStyle.selected = { src: '/lib/pin_red_selected.png' };
assetMapComp.markerStyle.clustered = { src: '/lib/clustered.png' };
assetMapComp.markerStyle.clusteredSelected = { src: '/lib/clustered_selected.png' };

Asset-Map

在 Asset Click 上显示一个内置弹出窗口¶

当用户点击一个标记时，使用带有参数 SelectionList 的内置 assetClickHandler 打开一个带有可用 assets 的弹出窗口。当用户选择一个 asset 时，将触发 selectedAssetChanged 事件。这可以用于导航目的。

下面的示例代码展示了一个纯粹 HTML 实现。

<mdsp-asset-map style="height: 450px; width: 600px; display: block" error-notification="true" zoom-level=2 draggable=true class="component-border" asset-click-handler="SelectionList"></mdsp-asset-map>
<mdsp-file-view error-notification="true"> </mdsp-file-view>

自定义弹出

添加一个 JavaScriptlistener来检测 asset 何时被更改。

// get the javascript objects
const assetMapComp = document.querySelector('mdsp-asset-view');
const fileViewComp = document.querySelector('mdsp-file-view');

// add listener for selectedAssetChanged event
assetMapComp.addEventListener('selectedAssetChanged', function (eventParams) {
    // assign the changed asset id to the file view
    fileViewComp.assetId = eventParams.detail.assetId;
});

在 Asset Click 上显示一个自定义弹出窗口¶

与内置弹出窗口不同，Asset Map 支持使用自定义弹出窗口。因此，当用户单击 asset 标记时，它会引发一个事件 onAssetsClicked。下面的示例演示如何使用它。

弹出窗口定义示例

<style>
    .ol-popup {
        position: absolute;
        background-color: white;
        -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width: 280px;
        display: none;
        max-height: 300px;
    }

    .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
    }

    .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
    }

    .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
    }

    .ol-popup-closer:after {
        content: "✖";
    }
</style>

将弹出窗口作为自定义 HTML 元素添加到您的站点，并添加一个 JavaScript listener 来检测 onAssetsClicked 事件：

```html tab="HTML"

```javascript tab="JavaScript"
// add event handler and show pop-up window on asset click
const assetMapComp = document.querySelector('mdsp-asset-map');
assetMapComp.addEventListener('assetsClicked', function(eventParams) {
    var eventData = eventParams.detail;
    //show pop-up window only if single asset was clicked
    if (eventData.assets && eventData.assets.length === 1) {
       document.getElementById('popup-content').innerHTML = 'Asset name: ' + eventData.assets[0].name;  
       var popup = document.getElementById("map-popup");
       popup.style.display = "block";
       assetMapComp.popup.show(eventData.position, popup);
    }
});
// add event handler for closing of the popup
var popupCloser = document.getElementById('popup-closer');
    popupCloser.onclick = function() {
    assetMapComp.popup.hide();
    return false;
};

自定义弹出窗口

显示特定 type 的 assets¶

使用 assetypefilter 参数只显示特定 type 或派生 type 的 assets。

// Set a filter for a specific asset type:
assetMapComp.assetTypeFilter = ["core.mcnano"];
// This displays all assets of type 'core.mcnano'.

// Set a filter for multiple asset types:
assetMapComp.assetTypeFilter = {
  supportedTypes: ["core.mcnano", "core.basicagent"]
};
// This displays all assets of type 'core.mcnano' or 'core.basicagent'.

// Set a filter to a specific asset type and all types derived from it:
assetMapComp.assetTypeFilter = {
  supportedTypes: ["core.basicagent"],
  includeInheritance: true
};
// This displays all assets of type 'core.basicagent' and types derived from it.

Last update: November 16, 2021

MindSphere Web ComponentsAsset 地图

示例¶

接口¶

属性¶

事件¶

模型¶

备注¶

角色¶