vue arcgis地图安装使用;引入文件报错404,地图显示不全、缺块;常见问题。

ArcGIS是什么?

ArcGIS 是一个全面的系统,用户可用其来收集、组织、管理、分析、交流和发布地理信息。作为世界领先的地理信息系统 (GIS) 构建和应用平台,ArcGIS 可供全世界的人们将地理知识应用到政府、企业、科技、教育和媒体领域。ArcGIS 可以发布地理信息,以便所有人都可以访问和使用。本系统可以在任何地点通过 web 浏览器、移动设备(例如智能手机和台式计算机)来使用。

使用:

效果图:

1.安装依赖:

cnpm i esri-loader -S

cnpm i [email protected] -S        //安装指定版本

2.使用:

<template>
  <div id="SceneView"></div>
</template>
 
<script>
import { loadModules } from "esri-loader";
 
export default {
  data() {
    return {};
  },
  mounted() {
    this.createView();
  },
  methods: {
    //创建视图
    createView() {
    //   let options = {
    //     url: "https://js.arcgis.com/4.15/",
    //     css: "https://js.arcgis.com/4.15/esri/themes/light/main.css"
    //   };
        
//         const options = {
//     url: 'https://js.arcgis.com/3.24/'
// }
const options = {
    // url: 'https://js.arcgis.com/3.24/',
    // url: 'https://js.arcgis.com/3.5/',
    // css: "https://js.arcgis.com/3.24/esri/themes/light/main.css"
}
    //   loadModules([
    //     'esri/map',
    //     'esri/layers/ArcGISTiledMapServiceLayer',
    //     'esri/layers/ArcGISDynamicMapServiceLayer',
    //     'esri/symbols/SimpleMarkerSymbol',
    //     'esri/layers/GraphicsLayer',
    //     'esri/symbols/PictureMarkerSymbol',
    //     'esri/tasks/QueryTask',
    //     'esri/tasks/query',
    //     'esri/geometry/Point',
    //     'esri/graphic',
    //     'esri/SpatialReference',
    //     'esri/graphic',
    //   ],options).then(
      loadModules(["esri/Map", "esri/views/SceneView",
      ]).then(
        ([Map, SceneView]) => {
          let map = new Map({
            basemap: "streets",
            ground: "world-elevation"
          });
 
          let view = new SceneView({
            container: "SceneView", // Reference to the DOM node that will contain the view
            map: map // References the map object created in step 3
          });
 
          console.info(view, 111);
        }
      );
    }
  }
};
</script>
 
<style>
#SceneView {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>

常见问题:

arcgis不同版本对应的模块是不一样的,所以在安装依赖的时候需要确认自己安装的模块是否一致。如果缺失什么参数造成demo无法预览,可以参考官网配置项:

官网:

ArcGIS Developer

github仓库:

https://github.com/Esri/esri-loader

1.arcgis引入文件报错404。

引入arcgis官网的资源,因为在国外地址,所以经常容易出现404的情况,可以使用cdn的方式引入资源,loadModules函数的第二项options参数中url可以配置引入cdn不同版本。当然也可以直接修改引入的文件地址,比如本地。

const options = {

          version:'4.23',

    // url: 'https://js.arcgis.com/3.24/',

    // url: 'https://js.arcgis.com/3.5/',

    url: 'https://js.arcgis.com/3.24/',

    version:'4.23',

    css: true ,

    // css: "https://js.arcgis.com/3.24/esri/themes/light/main.css"

}

2.地图显示不全、缺块

需要将options的css属性设置为true。

3.如果项目最终是在内网访问?

需要下载离线sdk,引入本地文件。

相关博客:

vue使用arcgis for js_孙霸天的博客-CSDN博客_vue 使用arcgis

Vue.js 项目引入 esri-loader 并加载离线地图_魏晓蕾的博客-CSDN博客

猜你喜欢

转载自blog.csdn.net/qq_42740797/article/details/125225639