MindSphere Web Components
地图
地图基于 OpenStreetMap 显示地理地图。您可以添加标记,例如:显示 asset 的位置。
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-map></mdsp-map>
属性¶
名称 | 类型 | 相应的属性 | 默认 | 描述 | 允许的值 |
---|---|---|---|---|---|
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 模型。 | |||
view | IMapViewModel | 返回用于视图处理的对象,请参考 IViewModel 模型。 | |||
wheelZoom | boolean | wheel-zoom | false | 如果为 true ,启用通过鼠标滚轮的缩放控件。否则,必须按下 control 键进行缩放。 | |
zoomLevel | number | zoom-level | 指定地图的缩放等级。 | 0-20 |
China 1 区域属性差异
wheelZoom
属性如果为false
时,高德地图不支持通过 control 键缩放。zoomLevel
属性高德地图允许的值为 3-20 。
事件¶
名称 | 类型 | 描述 |
---|---|---|
viewChanged | EventEmitter<IMapViewState> | 在更改地图视图时触发。 |
connected | EventEmitter<any> | 在组件被创建、初始化并附加到 DOM 树后触发。 |
error | EventEmitter<MdspUiError> | 当组件或正在访问 API 发生错误时触发。同样参见这里。 |
模型¶
IViewModel
interface IViewModel {
refresh(): void;
}
IMapViewModel
interface IMapViewModel extends IViewModel {
update(viewState: IMapViewState): void;
}
IMapViewState
interface IMapViewState {
initial: IMapViewPort; // optional
current: IMapViewPort;
}
IMapViewPort
interface IMapViewPort {
center: IMapCoordinates;
zoom: number;
}
IMapCoordinates
interface IMapCoordinates {
longitude: number;
latitude: number;
}
MapMarkerStyle
class MapMarkerStyle {
public set default(style: any);
public set selected(style: any);
public set clustered(style: any);
public set clusteredSelected(style: any);
}
备注¶
-
每月向底层地图服务的免费请求最多可达25,000个。如需扩充,请与分配的 Account Executive 或 Customer Success Manager 联系。
-
每月对底层地图服务的免费请求数量限制为每月25.000个调用。如需更多支持,请与我们的销售团队联系。
角色¶
- 该组件不需要任何特殊角色。
代码段¶
使用自定义标记¶
const mapComp = document.querySelector('mdsp-map');
mapComp.markerStyle.default = { src: '/lib/pin_red.png' };
使用viewChanged事件和view.update方法¶
// listen on viewChanged event and save lastest view state
const mapComp = document.querySelector('mdsp-map');
mapComp.addEventListener('viewChanged', function (eventParams) {
// log view state object
console.log(new Date().toISOString() + " map.viewChanged: " + JSON.stringify(eventParams.detail));
// save state object f.e. as global variable
window.myMapViewState = eventParams.detail;
});
// restore the saved map view to any a point in time
if (window.mapViewState) {
mapComp.view.update(window.myMapViewState);
}
Last update: November 16, 2021