OpenLayers使用点要素作为标记
<!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使用点要素作为标记的更多相关文章
- openlayers wfs获取要素
var wfsProtocol = new OpenLayers.Protocol.WFS.v1_1_0({ url: mapServerUrl + "/wfs", feature ...
- Openlayers修改矢量要素并且可捕捉
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content= ...
- Openlayers修改矢量要素
将以下代码放到demo下examples中即可运行 <!DOCTYPE html><html> <head> <meta http-equiv="C ...
- openlayers 初步认识(转)
OpenLayers是一个开源的js框架,用于在您的浏览器中实现地图浏览的效果和基本的zoom,pan等功能.OpenLayers支持的地图来源 包括了WMS,GoogleMap,KaMap,MSVi ...
- Openlayers3 编辑要素
参考文章 Openlayers之编辑要素 MAPZONE GIS SDK接入Openlayers3之五——图形编辑工具 [学习笔记之Openlayers3]要素保存篇(第四篇) openlayers实 ...
- OpenLayers添加地图标记
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...
- gis笔记 wms wfs等OGC标准
WFS 和WMS的区别 WFS是基于地理要素级别的数据共享和数据操作,WFS规范定义了若干基于地理要素(Feature)级别的数据操作接口,并以 HTTP 作为分布式计算平台.通过 WFS服务,客户端 ...
- arcgis api for silverlight
原文 http://blog.sina.com.cn/s/blog_4638cf7b0100wntt.html arcgis api for silverlight(1) (2011-09-21 09 ...
- ArcGIS Runtime SDK for iOS之符号和渲染
符号定义了图形外观的非地理方面.它包括了图形的颜色.线宽.透明度等等.ArcGIS Runtime SDK for iOS包含了许多符号类,其中的每个类可以让你以独特的方式指定符号.每个符号的类型也是 ...
随机推荐
- ftp文件上传下载命令
介绍:从本地以用户wasqry登录的机器1*.1**.21.67上通过ftp远程登录到ftp服务器上,登录用户名是lte****,以下为使用该连接做的实验. 查看远程ftp服务器上用户lte**** ...
- C#生成指定范围内的不重复随机数
C#生成指定范围内的不重复随机数 // Number随机数个数 // minNum随机数下限 // maxNum随机数上限 public int[] GetRandomArray(int Number ...
- linux拆分文件
1.先看下文件总的行数: wc -l filename 我们现在来看看它具体的参数该怎么用: split支持自定义输出文件大小和输出文件行数两种模式,此外还可以定义每一行最大的值. -l 按输出文件行 ...
- 初识css3 3d动画效果
(先看我博客右上角的3d盒子动画效果,目前没做兼容处理,最好最新的chrome看)无意间看到网上css3写的3d动画效果,实在炫酷,以前理解为需要js去计算去写,没想到css直接可以实现.于是开始研究 ...
- C语言作用域、链接属性和存储类型
C/C++中作用域详解 作用域 编译器可以确认的4种作用域-代码块作用域.文件作用域.函数作用域和原型作用域,一般来说,标识符(包括变量名和函数名)声明的位置决定它的作用域. (1)代码块作用域 一对 ...
- LUOGU P3157 [CQOI2011]动态逆序对(CDQ 分治)
传送门 解题思路 cdq分治,将位置看做一维,修改时间看做一维,权值看做一维,然后就转化成了三维偏序,用排序+cdq+树状数组.注意算删除贡献时要做两次cdq,分别算对前面和后面的贡献. #inclu ...
- 在skyline中将井盖、雨水箅子等部件放到地面模型上
公司三维建模组遇到这样的一个问题,怎样将井盖.雨水盖子恰好放在做好的地面模型上.传统的方法是在skyline中逐个调整井盖的对地高度,就是调整为恰好能放在地面上.或者选择很粗糙的一个方法,在“高度”属 ...
- s3fs 挂载minio为本地文件系统
https://github.com/s3fs-fuse/s3fs-fuse echo ACCESS_KEY_ID:SECRET_ACCESS_KEY > ${HOME}/.passwd-s3f ...
- springmvc 串口读写 基于win7使用txrx netbeans jdk1.8 maven的
引入 <dependency> <groupId>org.rxtx</groupId> <artifactId>rxtx</artifactId& ...
- java锁_IO_NIO_AIO_BIO_GC_Jvm
如何保证线程安全,线程锁有哪些? 同步方法和同步代码块常见的锁:ReentrantLock与synchronized二者区别: (1) 线程A和B都要获取对象O的锁定,假设A获 ...