vue3+ts+supermap iserver的引用

vue3++ts+SuperMap iServer

1、创建一幅地图

<template>
  <div id="map" class="map_container"></div>
</template>
<script setup lang="ts">
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import * as control from "ol/control";
import { Logo, TileSuperMapRest } from "@supermap/iclient-ol";
import * as ol from "ol";
const initMap = () => {
  const url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
  const map = new Map({
    target: "map",
    controls: control.defaults({ attributionOptions: { collapsed: false } })
      .extend([new Logo()]),
    view: new View({
      center: [0, 0],
      zoom: 2,
      projection: "EPSG:4326",
    }),
  });
  const layer = new TileLayer({
    source: new TileSuperMapRest({
      url: url,
      wrapX: true,
      projection: "EPSG:4326", // 确保 source 中的 projection 设置正确
    }),
  });
  map.addLayer(layer);
};
onMounted(() => {
  initMap();
});
</script>
<style>
.map_container {
  width: 100%;
  height: 100%;
}
</style>

2、接入第三方地图，以天地图为例

<template>
  <div id="map" class="map_container"></div>
</template>
<script setup lang="ts">
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import * as control from "ol/control";
import { Logo, TileSuperMapRest,Tianditu  } from "@supermap/iclient-ol";
import * as ol from "ol";
const initMap = () => {
  var map = new ol.Map({
    target: 'map',
    // ol v7版本用法为ol.control.defaults.defaults； v6版本以下用法为ol.control.defaults
    controls: control.defaults({ attributionOptions: { collapsed: false } })
      .extend([new Logo({ link: "https://iclient.supermap.io" })]),
    view: new ol.View({
      center: [0, 0],
      zoom: 1,
      projection: "EPSG:4326",
      multiWorld: true
    }),
  });
  var layers = new TileLayer({
    source: new Tianditu({
      layerType: 'ter',
      key: "1d109683f4d84198e37a38c442d68311",
      projection: "EPSG:4326"
    })
  })
 var layers2 = new TileLayer({
    source: new Tianditu({
      layerType: 'ter',
      key: "1d109683f4d84198e37a38c442d68311",
      isLabel: true,
      projection: "EPSG:4326"
    })
  })
  map.addLayer(layers);
  map.addLayer(layers2);
};
onMounted(() => {
  initMap();
});
</script>
<style>
.map_container {
  width: 100%;
  height: 100%;
}
</style>

3、添加比例尺和图层切换

import ScaleLine from 'ol/control/ScaleLine'; // 导入 ScaleLine 控件

map.addControl(scaleControl);