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>
示例
接口
### 选择器
<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 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.
还有问题?
除非另行声明,该网站内容遵循MindSphere开发许可协议.
Last update: November 16, 2021