卫星影像
<template><div class="app"><div class="map-container" ref="map_ref"></div></div>
</template><script>
import Map from "ol/Map.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
import XYZ from "ol/source/XYZ.js";export default {data() {return {};},mounted() {this.initMap();},methods: {initMap() {// const map = new Map({// target: this.$refs.map_ref,// layers: [// new TileLayer({// source: new XYZ({// url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",// }),// }),// ],// view: new View({// center: [0, 0],// zoom: 2,// }),// });// 创建卫星图层const satelliteLayer = new TileLayer({source: new XYZ({url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",maxZoom: 18,}),opacity: 0.9,zIndex: 1,});// 创建街道图层作为备用const streetLayer = new TileLayer({source: new XYZ({url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}",maxZoom: 18,}),zIndex: 0,visible: false,});const map = new Map({target: this.$refs.map_ref,layers: [satelliteLayer, streetLayer],view: new View({center: [0, 0],zoom: 2,}),});},},
};
</script><style lang="less" scoped>
.app {padding: 10px;
}
.map-container {height: calc(100vh - 50px);// background-color: orange;
}
</style>增加标注
基础示例
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><title>OpenLayers 街景与地名标注</title><!-- 引入 OpenLayers CSS --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@7.5.1/dist/ol.css" /><!-- 引入 OpenLayers JavaScript --><script src="https://cdn.jsdelivr.net/npm/ol@7.5.1/dist/ol.js"></script><style>#map {width: 100%;height: 800px;}</style></head><body><div id="map"></div><script>// 1.创建地图=============var map = new ol.Map({target: "map", // 地图渲染的目标 DOM 元素 IDlayers: [// 底图图层，这里使用 OpenStreetMapnew ol.layer.Tile({// source: new ol.source.OSM(),source: new ol.source.XYZ({url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",}),}),],view: new ol.View({center: ol.proj.fromLonLat([108, 28]), // 地图初始中心点，这里以西南地区大致经纬度为例zoom: 8, // 初始缩放级别}),});// 2.1 加载地名 GeoJSON 数据=======================var vectorSource = new ol.source.Vector({url: "./places.json", // 地名数据文件路径format: new ol.format.GeoJSON(),});// 2.2 创建矢量图层，用于显示地名标注var vectorLayer = new ol.layer.Vector({source: vectorSource,style: function (feature) {// 为每个地名要素设置样式，包括点样式和文字标签var textStyle = new ol.style.Text({text: feature.get("name"), // 获取地名属性font: "12px Arial",fill: new ol.style.Fill({color: "#000",}),stroke: new ol.style.Stroke({color: "#fff",width: 2,}),offsetY: -15, // 文字相对于点的垂直偏移});var pointStyle = new ol.style.Style({image: new ol.style.Circle({radius: 5,fill: new ol.style.Fill({color: "#ff0000",}),}),text: textStyle,});return pointStyle;},});// 2.3 将地名标注图层添加到地图map.addLayer(vectorLayer);// 3. 给地图添加点击事件，模拟街景加载map.on("click", function (evt) {var coordinate = evt.coordinate;// 这里只是模拟，实际需根据点击位置获取街景资源并展示alert("点击位置经纬度：" + ol.proj.toLonLat(coordinate));// 实际项目中，可在此处调用街景库的 API 加载对应位置的街景});// 获取地图的缩放级别=================start// 获取地图视图对象const view = map.getView();// 监听change:resolution事件view.on("change:resolution", function () {const zoom = view.getZoom(); // 获取当前缩放级别console.log("zoom=========>", zoom);});// 获取地图的缩放级别=================end</script></body>
</html>缩放到一定程度后再显示标注
效果图：
示例代码：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><title>OpenLayers 街景与地名标注</title><!-- 引入 OpenLayers CSS --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@7.5.1/dist/ol.css" /><!-- 引入 OpenLayers JavaScript --><script src="https://cdn.jsdelivr.net/npm/ol@7.5.1/dist/ol.js"></script><style>#map {width: 100%;height: 800px;}</style></head><body><div class="info">当前缩放级别: <span id="zoom-level">0</span><br />标注将在缩放级别 ≥ 8 时显示</div><div id="map"></div><script>// 1.创建地图=============var map = new ol.Map({target: "map", // 地图渲染的目标 DOM 元素 IDlayers: [// 底图图层，这里使用 OpenStreetMapnew ol.layer.Tile({// source: new ol.source.OSM(),source: new ol.source.XYZ({url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",}),}),],view: new ol.View({center: ol.proj.fromLonLat([108, 28]), // 地图初始中心点，这里以西南地区大致经纬度为例zoom: 8, // 初始缩放级别}),});// 2.1 加载地名 GeoJSON 数据=======================var vectorSource = new ol.source.Vector({url: "./places.json", // 地名数据文件路径format: new ol.format.GeoJSON(),});// 2.2 创建矢量图层，用于显示地名标注var vectorLayer = new ol.layer.Vector({source: vectorSource,style: function (feature) {// 为每个地名要素设置样式，包括点样式和文字标签var textStyle = new ol.style.Text({text: feature.get("name"), // 获取地名属性font: "12px Arial",fill: new ol.style.Fill({color: "#000",}),stroke: new ol.style.Stroke({color: "#fff",width: 2,}),offsetY: -15, // 文字相对于点的垂直偏移});var pointStyle = new ol.style.Style({image: new ol.style.Circle({radius: 5,fill: new ol.style.Fill({color: "#ff0000",}),}),text: textStyle,});return pointStyle;},});// 2.3 将地名标注图层添加到地图map.addLayer(vectorLayer);// 3. 需求：获取地图的经纬度 (给地图添加点击事件)map.on("click", function (evt) {var coordinate = evt.coordinate;// 这里只是模拟，实际需根据点击位置获取街景资源并展示alert("点击位置经纬度：" + ol.proj.toLonLat(coordinate));// 实际项目中，可在此处调用街景库的 API 加载对应位置的街景});// 4. 需求：缩放到一定的程度后再显示标注图层============start// 缩放级别显示元素var zoomLevelElement = document.getElementById("zoom-level");// 控制标注显示的最小缩放级别var MIN_ZOOM_FOR_LABELS = 8;// 更新标注可见性的函数function updateLabelsVisibility() {var currentZoom = map.getView().getZoom();zoomLevelElement.textContent = currentZoom.toFixed(1);// 当缩放级别大于等于设定值时显示标注，否则隐藏vectorLayer.setVisible(currentZoom >= MIN_ZOOM_FOR_LABELS);}// 初始调用一次，设置初始状态updateLabelsVisibility();// 监听地图的移动结束事件（包括缩放和拖动）map.on("moveend", updateLabelsVisibility);// 4. 需求：缩放到一定的程度后再显示标注图层============end</script></body>
</html>多边形绘制和标记
基础示例
效果图：
示例代码：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><title>OpenLayers 街景与地名标注</title><!-- 引入 OpenLayers CSS --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@7.5.1/dist/ol.css" /><!-- 引入 OpenLayers JavaScript --><script src="https://cdn.jsdelivr.net/npm/ol@7.5.1/dist/ol.js"></script><style>#map {width: 100%;height: 800px;}.info {/* position: absolute;top: 10px;left: 10px; */background: white;padding: 10px;border-radius: 5px;box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);/* max-width: 250px; */}/* 绘制工具 */.toolbar {/* position: absolute;top: 10px;right: 10px; */background: white;padding: 10px;border-radius: 5px;box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);}.toolbar button {/* display: block;width: 100%; */padding: 8px 12px;margin-bottom: 5px;background: #f5f5f5;border: 1px solid #ddd;border-radius: 3px;cursor: pointer;transition: all 0.2s;}.toolbar button:hover {background: #e0e0e0;}.toolbar button.active {background: #4285f4;color: white;border-color: #4285f4;}.status-panel {background: white;padding: 10px;border-radius: 5px;box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);max-height: 200px;overflow-y: auto;}.feature-count {color: #666;font-size: 14px;margin-bottom: 10px;}</style></head><body><div class="info">当前缩放级别: <span id="zoom-level">0</span><br />标注将在缩放级别 ≥ 8 时显示</div><div class="toolbar"><button id="draw-point">绘制点标记</button><button id="draw-line-string">绘制线</button><button id="draw-polygon">绘制多边形</button><button id="clear">清除所有绘制</button></div><div class="data-panel"><h4>绘制数据信息：</h4><pre id="data-display"></pre></div><!-- <div class="data-panel"><h4>绘制数据信息：</h4><pre id="latest-data"></pre><div class="history-list"><h5>历史绘制记录：</h5><ul id="history-data"></ul></div></div> --><div class="status-panel"><div class="feature-count">当前已绘制: <span id="count">0</span> 个要素</div><div><h4>最近绘制数据:</h4><pre id="last-feature-data"></pre></div></div><div id="map"></div><script>var map = new ol.Map({target: "map",layers: [// 底图图层，这里使用 OpenStreetMapnew ol.layer.Tile({// source: new ol.source.OSM(),source: new ol.source.XYZ({url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",}),}),],view: new ol.View({center: ol.proj.fromLonLat([108, 28]),zoom: 8,}),});var vectorSource = new ol.source.Vector({url: "./places.json", // 地名数据文件路径format: new ol.format.GeoJSON(),});var vectorLayer = new ol.layer.Vector({source: vectorSource,style: function (feature) {var textStyle = new ol.style.Text({text: feature.get("name"), // 获取地名属性font: "12px Arial",fill: new ol.style.Fill({color: "#000",}),stroke: new ol.style.Stroke({color: "#fff",width: 2,}),offsetY: -15, // 文字相对于点的垂直偏移});var pointStyle = new ol.style.Style({image: new ol.style.Circle({radius: 5,fill: new ol.style.Fill({color: "#ff0000",}),}),text: textStyle,});return pointStyle;},});map.addLayer(vectorLayer);map.on("click", function (evt) {var coordinate = evt.coordinate;console.log("点击位置经纬度：" + ol.proj.toLonLat(coordinate));});var zoomLevelElement = document.getElementById("zoom-level");var MIN_ZOOM_FOR_LABELS = 8;function updateLabelsVisibility() {var currentZoom = map.getView().getZoom();zoomLevelElement.textContent = currentZoom.toFixed(1);vectorLayer.setVisible(currentZoom >= MIN_ZOOM_FOR_LABELS);}updateLabelsVisibility();map.on("moveend", updateLabelsVisibility);// 绘制// 绘制交互变量let draw;// 创建矢量数据源和图层const vector_source = new ol.source.Vector();// 创建矢量图层并关联数据源const vector_layer = new ol.layer.Vector({source: vector_source,style: new ol.style.Style({fill: new ol.style.Fill({ color: "rgba(0, 153, 255, 0.2)" }),stroke: new ol.style.Stroke({ color: "#0099ff", width: 2 }),image: new ol.style.Circle({radius: 6,fill: new ol.style.Fill({ color: "#0099ff" }),stroke: new ol.style.Stroke({ color: "white", width: 1 }),}),}),});map.addLayer(vector_layer);const dataDisplay = document.getElementById("data-display");const countElement = document.getElementById("count");const lastFeatureElement = document.getElementById("last-feature-data");// 更新要素计数显示function updateFeatureCount() {const count = vector_source.getFeatures().length;countElement.textContent = count;}// 激活绘制工具的函数function activateDraw(type, id) {// 移除现有的绘制交互if (draw) {map.removeInteraction(draw);}// 清除按钮的active状态document.querySelectorAll(".toolbar button").forEach((btn) => {btn.classList.remove("active");});// 如果不是清除操作，则激活相应的绘制工具if (type !== "clear") {document.getElementById(id).classList.add("active");// 创建新的绘制交互draw = new ol.interaction.Draw({// 绘制的内容会添加到这个数据源source: vector_source,type: type,});map.addInteraction(draw);// 监听绘制结束事件draw.on("drawend", function (event) {// 获取绘制的要素const feature = event.feature;// 获取几何图形const geometry = feature.getGeometry();// 根据几何类型处理数据let data, type;switch (geometry.getType()) {case "Point":type = "点";// OpenLayers 默认使用 Web Mercator 投影坐标（米为单位）,转换为经纬度坐标（度为单位）const coords = ol.proj.toLonLat(geometry.getCoordinates());data = `坐标: [${coords[0].toFixed(6)}, ${coords[1].toFixed(6)}]`;break;case "LineString":type = "线";// 线的坐标数组const lineCoords = geometry.getCoordinates().map((coord) => ol.proj.toLonLat(coord)).map((coord) => `[${coord[0].toFixed(6)}, ${coord[1].toFixed(6)}]`);data = `路径点: [\n ${lineCoords.join(",\n ")}\n]`;break;case "Polygon":type = "多边形";// 多边形的坐标数组（外层数组是多边形环，取第一个环）const polygonCoords = geometry.getCoordinates()[0].map((coord) => ol.proj.toLonLat(coord)).map((coord) => `[${coord[0].toFixed(6)}, ${coord[1].toFixed(6)}]`);data = `顶点: [\n ${polygonCoords.join(",\n ")}\n]`;break;}// 显示数据dataDisplay.textContent = `绘制了${type}:\n${data}\n\n历史数据可通过vectorSource获取`;lastFeatureElement.textContent = data;// 更新要素计数// 确保添加完成后再更新计数setTimeout(() => {updateFeatureCount();}, 200);});}}// 绑定按钮事件document.getElementById("draw-point").addEventListener("click", () => {activateDraw("Point", "draw-point");});document.getElementById("draw-line-string").addEventListener("click", () => {activateDraw("LineString", "draw-line-string");});document.getElementById("draw-polygon").addEventListener("click", () => {activateDraw("Polygon", "draw-polygon");});document.getElementById("clear").addEventListener("click", () => {// 清除所有绘制的要素vector_source.clear();// 移除绘制交互if (draw) {map.removeInteraction(draw);draw = null;}// 清除按钮的active状态document.querySelectorAll(".toolbar button").forEach((btn) => {btn.classList.remove("active");dataDisplay.textContent = "所有绘制已清除";// 更新显示lastFeatureElement.textContent = "所有要素已清除";updateFeatureCount();});});</script></body>
</html>增加信息窗
效果图：
示例代码:
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><title>OpenLayers 街景与地名标注</title><!-- 引入 OpenLayers CSS --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@7.5.1/dist/ol.css" /><!-- 引入 OpenLayers JavaScript --><script src="https://cdn.jsdelivr.net/npm/ol@7.5.1/dist/ol.js"></script><style>#map {width: 100%;height: 800px;}.info {/* position: absolute;top: 10px;left: 10px; */background: white;padding: 10px;border-radius: 5px;box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);/* max-width: 250px; */}/* 绘制工具 */.toolbar {/* position: absolute;top: 10px;right: 10px; */background: white;padding: 10px;border-radius: 5px;box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);}.toolbar button {/* display: block;width: 100%; */padding: 8px 12px;margin-bottom: 5px;background: #f5f5f5;border: 1px solid #ddd;border-radius: 3px;cursor: pointer;transition: all 0.2s;}.toolbar button:hover {background: #e0e0e0;}.toolbar button.active {background: #4285f4;color: white;border-color: #4285f4;}.status-panel {background: white;padding: 10px;border-radius: 5px;box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);max-height: 200px;overflow-y: auto;}.feature-count {color: #666;font-size: 14px;margin-bottom: 10px;}/* 信息弹窗样式 */.popup {position: absolute;background-color: white;padding: 10px;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);pointer-events: auto;display: none;}.popup-content {min-width: 200px;}.popup-closer {position: absolute;top: 5px;right: 5px;cursor: pointer;font-size: 16px;}</style></head><body><div class="info">当前缩放级别: <span id="zoom-level">0</span><br />标注将在缩放级别 ≥ 8 时显示</div><div class="toolbar"><button id="draw-point">绘制点标记</button><button id="draw-line-string">绘制线</button><button id="draw-polygon">绘制多边形</button><button id="clear">清除所有绘制</button><button id="save">保存</button></div><div class="data-panel"><h4>绘制数据信息：</h4><pre id="data-display"></pre></div><!-- <div class="data-panel"><h4>绘制数据信息：</h4><pre id="latest-data"></pre><div class="history-list"><h5>历史绘制记录：</h5><ul id="history-data"></ul></div></div> --><div class="status-panel"><div class="feature-count">当前已绘制: <span id="count">0</span> 个要素</div><div><h4>最近绘制数据:</h4><pre id="last-feature-data"></pre></div></div><!-- 信息弹窗 --><div id="popup" class="popup"><a href="#" class="popup-closer" onclick="hidePopup()">×</a><div id="popup-content" class="popup-content"></div></div><div id="map"></div><script>var map = new ol.Map({target: "map",layers: [// 底图图层，这里使用 OpenStreetMapnew ol.layer.Tile({// source: new ol.source.OSM(),source: new ol.source.XYZ({url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",}),}),],view: new ol.View({center: ol.proj.fromLonLat([108, 28]),zoom: 8,}),});var vectorSource = new ol.source.Vector({url: "./places.json", // 地名数据文件路径format: new ol.format.GeoJSON(),});var vectorLayer = new ol.layer.Vector({source: vectorSource,style: function (feature) {var textStyle = new ol.style.Text({text: feature.get("name"), // 获取地名属性font: "12px Arial",fill: new ol.style.Fill({color: "#000",}),stroke: new ol.style.Stroke({color: "#fff",width: 2,}),offsetY: -15, // 文字相对于点的垂直偏移});var pointStyle = new ol.style.Style({image: new ol.style.Circle({radius: 5,fill: new ol.style.Fill({color: "#ff0000",}),}),text: textStyle,});return pointStyle;},});map.addLayer(vectorLayer);map.on("click", function (evt) {var coordinate = evt.coordinate;console.log("点击位置经纬度：" + ol.proj.toLonLat(coordinate));// 检查点击位置是否有要素map.forEachFeatureAtPixel(evt.pixel, function (feature) {// 核心过滤逻辑：排除临时要素（只有带 isFinished: true 的才是正式要素）// 如果点击的是多边形// if (feature.get("isFinished") && feature.getGeometry() instanceof ol.geom.Polygon) {// showPopup(evt.coordinate, feature);// return true; // 停止遍历// }if (feature.get("isFinished")) {showPopup(evt.coordinate, feature);return true; // 停止遍历}});});var zoomLevelElement = document.getElementById("zoom-level");var MIN_ZOOM_FOR_LABELS = 8;function updateLabelsVisibility() {var currentZoom = map.getView().getZoom();zoomLevelElement.textContent = currentZoom.toFixed(1);vectorLayer.setVisible(currentZoom >= MIN_ZOOM_FOR_LABELS);}updateLabelsVisibility();map.on("moveend", updateLabelsVisibility);// 绘制// 绘制交互变量let draw;// 创建矢量数据源和图层const vector_source = new ol.source.Vector();// 创建矢量图层并关联数据源const vector_layer = new ol.layer.Vector({source: vector_source,style: new ol.style.Style({fill: new ol.style.Fill({ color: "rgba(0, 153, 255, 0.2)" }),stroke: new ol.style.Stroke({ color: "#0099ff", width: 2 }),image: new ol.style.Circle({radius: 6,fill: new ol.style.Fill({ color: "#0099ff" }),stroke: new ol.style.Stroke({ color: "white", width: 1 }),}),}),});map.addLayer(vector_layer);const dataDisplay = document.getElementById("data-display");const countElement = document.getElementById("count");const lastFeatureElement = document.getElementById("last-feature-data");const saveElement = document.getElementById("save");// 更新要素计数显示function updateFeatureCount() {const count = vector_source.getFeatures().length;countElement.textContent = count;}// 计算多边形面积（平方米）function calculateArea(geometry) {const area = geometry.getArea();// 转换为平方米（如果需要）return Math.round(area) + " 平方米";}// 激活绘制工具的函数function activateDraw(type, id) {// 移除现有的绘制交互if (draw) {map.removeInteraction(draw);}// 清除按钮的active状态document.querySelectorAll(".toolbar button").forEach((btn) => {btn.classList.remove("active");});// 如果不是清除操作，则激活相应的绘制工具if (type !== "clear") {document.getElementById(id).classList.add("active");// 创建新的绘制交互draw = new ol.interaction.Draw({// 绘制的内容会添加到这个数据源source: vector_source,type: type,});map.addInteraction(draw);// 监听绘制结束事件draw.on("drawend", function (event) {// event.stopPropagation();draw.setActive(false);// 获取绘制的要素const feature = event.feature;// 获取几何图形const geometry = feature.getGeometry();// 给正式要素添加标识（用于后续弹窗过滤）feature.set("isFinished", true);// 添加其他属性（如面积）// 多边形// feature.set("area", Math.round(geometry.getArea()) + " 平方米");// feature.set("name", "多边形" + vector_source.getFeatures().length);feature.set("test_data", {name: "zs",age: 36,friend: ["kobe", "lili"],});// 根据几何类型处理数据let data, type;switch (geometry.getType()) {case "Point":type = "点";// OpenLayers 默认使用 Web Mercator 投影坐标（米为单位）,转换为经纬度坐标（度为单位）const coords = ol.proj.toLonLat(geometry.getCoordinates());data = `坐标: [${coords[0].toFixed(6)}, ${coords[1].toFixed(6)}]`;break;case "LineString":type = "线";// 线的坐标数组const lineCoords = geometry.getCoordinates().map((coord) => ol.proj.toLonLat(coord)).map((coord) => `[${coord[0].toFixed(6)}, ${coord[1].toFixed(6)}]`);data = `路径点: [\n ${lineCoords.join(",\n ")}\n]`;break;case "Polygon":type = "多边形";// 多边形的坐标数组（外层数组是多边形环，取第一个环）const polygonCoords = geometry.getCoordinates()[0].map((coord) => ol.proj.toLonLat(coord)).map((coord) => `[${coord[0].toFixed(6)}, ${coord[1].toFixed(6)}]`);data = `顶点: [\n ${polygonCoords.join(",\n ")}\n]`;break;}// 显示数据dataDisplay.textContent = `绘制了${type}:\n${data}\n\n历史数据可通过vectorSource获取`;lastFeatureElement.textContent = data;// 更新要素计数// 确保添加完成后再更新计数setTimeout(() => {updateFeatureCount();}, 200);});}}// 绑定按钮事件document.getElementById("draw-point").addEventListener("click", () => {activateDraw("Point", "draw-point");});document.getElementById("draw-line-string").addEventListener("click", () => {activateDraw("LineString", "draw-line-string");});document.getElementById("draw-polygon").addEventListener("click", () => {activateDraw("Polygon", "draw-polygon");});document.getElementById("clear").addEventListener("click", () => {// 清除所有绘制的要素vector_source.clear();// 移除绘制交互if (draw) {map.removeInteraction(draw);draw = null;}// 清除按钮的active状态document.querySelectorAll(".toolbar button").forEach((btn) => {btn.classList.remove("active");dataDisplay.textContent = "所有绘制已清除";// 更新显示lastFeatureElement.textContent = "所有要素已清除";updateFeatureCount();});});document.getElementById("save").addEventListener("click", () => {if (draw) {map.removeInteraction(draw);}});// 显示弹窗function showPopup(coordinate, feature) {const popup = document.getElementById("popup");const popupContent = document.getElementById("popup-content");// 设置弹窗内容// 示例：多边形// popupContent.innerHTML = `// <h3>${feature.get("name")}</h3>// <p>面积: ${feature.get("area")}</p>// <p>ID: ${feature.getId()}</p>// `;const test_data = feature.get("test_data");popupContent.innerHTML = `<h1>测试数据</h1><h3>姓名:${test_data.name}</h3><h3>年龄:${test_data.age}</h3><h3>朋友:${JSON.stringify(test_data.friend)}</h3>`;console.log("dddddd==>", feature.get("test_data"));// 设置弹窗位置const overlay = new ol.Overlay({element: popup,positioning: "bottom-center",stopEvent: false,offset: [0, -10],});map.addOverlay(overlay);overlay.setPosition(coordinate);// 显示弹窗popup.style.display = "block";}// 隐藏弹窗function hidePopup() {const popup = document.getElementById("popup");popup.style.display = "none";}// 鼠标悬停时改变光标样式map.on("pointermove", function (e) {const pixel = map.getEventPixel(e.originalEvent);const hit = map.hasFeatureAtPixel(pixel);map.getTargetElement().style.cursor = hit ? "pointer" : "";});</script></body>
</html>
)
)
