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无法预览,可以参考官网配置项:
官网:
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,引入本地文件。