柚子快報(bào)邀請(qǐng)碼778899分享：arcgis卷簾對(duì)比
柚子快報(bào)邀請(qǐng)碼778899分享：arcgis卷簾對(duì)比
.content {
width: 100%;
height: 100%;
position: relative;
.map {
position: absolute;
width: 100%;
height: 100%;
&:nth-child(2){
z-index: -1;
}
}
/* 垂直分割線 */
.vertical_line {
position: absolute;
top: 0%;
left: 48%;
bottom: 0%;
z-index: 1;
float: left;
width: 10px;
background-color: rgba(50, 50, 50, 0.75);
user-select: none;
}
/* 圓按鈕 */
.circle {
width: 30px;
height: 30px;
background-color: rgba(50, 50, 50, 0.75);
border-radius: 50%;
position: absolute;
top: 40%;
left: 40%;
bottom: 4.2%;
z-index: 2;
margin-left: -10px;
user-select: none;
}
/* 左箭頭 */
.triangle-left {
width: 0;
height: 0;
border-top: 4px solid transparent;
border-right: 7px solid white;
border-bottom: 4px solid transparent;
position: absolute;
top: 40%;
margin-left: -8px;
margin-top: 12px;
z-index: 3;
user-select: none;
}
/* 右箭頭 */
.triangle-right {
width: 0;
height: 0;
border-top: 4px solid transparent;
border-left: 7px solid white;
border-bottom: 4px solid transparent;
position: absolute;
top: 40%;
margin-left: 10px;
margin-top: 12px;
z-index: 3;
user-select: none;
}
}
//mapList = {}
//ArcGISApi = let modules = ["esri/Map", ...] export { modules }
rollerLoad() {
let that = this;
let ArcGISApi = that.ArcGISApi;
var esriContainerDiv = 'view1'
var esriSwipeContainerDiv = 'view2'
loadModules(modules, )
.then(that.TDTinstance)
.then(() => {
// 原始地圖
mapList['view1'] = new ArcGISApi.SceneView({
container: esriContainerDiv,
spatialReference: {
wkid: 4490
},
map: mapView,
zoom: 12,
camera: {
position: [117.012375, 36.62, 9000],
tilt: 30,
},
});
// 新生地圖
mapList['view2'] = new ArcGISApi.SceneView({
container: esriSwipeContainerDiv,
spatialReference: {
wkid: 4490
},
map: mapSecond,
zoom: 12,
camera: {
position: [117.012375, 36.62, 9000],
tilt: 30,
},
});
mapList['view1'].ui.components = [];
mapList['view2'].ui.components = [];
// 分割線移動(dòng)狀態(tài)
var isSlitLineDragging = false;
document.getElementById('swipe_split_box').onmousedown = function () {
isSlitLineDragging = true
}
document.getElementById('swipe_split_box').onmouseup = function () {
isSlitLineDragging = false
}
/**
* 分割線移動(dòng)事件
* @param {Object} e 分割線移動(dòng)事件對(duì)象
*/
function pointMove(e) {
e.stopPropagation()
updateMapSwipeLocation(e.x)
};
/**
* 更新卷簾地圖容器展開位置
* @param {Number} location 當(dāng)前的位置
* @param {Boolean} isInit 是否是初始化
*/
function updateMapSwipeLocation(location, isInit) {
const swipeMap = document.getElementById(esriSwipeContainerDiv).getBoundingClientRect()
const offsetX = location;
if (isSlitLineDragging || isInit) {
document.getElementById(esriSwipeContainerDiv).style.cssText = 'clip:rect(0px,' + offsetX + 'px, ' + swipeMap.height + 'px,0px)';
document.getElementById(esriSwipeContainerDiv).style.zIndex = '1';
document.getElementById('vertical_line').style.left = (offsetX - 50 + (swipeMap.width * 0.024)) + 'px ';
document.getElementById('swipe_circle').style.left = (offsetX - 50 + (swipeMap.width * 0.024)) + 'px ';
document.getElementById('swipe_triangle_left').style.left = (offsetX - 50 + (swipeMap.width * 0.024)) + 'px ';
document.getElementById('swipe_triangle_right').style.left = (offsetX - 50 + (swipeMap.width * 0.024)) + 'px ';
}
};
/**
* 同步兩個(gè)視圖容器
* @param {Object} view 視圖容器
* @param {Object} others 其它的視圖容器
* @return {Object} 監(jiān)聽事件
*/
function synchronizeView(view, others) {
others = Array.isArray(others) ? others : [others]
let viewpointWatchHandle
let viewStationaryHandle
let otherInteractHandlers
let scheduleId
const clear = function () {
if (otherInteractHandlers) {
otherInteractHandlers.forEach(function (handle) {
handle.remove()
})
}
viewpointWatchHandle && viewpointWatchHandle.remove()
viewStationaryHandle && viewStationaryHandle.remove()
scheduleId && clearTimeout(scheduleId)
otherInteractHandlers = viewpointWatchHandle = viewStationaryHandle = scheduleId = null
}
const interactWatcher = view.watch('interacting, animation', (newValue) => {
if (!newValue) {
return
}
if (viewpointWatchHandle || scheduleId) {
return
}
// start updating the other views at the next frame
scheduleId = setTimeout(function () {
scheduleId = null
viewpointWatchHandle = view.watch('viewpoint', (newValue) => {
others.forEach(function (otherView) {
otherView.viewpoint = newValue
})
})
}, 0)
// stop as soon as another view starts interacting, like if the user starts panning
otherInteractHandlers = others.map(otherView => {
return ArcGISApi.WatchUtils.watch(otherView, 'interacting,animation',
(value) => {
if (value) {
clear()
}
}
)
})
// or stop when the view is stationary again
viewStationaryHandle = new ArcGISApi.WatchUtils.whenTrue(view, 'stationary', clear)
})
return {
remove: function () {
this.remove = function () {}
clear()
interactWatcher.remove()
},
}
};
/**
* 同步兩個(gè)視圖容器入口函數(shù)
* @param {Object} views 多個(gè)視圖容器
* @return {Object} 移除事件
*/
function synchronizeViews(views) {
let handles = views.map(function (view, idx, views) {
const others = views.concat()
others.splice(idx, 1)
return synchronizeView(view, others)
})
return {
remove: function () {
this.remove = function () {}
handles.forEach(function (h) {
h.remove()
})
handles = null
},
}
};
mapList['view1'].on('pointer-move', (e) => {
pointMove(e)
})
mapList['view2'].on('pointer-move', (e) => {
pointMove(e)
})
// 設(shè)置初始位置
const swipeMap = document.getElementById(esriSwipeContainerDiv).getBoundingClientRect();
updateMapSwipeLocation(swipeMap.width * 0.5, true);
// 同步視圖
synchronizeViews([mapList['view1'], mapList['view2']])
})
},
柚子快報(bào)邀請(qǐng)碼778899分享：arcgis卷簾對(duì)比
參考文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
FNAC藝術(shù)外貿(mào)坊
