openlayes 3 根据视野在建筑物上添加文字

谁借莪１个温暖的怀抱￠ 2022-03-30 04:12 194阅读 0赞

1. 先将图层发布成geoserver服务

2.具体实现代码

var tempUrl = ''  //发布的wfs图层
    
    var poi_style = function (feature, zoom) {
    			if (zoom > 2000) {
    				return points_4_style;
    			} else {
    				var direction = 0;
    				return new ol.style.Style({
    					image: new ol.style.Icon({
    						src: Path +"/sea/icon/rm.png",
    						rotation: direction
    					}),
    					text: new ol.style.Text({
    						//padding:'top 10px',
    						offsetY:-30,
    						//offsetY:'12px',
    						//对齐方式
    						textAlign: 'center',
    						//文本基线
    						textBaseline: 'middle',
    						//字体样式
    						font: 'normal 14px 微软雅黑',
    						//文本内容
    						text: feature.get('oid'),
    						//填充样式
    						fill: new ol.style.Fill({
    							color: '#aa3300'
    						}),
    						//笔触
    						stroke: new ol.style.Stroke({
    							color: '#ffcc33',
    							width: 2
    						})
    					})
    				});
    			}
    		};
    
    var point_source = new ol.source.Vector({
    			projection: 'EPSG:4326'
    		});
    
    var points = new ol.layer.Vector({
    			name:'poi',
    			source: point_source,
    			style: poi_style,
    			minZoom: 4,
    			width: 2,
    			visible: true
    		});
    //底图
      var raster = new ol.layer.Tile({
    			name:'map',
    			maxZoom: 9,
    			minZoom: 1,
    			visible: true,
    			source: new ol.source.XYZ({
    				url: 'http://cccpist.55555.io/tiles/gsat/{z}/{x}/{y}.png'
    			})
    		});
    
    var map = new ol.Map({
    			layers:[raster ， points ] ,
    			target: document.getElementById('map'),
    			view: new ol.View({
    				center: [13328108, 2920366],
    				maxZoom: 15,
    				zoom: 5
    			})
    		});	
    
    fetch(tempUrl).then(function (response) {
    					return response.json();
    				}).then(function (json) {
    				var features = geoJSON.readFeatures(json);
    					point_source.clear();
    					if(features.length>0){
    						point_source.addFeatures(features);
    						map.render();
    					}
    				}).catch(function (e) {
    					console.log(e);
    				});

发表评论取消回复

表情：

评论列表（有 0 条评论，194人围观）

还没有评论，来说两句吧...

相关阅读

相关浏览器——》在浏览器上编写文字

版权声明：本文为博主原创文章，无需授权即可转载，甚至无需保留以上版权声明，转载时请务必注明作者。 [https://blog.csdn.net/weixin\_434533

一时失言乱红尘/ 2024年02月19日 18:53/ 0 赞/ 56 阅读

相关 openlayers在地图上添加maker

如下图所示，点击地图的时候，显示一个小红点 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

朱雀/ 2022年11月25日 10:10/ 0 赞/ 330 阅读

相关 java如何在窗口上写文字_VC 直接在界面上添加文字

渐变字： // 获得窗口的客户区设备上下文句柄 CClientDC dc(this); // 更改当前字体 LOGFONT lf; dc.GetCurrentFont

素颜马尾好姑娘i/ 2022年11月08日 11:57/ 0 赞/ 239 阅读

相关 Openlayers中实现地图上打点并显示图标和文字

场景 Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示： [https://blog.csdn.net/BADAO\_LIUM

た入场券/ 2022年10月19日 05:58/ 0 赞/ 806 阅读

相关 ios--UITextView在光标处添加文字

原文转自：[http://blog.sina.com.cn/s/blog\_621403ef0100tsvw.html][http_blog.sina.com.cn_s_blo

野性酷女/ 2022年08月24日 05:12/ 0 赞/ 167 阅读

相关 Java实现在图片上添加水印图片和水印文字

public static void main(String\[\] args) \{ createMark("e://image//a.gif","e://i

雨点打透心脏的1/2处/ 2022年08月07日 05:40/ 0 赞/ 367 阅读

相关 openlayes 3 根据视野在建筑物上添加文字

1. 先将图层发布成geoserver服务 2.具体实现代码 var tempUrl = '' //发布的wfs图层 var poi_style

谁借莪１个温暖的怀抱￠/ 2022年03月30日 04:12/ 0 赞/ 195 阅读

相关百度地图查询视野范围内的建筑物（二）

本篇博客主要的研究内容主要解决基于使用键盘上下左右键时，无法触发百度地图的MoveFinished的事件的问题。百度地图查询视野范围内的建筑物参看博客http://blog.c

叁歲伎倆/ 2022年01月17日 07:11/ 0 赞/ 294 阅读

相关百度地图查询视野范围内的建筑物

根据用户移动地图的位置，显示在视野范围内的建筑物，简单的思路是，添加地图监听，当地图移动结束之后，计算出当前屏幕四个角的GeoPoint，根据这4个点，通过mysql的s

缺乏、安全感/ 2022年01月17日 00:27/ 0 赞/ 479 阅读

相关 QML Charts 往图表上添加文字

内容：给所有点都加上标签（XYseries 自带) 给指定的个别点添加任何需要显示的内容 1、给所有点都添加标签效果如下图 ![显示每个点的标

旧城等待，/ 2021年11月02日 10:46/ 0 赞/ 662 阅读