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事件,在事件处理函数
中
设置
了
地图
的大小。