原生2d web地图引擎

最新推荐文章于 2024-07-29 11:24:58 发布

Chaoying.

最新推荐文章于 2024-07-29 11:24:58 发布

阅读量346

点赞数 1

分类专栏：地图服务 webgis 文章标签：前端地图 webgis 渲染 gis 地图瓦片

本文链接：https://blog.youkuaiyun.com/TJLCY/article/details/139710521

版权

原生2d web地图引擎

下面这段核心代码，不依赖任何2d地图引擎如leaflet，open layers，基于原生的JavaScript实现了地图瓦片的加载渲染，以及地图平移和缩放等功能

<template>
	<div id="mapWrapper">
		<div id="mapPanel">
			<canvas
				@mousedown="startDrag"
				@mousemove="dragging"
				@mouseup="endDrag"
				@wheel="zoomMap"
			></canvas>
		</div>
	</div>
</template>
<script setup>
import { onMounted } from "vue";
// 地球参考椭球半径
const EARTHRADIUS = 6378137;
// 瓦片大小
const TILESIZE = 256;
// 是否是第一次加载
let initFlag = false;
// 初始化层级
let zoom = 16;
// 初始化比例尺
let mapSize = 0;
let scale = 0;
// 计算比例尺
// 根据地图层级计算整个地图瓦片阵列的行列数以及地图比例尺
const getMapScale = () => {
	mapSize = TILESIZE * Math.pow(2, zoom);
	scale = (2 * Math.PI * EARTHRADIUS) / mapSize;
};
getMapScale();
// 地图中心点坐标
let mapCenter = {
	lon: 0,
	lat: 0,
};
let pixelBound = {
	minPixelX: 0,
	maxPixelX: 0,
	minPixelY: 0,
	maxPixelY: 0,
};
let canvas;
// 基于中心点坐标计算地图的四至像素范围
const getPixelBound = () => {
	const [x, y] = lonlatToxy(mapCenter.lon, mapCenter.lat);
	const [pixelX, pixelY] = xyTopixel(x, y);
	pixelBound.minPixelX = pixelX - canvas.width / 2;
	pixelBound.maxPixelX = pixelX + canvas.width / 2;
	pixelBound.minPixelY = pixelY - canvas.height / 2;
	pixelB