切换地图类型

芋圆社区 > 编程 > 天地图 > 切换地图类型

1118

2023-08-24

Hey、小怪兽

• 点击JavaScript API 4.0，点击代码示例：
• 可以看到有关于地图类型控件的例子：
• 修改之前的index.js的代码，在初始化地图后加载地图类型控件：

// 地图变量
let map = null;
// 中心点
let center = [116.40769, 39.89945];
// 缩放级别
let zoom = 12;
// 地图类型控件
let mapTypeControl = null;

// 初始化地图
const initMap = () => {
  map = new T.Map("mapDiv");
  map.centerAndZoom(new T.LngLat(center[0], center[1]), zoom);
  // 创建地图类型控件对象和添加控件
  mapTypeControl = new T.Control.MapType();
  map.addControl(mapTypeControl);
};

• 打开地图，在右上角就可以切换地图类型了：
• 如果只需要地图和卫星混合的话，在创建地图类型对象的时候可以传入一个数组：

// 创建地图类型控件对象和添加控件
mapTypeControl = mapTypeControl = new T.Control.MapType([
  {
    // 地图控件上所要显示的图层名称
    title: "地图",
    // 地图控件上所要显示的图层图标（默认图标大小80x80）
    icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png",
    // 地图类型对象，即MapType。
    layer: TMAP_NORMAL_MAP,
  },
  {
    title: "卫星混合",
    icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
    layer: TMAP_HYBRID_MAP,
  },
]);
map.addControl(mapTypeControl);

• 如果想直接把切换地图赋值在一个按钮上，可以使用地图的setMapType方法：

// 一开始定义一个地图的类型变量
let mapType = "normal";

// 按钮-切换地图
const changeMapType = () => {
  if (mapType === "normal") {
    mapType = "hybrid";
    map.setMapType(TMAP_HYBRID_MAP);
  } else {
    mapType = "normal";
    map.setMapType(TMAP_NORMAL_MAP);
  }
};

上一篇：加载天地图

下一篇：地图搜索功能

切换地图类型

回复