openlayers 地图上加图标_OpenLayers添加地图标记

最新推荐文章于 2024-08-09 17:05:39 发布

weixin_39553805

最新推荐文章于 2024-08-09 17:05:39 发布

阅读量474

点赞数

文章标签： openlayers 地图上加图标

本文链接：https://blog.csdn.net/weixin_39553805/article/details/111514964

版权

这篇博客介绍了如何在OpenLayers地图上添加图标作为标记。通过创建`OpenLayers.Layer.Markers`图层，随机生成经纬度坐标，并使用不同的动物图标，实现了150个标记的分布。每个标记都有鼠标悬停时改变大小和不透明度的交互效果。

摘要由CSDN通过智能技术生成

添加地图标记

functioninit(){varmap= newOpenLayers.Map("ch3_markers");varlayer= newOpenLayers.Layer.OSM("OpenStreetMap");

map.addLayer(layer);

map.addControl(newOpenLayers.Control.LayerSwitcher());

map.setCenter(newOpenLayers.LonLat(0,0),2);varmarkers= newOpenLayers.Layer.Markers("Markers");

map.addLayer(markers);//Create some random markers with random icons

varicons=["alligator.png","chicken-2.png","elephants.png","pets.png","snakes.png","wildlifecrossing.png","animal-shelter-export.png","cow-export.png","frog-2.png","pig.png","spider.png","zoo.png","ant-export.png","deer.png","lobster-export.png","rodent.png","tiger-2.png","bats.png","dolphins.png","monkey-export.png","seals.png","turtle-2.png","birds-2.png","duck-export.png","mosquito.png","shark-export.png","veterinary.png","butterfly-2.png","eggs.png","penguin-2.png","snail.png","whale-2.png"];for(vari=0; i< 150; i++) {//随机计算标记摆放经纬度坐标

varicon=Math.floor(Math.random()*icons.length);varpx=Math.random()* 360 - 180;varpy=Math.random()* 170 - 85;//新建标记大小，像素点

varsize= newOpenLayers.Size(32,37);varoffset= newOpenLayers.Pixel(-(size.w/2), -size.h);

varicon= newOpenLayers.Icon('./data/icons/'+icons[icon], size, offset);

icon.setOpacity(0.7);//将经纬度坐标转换为地图工程

varlonlat= newOpenLayers.LonLat(px, py);

lonlat.transform(newOpenLayers.Projection("EPSG:4326"),newOpenLayers.Projection("EPSG:900913"));//添加标记

varmarker= newOpenLayers.Marker(lonlat, icon);//事件处理程序，当鼠标移动图标时，图标变大更改其不透明度

marker.events.register("mouseover", marker,function() {this.inflate(1.2);this.setOpacity(1);

});//事件处理程序，当鼠标移动图标时，图标变大更改其不透明度

marker.events.register("mouseout", marker,function() {this.inflate(1/1.2);

this.setOpacity(0.7);

});