将图斑定位展示在地图的上半部分uniapp
·
1.效果如下

2.代码
在地图框架搭好的前提下,即window._map已存在。主要使用了maptalks的fitExtent方法。
import * as maptalks from "@/utils/maptalks-gl.js"
import {geojsonToWKT,wktToGeoJSON }from '@terraformer/wkt'
dwMap(geom) {
console.log(geom,'geom')
if (geom) {
let geo = this.toGeoJson(geom);
let geometry = maptalks.GeoJSON.toGeometry(geo);
// 获取图斑的边界范围
const extent = geometry.getExtent();
const mapSize = window._map.getSize();
// 使用 fitExtent 一步完成缩放、居中和边距适配
window._map.fitExtent(extent, 0, {
// duration: 1000, // 飞入动画时长,毫秒
// easing: 'out', // 缓动函数,先快后慢,视觉更丝滑
paddingBottom: mapSize.height * 0.6,
});
}
},
toGeoJson(WtK){
let geojson = wktToGeoJSON(WtK)
return geojson
}
打印的geom格式:
POLYGON((114.52535640621036 37.838695582025245,114.66107712715306 37.814227032990445,114.58939883624329 37.71042403985675,114.51261751279634 37.75679132810237,114.52535640621036 37.838695582025245))
3.官方网站
Class: Map
https://maptalks.org/maptalks.js/api/1.x/Map.html#fitExtent
更多推荐
所有评论(0)