vue使用ArcGIS以及基于arcgis封装的地图API |
您所在的位置：网站首页 › arcgis接口调用 › vue使用ArcGIS以及基于arcgis封装的地图API |
|
一.安装arcgis地图加载器 二.使用arcgis加载地图 三.vue使用npm没有的地图api,即自己或他人封装的（是个大坑） 一.安装arcgis地图加载器1.使用npm install esri-loader --save 或者 yarn add esri-loader 2.在项目中需要加载地图的vue文件（组件）中引入 esri-loader import * as esriLoader from 'esri-loader' 二.使用arcgis加载地图1.在style中使用@import引入arcgis的css文件 @import url('js.arcgis.com/4.4/esri/cs… 2.在methods里编写加载地图代码，如下 createMap: function() { const options = { //url: "https://js.arcgis.com/4.12/init.js" //这是官网demo的地址 }; let that = this; esriLoader .loadModules([//这里根据自己的需要引入需要用到的模块 // "esri/tasks/Locator", "esri/Map", "esri/views/MapView",//2D地图引入，3D使用screenView "esri/layers/TileLayer",//地图图层可以使用这个类来添加 //"esri/layers/FeatureLayer",//自定义的图层 "esri/Graphic",//图像，点线面等 //"esri/layers/GroupLayer", // "esri/widgets/LayerList", "esri/widgets/Fullscreen",//全屏小部件 "esri/widgets/Zoom",//放大缩小部件 "dojo/domReady!" ]) .then( ([Map, MapView, TileLayer, Graphic, Fullscreen, Zoom]) => { var transportationLayer = new TileLayer({ url: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer", //这边使用的是国内服务器上的中国地图 id: "streets" }); const map = new Map({ //basemap: "streets",//地图样式 layers: [transportationLayer]//低图的图层，我这里加入的是上一步定义的图层 }); const mapview = new MapView({ map: map,//绘制的地图 container: "viewDiv",//绘制地图的ID zoom: 5, center: [120.7346125, 25.0563901] // popup: {//配置弹窗属性 // dockEnabled: true, // dockOptions: { // buttonEnabled: false, // breakpoint: false // } // } }); //地图加载时左上角会有默认的缩放组件，这一步是清空左上角组件 mapview.ui.empty("top-left"); mapview.ui.add(//在右上角添加全屏组件 new Fullscreen({ view: mapview }), "top-right" ); mapview.ui.add(new Zoom({ view: mapview }), "top-right");//在右上角添加缩放组件 var point = {//创建点，并确定点的经度和纬度 type: "point", // autocasts as new Polyline() x: 120.3, y: 30.68 }; var point2 = { type: "point", // autocasts as new Polyline() x: 115.3, y: 27.68 }; //添加图片修饰点 var lineSymbol = { type: "picture-marker", // autocasts as new PictureMarkerSymbol() url: that.markpic // width: "64px", // height: "64px" }; // Create an object for storing attributes related to the line var lineAtt = {//定义弹窗的表头 car_info: "Keystone Pipeline", car_code: "TransCanada", car_num: "12131321", user: "arsi" }; let locusAction = {//自定义的操作 title: "车辆运行轨迹", id: "locus" }; var template = {//弹窗的内容模板 // autocasts as new PopupTemplate() title: "车辆信息", content: [ { type: "fields", // FieldsContentElement fieldInfos: [ { fieldName: "car_info", visible: true, label: "车辆信息" }, { fieldName: "car_code", visible: true, label: "车牌号" }, { fieldName: "car_num", visible: true, label: "车辆编号", format: { places: 0, digitSeparator: true } }, { fieldName: "user", visible: true, label: "用户名" } ] } ], actions: [locusAction] }; var polylineGraphic = new Graphic({//绘制点 geometry: point, symbol: lineSymbol, attributes: lineAtt, popupTemplate: template }); var pointGraphic = new Graphic({ geometry: point2, symbol: lineSymbol, attributes: lineAtt, popupTemplate: template }); //将绘制的点加入地图图层 mapview.graphics.addMany([polylineGraphic, pointGraphic]); function locusThis() {//上面自定义的操作点击后的执行函数 // mapview.popup.open({ // title: "时间选择", // content: "1111" // }); // template.content.push(); // mapview.graphics.polylineGraphic.popupTemplate = template; } //关闭自动打开弹窗 // mapview.popup.autoOpenEnabled = false; mapview.popup.on("trigger-action", function(event) {//设置点击操作触发条件 if (event.action.id === "locus") { locusThis(); } }); }, reason => { console.log(reason); } ); } 复制代码3.在mounted里面调用该方法就可以创建地图了，在vue里面建议可以单独封装成一个组件供需要的地方引入 三.vue使用未上传至npm仓库的自己封装的地图API1.远程加载封装的JS入口文件，在js中封装了地图组件，然后通过window.require()引入需要使用的组件；然后就可以根据API进行自定义的功能开发了； |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |