记录openlayers遇到的坑——有岛区域无法添加地名

添加边界线的styleFunction代码如下,完全没问题。 

var styleFunction = function(feature, resolution) {
	var name=feature.get('name');
	var color='rgba(32, 48, 103, 0.3)';
   
	var areaLineStyle = new ol.style.Style({
		fill: new ol.style.Fill({ //矢量图层填充颜色,以及透明度
			color: color,//feature.get('color')
		}),
		text:new ol.style.Text({
			text:feature.get('name'),
			font: '12px bold serif',
			fill: new ol.style.Fill({
				color: '#000'
			}),
			stroke: new ol.style.Stroke({
				color: '#fff',
				width: 2
			})
		}),
		stroke: new ol.style.Stroke({ //边界样式
			color: '#55DFF4',
			//lineDash: [4],
			width: 1.5
		})
	});
	return areaLineStyle;
};

如下图所示,象山县有很多小岛,换句话说象山县这个区县是有很多多边形组成,所以没办法添加区县名。后来同事发现换成3.20的版本就可以了! 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
OpenLayers是一个用于创建交互式地图的JavaScript库,它可以集成到Web应用程序中。如果您想在OpenLayers中进行地名搜索,您可以使用OpenLayers的Geocoder控件或使用第三方地理编码服务。 使用OpenLayers的Geocoder控件,您可以使用以下代码实现地名搜索: ```javascript var geocoder = new ol.control.Geocoder({ provider: 'osm', targetType: 'text-input', lang: 'en', placeholder: 'Search for an address', limit: 5, keepOpen: false }); map.addControl(geocoder); ``` 此代码将在OpenLayers地图上添加一个搜索框,用户可以在其中输入地址并进行搜索。在此示例中,我们使用OpenStreetMap提供的地理编码服务。 如果您想使用第三方地理编码服务,您可以使用OpenLayers的VectorSource和VectorLayer来显示搜索结果。以下是一个示例代码,使用MapQuest提供的地理编码服务: ```javascript var query = 'New York'; // 搜索的地址 var url = 'https://www.mapquestapi.com/geocoding/v1/address?key=YOUR_API_KEY&location=' + query; // 使用fetch API获取地理编码结果 fetch(url) .then(function(response) { return response.json(); }) .then(function(json) { var features = new ol.format.GeoJSON().readFeatures(json.results[0].locations[0]); // 创建一个VectorSource,将搜索结果添加到其中 var vectorSource = new ol.source.Vector({ features: features }); // 创建一个VectorLayer,将VectorSource添加到其中 var vectorLayer = new ol.layer.Vector({ source: vectorSource }); // 将VectorLayer添加到地图中 map.addLayer(vectorLayer); }); ``` 在此示例中,我们使用MapQuest的地理编码API来获取地址的经纬度,并将结果显示在地图上。要使用此示例,您需要将YOUR_API_KEY替换为您的MapQuest API密钥。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值