1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     <title>使用点要素作为标记</title>
  6.     <link rel="stylesheet" href="./OpenLayers-2.12/theme/default/style.css" type="text/css" />
  7.     <script src="./OpenLayers-2.12/lib/OpenLayers.js"></script>
  8.     <script type="text/javascript">
  9.         function init(){
  10.             var map = new OpenLayers.Map("ch3_feature_markers");
  11.             var layer = new OpenLayers.Layer.OSM("OpenStreetMap");
  12.             map.addLayer(layer);
  13.             map.addControl(new OpenLayers.Control.LayerSwitcher());
  14.             map.setCenter(new OpenLayers.LonLat(0,0), 2);
  15.             var pointLayer = new OpenLayers.Layer.Vector("Features", {
  16.                 projection: "EPSG:933913"
  17.             });
  18.             map.addLayer(pointLayer);
  19.             // 新建一些随机的要素点
  20.             var pointFeatures = [];
  21.             for(var i=0; i< 150; i++) {
  22.                 var px = Math.random() * 360 - 180;
  23.                 var py = Math.random() * 170 - 85;
  24.                 // 将经纬度坐标转换为地图工程.
  25.                 var lonlat = new OpenLayers.LonLat(px, py);
  26.                 lonlat.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
  27.                 var pointGeometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
  28.                 var pointFeature = new OpenLayers.Feature.Vector(pointGeometry);
  29.                 pointFeatures.push(pointFeature);
  30.             }
  31.             // 将要素添加到图层中
  32.             pointLayer.addFeatures(pointFeatures);
  33.             // 当要素选中之后的事件控制
  34.             pointLayer.events.register("featureselected", null, function(event){
  35.                 var layer = event.feature.layer;
  36.                 event.feature.style = {
  37.                     fillColor: '#ff9900',
  38.                     fillOpacity: 0.7,
  39.                     strokeColor: '#aaa',
  40.                     pointRadius: 12
  41.                 };
  42.                 layer.drawFeature(event.feature);
  43.             });
  44.             // 当要素未选中之后的事件控制
  45.             pointLayer.events.register("featureunselected", null, function(event){
  46.                 var layer = event.feature.layer;
  47.                 event.feature.style = null;
  48.                 event.feature.renderIntent = null;
  49.                 layer.drawFeature(event.feature);
  50.             });
  51.             // 添加到触发矢量图层上的事件需要选择功能控制。
  52.             var selectControl = new OpenLayers.Control.SelectFeature(pointLayer);
  53.             map.addControl(selectControl);
  54.             selectControl.activate();
  55.         }
  56.     </script>
  57. </head>
  58. <body onload="init()">
  59. <!-- 地图 DOM 元素 -->
  60.     <div id="ch3_feature_markers" style="width: 100%; height: 100%;"></div>
  61. </body>
  62. </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. python3-常用模块之sys

    import syssys 是和Python解释器打交道的sys.argvprint(sys.argv) # argv的第一个参数 是python这个命令后面的值 主要用途 1. 程序员 运维人员 在 ...

  2. Spring boot获取yml字段内容为null的各种情况

    首先,在resource目录下配置test.yml文件 A: B: http://123.com? C: username="lili"&password="12 ...

  3. Leetcode 125.验证回文字符串(Python3)

    题目: 给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写. 说明:本题中,我们将空字符串定义为有效的回文串. 示例 1: 输入: "A man, a plan, ...

  4. [转]C# 中的委托和事件 + 观察者模式

    引言 委托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太容易了,而没有过去 ...

  5. springcloud-sleuth实现日志的链路追踪

    1.需要将spring-cloud-starter-sleuth的依赖加入即可(注意:最好使用maven或gradle工具) 代码参考:https://github.com/Pinshuducha/s ...

  6. 微信audio自动播放（ios播放问题）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. DVWA 之high级别sql注入

                 Sqlmap 高级注入,抓包,然后保存数据到1.txt 1.判断注入点 sqlmap -r /root/1.txt -p id --second-order "ht ...

  8. Scrapy框架Crawler模板爬虫

    1.创建一个CrawlerSpider scrapy genspider -t crawl wx_spider 'wxapp-union.com' #导入规则 from scrapy.spiders ...

  9. 二、Python安装和第一个程序

    <1.Python语言介绍1.官方介绍:Python 是一款易于学习且功能强大的编程语言. 它具有高效率的数据结构,能够简单又有效地实现面向对象编程.Python 简洁的语法与动态输入之特性,加 ...

  10. 2018-10-31-C#-程序内的类数量对程序启动的影响

    title author date CreateTime categories C# 程序内的类数量对程序启动的影响 lindexi 2018-10-31 14:7:6 +0800 2018-10-1 ...