参考:https://www.bilibili.com/read/cv8965701/
在vue3项目中测试的一个demo。
npm install @arcgis/core 安装包。
在main.js中全局引入样式:import '@arcgis/core/assets/esri/themes/light/main.css';
测试代码:
<template>
<div>
<div id="viewDiv" class="map"></div>
</div>
</template>
<script>
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import VectorTileLayer from "@arcgis/core/layers/VectorTileLayer";
export default {
data() {
return {};
},
mounted() {
const map = new Map({
basemap: "streets-vector",
});
const view = new MapView({
container: "viewDiv",
map: map,
});
view.zoom = 2;
},
};
</script>
<style>
.map {
100%;
height: 90vh;//这里如果把高度设置为100%会有问题加载不出来地图。原因暂时还不清楚。
}
</style>