vite+vue3+typescript+arcgis/core创建地图并处理vscode类型推断报错

qq_40639686

已于 2023-09-01 10:07:52 修改

阅读量1.1k

点赞数

分类专栏： arcgis/core学习实践文章标签： typescript vscode vue.js arcgis

于 2023-02-01 23:59:10 首次发布

本文链接：https://blog.csdn.net/qq_40639686/article/details/128842255

版权

arcgis/core学习实践专栏收录该内容

3 篇文章 1 订阅

订阅专栏

省略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用的，不用管。。