发布时间:2023-11-18 17:30
vue安装esri-loader
npm install --save esri-loader
或者
yarn add esri-loader
npm地址:https://www.npmjs.com/package/esri-loader
esri的api地址:https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html
npm地址:esri-loader - npm
介绍教程和api均在npm地址里有,这里不再赘述
methods: {
doMap(){
// this will lazy load the ArcGIS API
// and then use Dojo\'s loader to require the classes
loadModules([\'esri/views/MapView\', \'esri/WebMap\'])
.then(([MapView, WebMap]) => {
// then we load a web map from an id
var webmap = new WebMap({
portalItem: { // autocasts as new PortalItem()
id: \'f2e9b762544945f390ca4ac3671cfa72\'
}
});
// and we show that map in a container w/ id #viewDiv
var view = new MapView({
map: webmap,
container: \'viewDiv\'
});
view.on(\"click\",function(e){
console.log(\'这里是点击事件\',e)
})
view.on(\"mouse-wheel\", (e) => {
console.log(\'这里是鼠标滚轮事件\',e)
});
// 全部的鼠标事件如下:
const events = [
\"pointer-enter\", //鼠标进入
\"pointer-leave\", //鼠标离开
\"pointer-move\", //鼠标移动
\"pointer-down\", //鼠标点击
\"pointer-up\", //鼠标点击结束
\"immediate-click\", //直接点击
\"click\", //点击
\"immediate-double-click\", //直接双击
\"double-click\", //双击
\"mouse-wheel\", //鼠标滚轮
\"drag\", //拖
\"hold\", //持有
\"key-down\", //响应按键
\"key-up\", //提高
\"focus\", //焦点
\"blur\", //模糊
\"resize\" //调整
];
})
.catch(err => {
// handle any errors
console.error(err);
});
}
}