通过四点画面并定位中心
// 取四点画面,通过面定位
toCenter(list) {
let point1 = [] // 点 左下
let point2 = [] // 点 左上
let point3 = [] // 点 右上
let point4 = [] // 点 右下
list.forEach((item, index) => {
const { coox, cooy } = item
if (coox < 0 || coox < 0) { return }
item.x = coox
item.y = cooy
if (!index) {
point1 = [coox, cooy]
point2 = [coox, cooy]
point3 = [coox, cooy]
point4 = [coox, cooy]
return
}
if (coox < point1[0] && cooy < point1[1]) { return (point1 = [coox, cooy]) }
if (coox < point2[0] && cooy > point2[1]) { return (point2 = [coox, cooy]) }
if (coox > point3[0] && cooy > point3[1]) { return (point3 = [coox, cooy]) }
if (coox > point4[0] && cooy < point4[1]) { return (point4 = [coox, cooy]) }
})
// 地图 跳转
const geometry = new this.$esri.Polygon({
rings: [point1, point2, point3, point4, point1],
spatialReference: this.$mapView['map'].spatialReference
})
// this.$mapView['map'].goTo(geometry).then(() => (this.$mapView['map'].zoom -= 1))
this.$mapView['map'].goTo(geometry)
},
不闪烁更新地图元素
// await this.clearLayerData()
// 构建 graphics
const graphics = this.listData.map((item, i) => {
item.uniqueId = i // 补充ID
return {
geometry: {
type: 'point',
x: item.x,
y: item.y,
spatialReference: this.$mapView.spatialReference
},
attributes: item
}
})
// 添加图层数据
this.layers.riverWaterLevel.applyEdits({
addFeatures: graphics
const layer = this.layers
// 第一次要渲染所有的点,第二次后进行更新操作
layer.riverWaterLevel.queryFeatures().then(function(results) {
if (results.features.length > 0) {
this.layers.riverWaterLevel.applyEdits({
updateFeatures: graphics
})
} else {
layer.riverWaterLevel.applyEdits({
addFeatures: graphics
})
}
})
// 添加数据
根据值查询要素Features
const layer = this.$mapView.map.findLayerById('sewageFarmClickLayer')
if (layer === undefined) {
return false
}
const query = layer.createQuery()
query.where = `NAME = '${item.sjdw}'`
layer.queryFeatures(query).then(results => {
if (results.features.length) {
const graphic = results.features[0]
// 调取地图的定位、高亮函数
console.log(graphic)
this.$mapView.goTo(graphic)
}
})
根据值查询要素Features
const layer = this.$mapView.map.findLayerById('sewageFarmClickLayer')
const graphic = layer.graphics.find(graphic => {
return graphic.attributes.swid === 'id'
})
地图定位goTo
this.$mapView.goTo(graphic)
增加高亮效果highlight
this.$mapView.whenLayerView(graphic.layer).then(layerView => {
if (this.highlight) {
this.highlight.remove()
}
this.highlight = layerView.highlight(graphic)
})
添加图形并进行定位
this.$mapView.graphics.removeAll()
const graphic = new this.$esri.Graphic({
geometry: {
type: 'point',
x: row.coox,
y: row.cooy,
spatialReference: this.$mapView.spatialReference
},
symbol: {
type: 'picture-marker',
url: this.getSymbolPath(row.alarmSort),
width: '20px',
height: '26px',
yoffset: '13px'
}
})
this.$mapView.graphics.add(graphic)
this.$mapView.goTo({
target: graphic,
zoom: 12
})
获取当前地图层级
this.$mapView.zoom
goTo方法总结
goTo方法的参数可以是两个或一个。当只有一个参数时,是一个数组;当是两个参数时,第一个参数是数组(一维或二维)或对象或某个图层的graphics,第二个参数是duration。
示例:
view.goTo([112.6, 22.542])
------------------------------------------
mapView.goTo([113.6042903, 22.5501197], {
duration: 2000 //视角跳转时长为2秒
})
---------------------------------------------
mapView.goTo([
[113.59764, 22.49856],
[113.59513, 22.50922],
[113.60482, 22.51036],
[113.60669, 22.49959],
[113.59764, 22.49856]
], {
duration: 2000
});
---------------------------------------------
mapView.goTo({
target: [113.60389, 22.54591],
zoom: 13,
heading: 48,
tilt: 40
}, {
duration: 2000, //视角跳转时长为2秒,
}).then(function () {
// console.log("跳转完成");
})
-------------------------------------------------
mapView.goTo(videoPointLayer.graphics, {
duration: 2000 //视角跳转时长为2秒
})
1、可以使用定时器创建连续的动画
goTo返回一个承诺,该承诺在动画完成时解决。这个承诺可能会被链接以创建一系列动画。
view.goTo([112.6, 22.542])
.then(function() {
return view.goTo([113.6, 25.542]);
})
.then(function() {
return view.goTo([113.6, 22.542]);
});
2、点击,回到初始化位置以及视角
backToOldVisualAngle() {
var mapView = global.mapView;
mapView.goTo({
target: [113.60389, 22.54591],
zoom: 13,
heading: 48,
tilt: 40
}, {
duration: 2000, //视角跳转时长为2秒,
}).then(function () {
// console.log("跳转完成");
})
},
// 下面这个camera属性似乎不灵但是,
// mapView.goTo({
// camera: {
// position: {
// x: 113.60389,
// y: 22.54591
// // z: 0
// },
// },
// zoom: 13,
// heading: 48,
// tilt: 40
// }, {
// duration: 2000,
// });
3、扶正视角,但是不回到初始位置
backToOldVisualAngle() {
var mapView = global.mapView;
mapView.goTo({
zoom: 13,
heading: 48,
tilt: 40
}, {
duration: 2000, //视角跳转时长为2秒,
}).then(function () {
// console.log("跳转完成");
})
},
4、 target: [113.6, 22.542], 可以换为
center: {
x: 113.6,
y: 22.542,
spatialReference: {wkid: 4490}在这里插入代码片
},
并添加参考系属性
view.when(function () {
view.goTo({
// target: [113.6, 22.542],
center: {
x: 113.6,
y: 22.542,
spatialReference: {wkid: 4490}
},
zoom: 13,
heading: 80, // 旋转角
tilt: 30 // 倾斜角
}, {
duration: 2000 // 视角跳转时长为2秒,
})
})
获取中心点
const local = { // 记录地图的状态
x: this.$mapView.center.x,
y: this.$mapView.center.y,
spatialReference: this.$mapView.spatialReference,
zoom: this.$mapView.zoom
}
this.$store.commit('drainFacilityIndex/setMapViewZoom', local)
跳转到指定点
// 返回最初状态
const { x, y, spatialReference, zoom } = this.$store.state.drainFacilityIndex.mapView
const target = new this.$esri.Point(
{ type: 'point',
x: x,
y: y,
spatialReference: spatialReference
})
this.$mapView.goTo({
target: target,
zoom: zoom
})
不刷新更新图层内容
// 获取数据
await this.getListData()
// await this.clearLayerData()
// 构建 graphics
const graphics = this.listData.map(item => {
return {
geometry: {
type: 'point',
x: item.x,
y: item.y,
spatialReference: this.$mapView.spatialReference
},
attributes: item
}
})
// 第一次要渲染所有的点,第二次后进行更新操作
const layer = this.layers.riverWaterLevel
layer.queryObjectIds().then(function(ids) {
const addFeatures = []
const updateFeatures = []
graphics.forEach(item => {
if (ids.indexOf(item.attributes.id) !== -1) {
updateFeatures.push(item)
} else {
addFeatures.push(item)
}
})
layer.applyEdits({
addFeatures: addFeatures,
updateFeatures: updateFeatures
})
})
图层位置变换监听
mapView: {
handler: function() {
if (this.mapView) {
// 弹窗位置变动监听
const handle = this.mapView.watch('extent', this.setPopupPosition)
this.$once('hook:beforeDestroy', () => {
handle.remove()
})
}
},
immediate: true
}
图层截屏
screenShot() {
this.$mapView['map'].takeScreenshot({ area: {}, format: 'png' }).then(screenshot => {
this.downloadImage('广州市水旱灾害综合防御(图层截屏)', screenshot.dataUrl)
})
},
downloadImage(filename, dataUrl) {
if (!window.navigator.msSaveOrOpenBlob) {
const element = document.createElement('a')
element.setAttribute('href', dataUrl)
element.setAttribute('download', filename)
element.style.display = 'none'
document.body.appendChild(element)
element.click()
document.body.removeChild(element)
} else {
const byteString = atob(dataUrl.split(',')[1])
const mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0]
const ab = new ArrayBuffer(byteString.length)
const ia = new Uint8Array(ab)
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i)
}
const blob = new Blob([ab], { type: mimeString })
window.navigator.msSaveOrOpenBlob(blob, filename)
}
}
全屏展示所有点
this.$mapView['map'].extent = this.comBaseLayer.fullExtent