蓝田县住房与城乡建设局网站,ps做网站的效果图,wordpress安装数据库连接错误,世界十大互联网公司这篇展示了如何在地图上添加第二次按下鼠标移动鼠标实现拖拽缩放地图效果。
官网demo地址#xff1a; Double click, Drag and Zoom 官网介绍文字的翻译如下#xff1a; 示例比较简单#xff0c;直接贴代码#xff1a; const map new Map({//添加第二次点击拖拽缩放地图i… 这篇展示了如何在地图上添加第二次按下鼠标移动鼠标实现拖拽缩放地图效果。
官网demo地址 Double click, Drag and Zoom 官网介绍文字的翻译如下 示例比较简单直接贴代码 const map new Map({//添加第二次点击拖拽缩放地图interactions: defaultInteractions().extend([new DblClickDragZoom()]),layers: [new Tile({source: new XYZ({url: https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x},}),}),],target: map,view: new View({center: [0, 0],zoom: 2,}),});
interactions属性用来设置地图上的交互DblClickDragZoom就是第二次按下鼠标拖拽缩放的类。 鼠标双击放大事件是openlayers自带的如果要取消需要这样写 // 禁用双击放大interactions: defaultInteractions({doubleClickZoom: false, }),
完整代码 templatediv classboxh1Double click, Drag and Zoom/h1div idmap/div/div
/templatescript
import Map from ol/Map.js;
import OSM from ol/source/OSM.js;
import View from ol/View.js;
import Tile from ol/layer/Tile;
import XYZ from ol/source/XYZ;
import {DblClickDragZoom,defaults as defaultInteractions,
} from ol/interaction.js;
export default {data() {return {map: null,};},methods: {initMap() {const map new Map({//添加第二次点击拖拽缩放地图interactions: defaultInteractions().extend([new DblClickDragZoom()]),// 禁用双击放大// interactions: defaultInteractions({// doubleClickZoom: false, // }),layers: [new Tile({source: new XYZ({url: https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x},}),}),],target: map,view: new View({center: [0, 0],zoom: 2,}),});},},mounted() {this.initMap();},
};
/script
style scoped
#map {width: 100%;height: 500px;
}
.box {height: 100%;
}
/style
