Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示:

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118492511

在上面显示地图的基础上,怎样在地图上添加点,并且显示图标和文字信息。

实现效果如下

博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

首先要添加多个的话,需要定义每个的坐标和要显示的文字数据源

        //打点数据源
        var wrnameData = [{
                x: '-11561016.2
InitMap.vue /* eslint-disable no-unused-vars */ import mapConfig from '@/mapConfig' // 地图 配置 import "ol/ol.css" import Map from "ol/Map" import View from "ol/View" import TileLayer from "ol/layer/Tile" import TileWMS from "ol/
前言: 折磨了好几个小时,终于做出了正确的效果,如果你也受苦于使用circle 生成 通过offsetX或者Y 文字 始终不能到他准确的位置,那先恭喜你,至少你获得了一种可以 实现 的方案。 我们需要 实现 如图所示的范围扩散的圆,同时需要准确的 显示 在圆的边上的 文字 ,至于颜色。。这个想必不用我多提。 如果offsetX、offsetY 文字 不可以到达圆的边上也就是我们想要的准确的位置,那我们是否可以通过获取coordinator坐标,去通过这个坐标 实现 这个 文字 的正确 显示 位置,结论是可以,因为
全栈三维GIS开发工程师,擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里,我将分享我的开发经验、技术心得和项目案例,希望能为GIS爱好者和开发者提供有价值的参考。 07-01
实现 Openlayers 地图 的全屏 显示 ,可以使用浏览器提供的Fullscreen API来 实现 。具体步骤如下: 1. 创建一个按钮或者一个链接,用于触发全屏 显示 。 2. 绑定该按钮或链接的点击事件,在事件处理函数 调用 地图 对象的requestFullscreen()方法,请求浏览器进入全屏模式。 3. 监听Fullscreen API的fullscreenchange事件。当该事件被触发时,检查当前是否处于全屏模式。如果是,则 设置 地图 的尺寸为浏览器窗口的尺寸。 下面是一个 实现 Openlayers 地图 全屏 显示 的示例代码: // 创建 地图 对象 var map = new ol.Map({ target: 'map', layers: [ // 添加 地图 图层 new ol.layer.Tile({ source: new ol.source.OSM() view: new ol.View({ // 设置 地图 心点和缩放级别 center: ol.proj.fromLonLat([120, 30]), zoom: 10 // 创建全屏按钮 var fullscreenBtn = document.createElement('button'); fullscreenBtn.innerText = '全屏'; // 点击按钮进入全屏模式 fullscreenBtn.addEventListener('click', function() { if (document.fullscreenElement) { document.exitFullscreen(); } else { map.getTargetElement().requestFullscreen(); // 监听Fullscreen API的fullscreenchange事件 document.addEventListener('fullscreenchange', function() { if (document.fullscreenElement) { // 进入全屏模式时 设置 地图 大小为浏览器窗口大小 map.setSize([window.innerWidth, window.innerHeight]); } else { // 退出全屏模式时恢复 地图 原来的大小 map.setSize([500, 500]); // 将按钮 添加 到页面 document.body.appendChild(fullscreenBtn); 该示例代码 创建了一个 地图 对象,并 添加 了一个OpenStreetMap图层。然后创建了一个全屏按钮,点击该按钮可以进入或退出全屏模式。最后监听了Fullscreen API的fullscreenchange事件,在事件处理函数 设置 地图 的大小。