Skip to content

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 指定显示组件的时间区域
默认提供时间区域 ende
同样参见这里
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