OpenLayers认识
WebGIS四大框架：== Leaflet、OpenLayers、Mapbox、Cesium ==
OpenLayers 是一个强大的开源 JavaScript 地图库，专注于提供可嵌入网页的交互式地图体验。作为一款地理信息系统（GIS）的前端开发工具，OpenLayers 提供了灵活的 API，允许开发者构建各种地图应用，从简单的地图显示到复杂的地理信息分析。
1.下载ol 插件
npm i ol
2.初始化
const map = new Map({ target: mapElement.value, layers: tiandilayers, view: view});
-
1.参数target
制定初始化的地图设置到html页面上的哪一个DOM元素上。 -
2.参数layers
一个map可以设置多个layer，图层是构成openlayers的基本单位，地图是由多个layer组成的。 -
3.参数view
视图是设置地图的显示范围，包括中心点，放大级别，坐标。
EPSG:4326 是一个GIS(地理信息系统) 中使用的坐标参考系代码，它表示一个地理坐标系，即使用经纬度表示地理位置。
EPSG:4326 常被用于在网络上传输地理位置信息，如在Web地图服务和地理位置Api等。
EPSG:4326 的经纬度范围：经度范围在-180°到180°之间，维度范围在-90°到90°之间。
区别：
EPSG：4326 表示一个地理坐标系，使用经纬度来表示地理位置，通常用于地理位置的显示和制图。
EPSG:3857表示一个Web墨卡托坐标系，使用平面墨卡托投影来表示地理位置。
3.结合高德地图
<template> <div id="map" ref="mapElement"></div> </template> <script setup> import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import XYZ from 'ol/source/XYZ'; import VectorLayer from 'ol/layer/Vector'; import VectorSource from 'ol/source/Vector'; import Feature from 'ol/Feature'; import Point from 'ol/geom/Point';import { fromLonLat } from 'ol/proj'; import { onMounted, ref } from 'vue';const mapElement=ref(null)const initMap=()=>{ // 创建高德地图的 XYZ 瓦片源 const amapSource = new XYZ({ url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}&lang=zh_cn&scale=1&size=1', // 高德地图的瓦片服务可能有不同的 URL 格式和参数，这里是一个示例 }); // 创建 OpenLayers 图层，使用上面创建的瓦片源 const amapLayer = new TileLayer({ source: amapSource, }); // 创建 OpenLayers 地图实例 const map = new Map({ target: mapElement.value, layers: [amapLayer], view: new View({ center: fromLonLat([116.397428, 39.90923]), // 设置地图中心点坐标（例如：北京） zoom: 8, // 设置初始缩放级别 // projection:"EPSG:4326"}), }); }onMounted(()=>{initMap()})</script>
<style scoped> 4.结合天地图
//主要改变图层layers//图层数组 layers,天地图let tiandilayers= [new TileLayer({source: new XYZ({crossOrigin: 'anonymous',url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的key'})}),new TileLayer({source: new XYZ({crossOrigin: 'anonymous',url: 'https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=你的key'})})]const map = new Map({ target: mapElement.value, layers: tiandilayers, view: new View({ center: fromLonLat([116.397428, 39.90923]), // 设置地图中心点坐标（例如：北京） zoom: 8, // 设置初始缩放级别 // projection:"EPSG:4326"}), }); //添加点图层const source = new VectorSource({ features: [new Feature(new Point(fromLonLat([116.485467, 39.907761])))], // 假设的点坐标（需转换为 OpenLayers 使用的坐标系统） }); const vectorLayer = new VectorLayer({ source: source, }); map.addLayer(vectorLayer); 
