省略core介绍和esri-loader对比...
省略vite安装项目过程...
1.安装arcgis/core
npm install @arcgis/core
npm地址:https://www.npmjs.com/package/@arcgis/core
2.配置
跟着官网来就行
地址:Build with ES modules | Overview | ArcGIS Maps SDK for JavaScript 4.25 | ArcGIS Developersz
2.1package.json
"dev": "npm run copy && vite --mode development",
"build": "npm run copy && run-p type-check build-only",
"copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets",
安装一下ncp
2.2组件中引入要用的文件
import WebMap from '@arcgis/core/WebMap'
import MapView from '@arcgis/core/views/MapView'
import esriConfig from "@arcgis/core/config.js";
import BasemapToggle from '@arcgis/core/Widgets/BasemapToggle'
import Locate from '@arcgis/core/Widgets/Locate'
import Track from '@arcgis/core/widgets/Track'
import Graphic from '@arcgis/core/Graphic'
// import Symbol from "@arcgis/core/symbols/Symbol";
import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol";
主要就是前三个,后面都是用来实现官网的小栗子
完整代码
<template>
<div class="map-div" ref="mapDiv"></div>
</template>
<script lang="ts">
export default { name: '' }
</script>
<script setup lang="ts">
import WebMap from '@arcgis/core/WebMap'
import MapView from '@arcgis/core/views/MapView'
import esriConfig from "@arcgis/core/config.js";
import BasemapToggle from '@arcgis/core/Widgets/BasemapToggle'
import Locate from '@arcgis/core/Widgets/Locate'
import Track from '@arcgis/core/widgets/Track'
import Graphic from '@arcgis/core/Graphic'
// import Symbol from "@arcgis/core/symbols/Symbol";
import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol";
import { onMounted, ref } from 'vue'
const mapDiv = ref<HTMLDivElement>()
esriConfig.assetsPath = "/assets";
const webMap = new WebMap({
// basemap: "arcgis-topographic"
basemap: "arcgis-imagery"
})
const mapView = new MapView({
map: webMap,
center: [112, 37],
zoom: 9,
})
// 换底图
const basemapToggle = new BasemapToggle({
view: mapView,
nextBasemap: "arcgis-topographic"
});
mapView.ui.add(basemapToggle, "bottom-right");
// 定位
const locate = new Locate({
view: mapView,
useHeadingEnabled: false,
goToOverride: function (view, options) {
options.target.scale = 1500;
return view.goTo(options.target);
}
});
// 跟踪
mapView.ui.add(locate, "top-left");
const track = new Track({
view: mapView,
graphic: new Graphic({
symbol:{
color: "green",
type: "simple-marker",
size: "12px",
outline: {
color: "#efefef",
width: "1.5px"
}
}
}),
useHeadingEnabled: false
});
mapView.ui.add(track, "top-left");
onMounted(() => {
mapView.container = mapDiv.value!
})
</script>
<style scoped lang="less">
@import "@arcgis/core/assets/esri/themes/light/main.css";
.map-div {
padding: 0;
margin: 0;
height: 600px;
width: 1000px;
}
</style>
效果图,其他的导航栏啥的是我自己写demo用的,不用管。。
官网例子地址Display your location | Overview | ArcGIS Maps SDK for JavaScript 4.25 | ArcGIS Developers
3.处理编译器爆红
2.17更新:我发现官网给了解释了,可以看下这个Autocasting
Programming patterns | Overview | ArcGIS Maps SDK for JavaScript 4.25 | ArcGIS Developers
官网例子中直接复制过来symbol那里在编译器会报红,如下图
ts类型推断说没有这些属性
看下声明文件
点他的read more 进去看看。。。
看到了这个SimpleMarkerSymbol类
导入,修改下代码,用这个类就不用加type了,标红没了。。。
看下页面,点追踪,左面最下面那个按钮,跟踪到当前设备位置,点定位显示正常(就是那个绿色的点)