<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用点要素作为标记</title>
<link rel="stylesheet" href="./OpenLayers-2.12/theme/default/style.css" type="text/css" />
<script src="./OpenLayers-2.12/lib/OpenLayers.js"></script>
<script type="text/javascript">
function init(){
var map = new OpenLayers.Map("ch3_feature_markers");
var layer = new OpenLayers.Layer.OSM("OpenStreetMap");
map.addLayer(layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0,0), 2);
var pointLayer = new OpenLayers.Layer.Vector("Features", {
projection: "EPSG:933913"
});
map.addLayer(pointLayer);
// 新建一些随机的要素点
var pointFeatures = [];
for(var i=0; i< 150; i++) {
var px = Math.random() * 360 - 180;
var py = Math.random() * 170 - 85;
// 将经纬度坐标转换为地图工程.
var lonlat = new OpenLayers.LonLat(px, py);
lonlat.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
var pointGeometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
var pointFeature = new OpenLayers.Feature.Vector(pointGeometry);
pointFeatures.push(pointFeature);
}
// 将要素添加到图层中
pointLayer.addFeatures(pointFeatures);
// 当要素选中之后的事件控制
pointLayer.events.register("featureselected", null, function(event){
var layer = event.feature.layer;
event.feature.style = {
fillColor: '#ff9900',
fillOpacity: 0.7,
strokeColor: '#aaa',
pointRadius: 12
};
layer.drawFeature(event.feature);
});
// 当要素未选中之后的事件控制
pointLayer.events.register("featureunselected", null, function(event){
var layer = event.feature.layer;
event.feature.style = null;
event.feature.renderIntent = null;
layer.drawFeature(event.feature);
});
// 添加到触发矢量图层上的事件需要选择功能控制。
var selectControl = new OpenLayers.Control.SelectFeature(pointLayer);
map.addControl(selectControl);
selectControl.activate();
}
</script>
</head>
<body onload="init()">
<!-- 地图 DOM 元素 -->
<div id="ch3_feature_markers" style="width: 100%; height: 100%;"></div>
</body>
</html>

OpenLayers使用点要素作为标记的更多相关文章

  1. openlayers wfs获取要素

    var wfsProtocol = new OpenLayers.Protocol.WFS.v1_1_0({ url: mapServerUrl + "/wfs", feature ...

  2. Openlayers修改矢量要素并且可捕捉

    <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content= ...

  3. Openlayers修改矢量要素

    将以下代码放到demo下examples中即可运行 <!DOCTYPE html><html> <head> <meta http-equiv="C ...

  4. openlayers 初步认识(转)

    OpenLayers是一个开源的js框架,用于在您的浏览器中实现地图浏览的效果和基本的zoom,pan等功能.OpenLayers支持的地图来源 包括了WMS,GoogleMap,KaMap,MSVi ...

  5. Openlayers3 编辑要素

    参考文章 Openlayers之编辑要素 MAPZONE GIS SDK接入Openlayers3之五——图形编辑工具 [学习笔记之Openlayers3]要素保存篇(第四篇) openlayers实 ...

  6. OpenLayers添加地图标记

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  7. gis笔记 wms wfs等OGC标准

    WFS 和WMS的区别 WFS是基于地理要素级别的数据共享和数据操作,WFS规范定义了若干基于地理要素(Feature)级别的数据操作接口,并以 HTTP 作为分布式计算平台.通过 WFS服务,客户端 ...

  8. arcgis api for silverlight

    原文 http://blog.sina.com.cn/s/blog_4638cf7b0100wntt.html arcgis api for silverlight(1) (2011-09-21 09 ...

  9. ArcGIS Runtime SDK for iOS之符号和渲染

    符号定义了图形外观的非地理方面.它包括了图形的颜色.线宽.透明度等等.ArcGIS Runtime SDK for iOS包含了许多符号类,其中的每个类可以让你以独特的方式指定符号.每个符号的类型也是 ...

随机推荐

  1. Jmeter接口测试(第二篇)

    一.新建项目 1.运行Jmeter.bat打开Jmeter 2.添加线程组(测试计划->添加->Thread(users)->线程组) 3.添加HTTP请求(线程组->添加-& ...

  2. vue 全局过滤器(单个和多个过滤器)

    参考: https://www.cnblogs.com/liujn0829/p/8622960.htmlhttps://blog.csdn.net/z8735058/article/details/7 ...

  3. C++ 静态对象

    一:什么是静态对象?     对象的存储方式是静态的.        局部静态对象和类的静态对象.      局部静态对象:一个变量在函数内部定义,其生命周期跨越了该函数的多次调用.局部对象确保不迟于 ...

  4. 乐观、悲观锁、redis分布式锁

    悲观锁总是假设最坏的情况,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会阻塞直到它拿到锁(共享资源每次只给一个线程使用,其它线程阻塞,用完后再把资源转让给 ...

  5. Create STKNetDiskC Instance Error

    关于Create STKNetDiskC Instance Error错误的解决方法 这个错误可能出现在: AM8 附件直接存网盘的时候 报错 解决方法步骤如下: 在出现该错误的机器上,先将AM及 m ...

  6. [编织消息框架][传输协议]sctp简单开发

    jdk1.7支持sctp协议,需要linux安装sctp支持库 测试代码 public class ServerSCTP { static int SERVER_PORT = 3456; static ...

  7. python字典的基本操作,以及可变数据类型和不可变数据类型的区分

    字典:采用键值对存储数据的数据类型,字典的键必须是不可变的数据类型 补充: 不可变(可哈希)数据类型:str,bool,int,tuple 可变(不可哈希)数据类型:list,  dict, set ...

  8. 【linux之路】常用的命令

    用bash插入代码 1.查看ubuntu的版本号 lsb_release –a //linux标准基础(Linux Standards Base):release发布 2.查看Ubuntu的内核 un ...

  9. Struts2启动问题:ClassNotFoundException: org...dispatcher.ng.filter.StrutsPrepareAndExecuteFilter

    错误信息: java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExec ...

  10. tc: Linux HTTP Outgoing Traffic Shaping (Port 80 Traffic Shaping)(转)

    原文:https://www.cyberciti.biz/faq/linux-traffic-shaping-using-tc-to-control-http-traffic/ I‘ve 10Mbps ...