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: Maphttps://maptalks.org/maptalks.js/api/1.x/Map.html#fitExtent

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐