VUE项目arcgis初探

概述

随着大前端的发展，GIS服务大佬ArcGIS API for JavaScript版本升级到4.0之后AMD和ESM模块化得以支持。

vue项目搭建

搭建空的vue项目请参考vue-cli

接着安装arcgis依赖

// AMD
npm install --save esri-loader// es module
npm install @arcgis/core

官方链接

演示示例

一图顶千言：

代码：

<template><div><div id="viewDiv"></div><button @click="computerScreen">计算屏幕坐标</button></div>
</template><script>
let map = null,view = null;
import Map from "@arcgis/core/Map";
// import SceneView from "@arcgis/core/views/SceneView";
import MapView from "@arcgis/core/views/MapView";
import esriConfig from "@arcgis/core/config";
import Graphic from "@arcgis/core/Graphic";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
export default {data() {return {};},created() {},mounted() {this.createView();this.drawGeometry();},beforeDestroy() {this.destroyData();},methods: {// 初始化销毁数据destroyData() {view.destroy();map.destroy();view = null;map = null;},createView() {// key AAPK5fc583c193664d3dbdb664130690793eL3g5sfdLFmSxJthgEYjcR-CQpFHINVJbI43zybAml__Q4Iwrbi1ZGvktbfVH82UkesriConfig.apiKey ="AAPK5fc583c193664d3dbdb664130690793eL3g5sfdLFmSxJthgEYjcR-CQpFHINVJbI43zybAml__Q4Iwrbi1ZGvktbfVH82Uk";esriConfig.assetsPath = "./assets";map = new Map({basemap: "topo-vector",});view = new MapView({container: "viewDiv", // Reference to the view div created in step 5map: map, // Reference to the map object created before the viewzoom: 13, // Sets zoom level based on level of detail (LOD)center: [-118.805, 34.027],logo: false, //不显示Esri的logo});view.on("click", this.clickInfo);console.log(view);},clickInfo(event) {console.log(event);},// 画图drawGeometry() {const graphicsLayer = new GraphicsLayer();map.add(graphicsLayer);const point = {//Create a pointtype: "point",longitude: -118.80657463861,latitude: 34.0005930608889,};const simpleMarkerSymbol = {type: "simple-marker",color: [226, 119, 40], // Orangeoutline: {color: [255, 255, 255], // Whitewidth: 1,},};const pointGraphic = new Graphic({geometry: point,symbol: simpleMarkerSymbol,});graphicsLayer.add(pointGraphic);// Create a line geometryconst polyline = {type: "polyline",paths: [[-118.821527826096, 34.0139576938577], //Longitude, latitude[-118.814893761649, 34.0080602407843], //Longitude, latitude[-118.808878330345, 34.0016642996246], //Longitude, latitude],};const simpleLineSymbol = {type: "simple-line",color: [226, 119, 40], // Orangewidth: 2,};const polylineGraphic = new Graphic({geometry: polyline,symbol: simpleLineSymbol,});graphicsLayer.add(polylineGraphic);// Create a polygon geometryconst polygon = {type: "polygon",rings: [[-118.818984489994, 34.0137559967283], //Longitude, latitude[-118.806796597377, 34.0215816298725], //Longitude, latitude[-118.791432890735, 34.0163883241613], //Longitude, latitude[-118.79596686535, 34.008564864635], //Longitude, latitude[-118.808558110679, 34.0035027131376], //Longitude, latitude],};const simpleFillSymbol = {type: "simple-fill",color: [227, 139, 79, 0.8], // Orange, opacity 80%outline: {color: [255, 255, 255],width: 1,},};const popupTemplate = {title: "{Name}",content: "{Description}",};const attributes = {Name: "Graphic",Description: "I am a polygon",};const polygonGraphic = new Graphic({geometry: polygon,symbol: simpleFillSymbol,attributes: attributes,popupTemplate: popupTemplate,});graphicsLayer.add(polygonGraphic);},// 计算坐标 toMap toScreencomputerScreen() {const mapPoint = {x: -49.97,y: 41.73,spatialReference: {wkid: 4326,},};const screenPoint = view.toScreen(mapPoint);console.log(screenPoint);},},
};
</script><style scoped lang="scss">
@import "~@arcgis/core/assets/esri/themes/dark/main.css";
#viewDiv {width: 100%;height: 80vh;
}
</style>

示例下载地址

总结

欢迎留言交流

VUE项目arcgis初探相关推荐

如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
single-spa结合vue项目初探
single-spa结合vue项目初探本次案例以vue-element-admin为例,验证single-spa的可接入性.根据single-spa的官网介绍,推荐将项目的所有文件(包括图片和css ...
ArcGIS + vue 项目实战
ArcGIS+ vue 项目实战一.搭建vue项目此处省略............. 二.vue项目中引入arcgis 安装命令 npm install --save esri-loader 三. ...
从零开始的VUE项目–01（前期准备和前台vue搭建）
前端:VUE (2.9.6) (编码工具:Visual Studio Code) 后台:ASP.NET Web API (编码工具:Visual Studio 2019) 数据库:MYSQL (可视化 ...
记录第一次成功将vue项目打包并部署到centos云服务器上并访问(包含多个vue项目部署nginx配置说明)
文章目录准备 vue项目打包配置服务器使用xshell 使用xftp 当项目更新时操作小结准备 vscode:用于打包vue项目(需要提前安装好node与npm,推荐使用mvn管理node, ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
vue项目nginx部署子目录_vue 多项目部署---二级目录
新项目:同一域名下部署多个vue项目, 根目录vue项目不需要按下面的方式进行打包部署 https://www.bitedit.com/ 下面三个项目以二级目录部署 https://www.bited ...
【亲测可用】用Electron和electron-builder打包Vue项目为exe可执行文件安装包（不推荐，个人觉得没有VNISEdit和NW好用，而且有些配置文件还挺脑残！）
官方帮助文档http://www.electronjs.org/docs 有时候运行安装依赖包会很慢建议在(c)npm config edit之后弹出的.(c)npmrc记事本里面加入 electro ...
【2】Vue项目引用Element UI（饿了么框架）菜单导航条初期配置
首先要理解Vue项目加载顺序: index.html → main.js → App.vue → nav.json→ routes.js → page1.vue index.html建议加入样式 &l ...

VUE项目arcgis初探

概述

vue项目搭建

演示示例

总结

VUE项目arcgis初探相关推荐

最新文章

热门文章