三.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仓库的自己封装的地图API
1.远程加载封装的JS入口文件，在js中封装了地图组件，然后通过window.require()引入需要使用的组件；然后就可以根据API进行自定义的功能开发了；
