当前位置：首页 > news >正文

openlayer:06点击按钮实现地图动画移动

news 来源：原创 2025/7/2 1:54:38

如何实现点击去辽宁按钮实现用动画效果将地图顺滑的切换到辽宁区域，点击回北京按钮后同样将地图使用动画效果移动回到辽宁。

本文介绍了如何通过OpenLayers库实现地图在北京市和辽宁省之间的平滑切换动画。首先，使用View类设置地图的初始中心点为北京市的经纬度坐标，并创建两个瓦片图层，分别用于显示地图和标注。接着，定义了两个函数go和back，分别用于将地图中心点切换到辽宁省和北京市，并通过animate方法实现平滑的动画效果。最后，将这些功能集成到一个React组件中，通过点击按钮触发相应的地图切换操作。完整代码展示了如何初始化地图、添加图层以及实现地图中心点的动画切换。

一、解释：

 let view=new View({center:fromLonLat([116.3903,39.9072]),zoom:7,})
先设置一个中心点，我使用的是北京市经纬度坐标
坐标系为墨卡托

let ditulayer=new TileLayer({source:new XYZ({url :"http://t5.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=528881a2c3d647268c04ab43dc46bd51"})})let biaojilayer=new TileLayer({source:new XYZ({url :"http://t3.tianditu.com/DataServer?T=cva_w&tk=faf4cf166d31edcaba5de523eae8084f&x={x}&y={y}&l={z}"})})创建瓦片图层，使用的是天地图上的数据
你也可以去使用天地图上的公开数据(之前文章有，可以去找下链接)

function go(){let newcenter=[123.464679,41.677586]let view=map.getView();view.animate({center:fromLonLat(newcenter),duration:2500})}function back(){let newcenter=[116.3903,39.9072]let view=map.getView();view.animate({center:fromLonLat(newcenter),duration:2500})}创建两个方法，一个是去辽宁（go方法），一个是回北京（back方法）
我们想两个位置来回切换，需要做的就是让坐标点发生改变
且利用animate动画来实现center中心的改变即可

二、完整代码：

import { useState ,useEffect} from 'react';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import XYZ from 'ol/source/XYZ.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import {fromLonLat} from 'ol/proj';
import './System.css'
import 'ol/ol.css';
let map=null;
function System() {let view=new View({center:fromLonLat([116.3903,39.9072]),zoom:7,})let ditulayer=new TileLayer({source:new XYZ({url :"http://t5.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=528881a2c3d647268c04ab43dc46bd51"})})let biaojilayer=new TileLayer({source:new XYZ({url :"http://t3.tianditu.com/DataServer?T=cva_w&tk=faf4cf166d31edcaba5de523eae8084f&x={x}&y={y}&l={z}"})})useEffect(()=>{map=new Map({target:"mapp",view:view,layers:[ditulayer,biaojilayer]})})function go(){let newcenter=[123.464679,41.677586]let view=map.getView();view.animate({center:fromLonLat(newcenter),duration:2500})}function back(){let newcenter=[116.3903,39.9072]let view=map.getView();view.animate({center:fromLonLat(newcenter),duration:2500})}return (<><div id="mapp" style={{width: "100%",height: "97vh"}}><div className="updown_btns"><div onClick={go}>去辽宁</div><div onClick={back}>回北京</div></div></div></>)
}export default System

相关文章：