<!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. java线程池的使用学习

    目录 1. 线程池的创建 2. 线程池的运行规则 3. 线程池的关闭 4. 线程池的使用场合 5. 线程池大小的设置 6 实现举例 1. 线程池的创建 线程池的创建使用ThreadPoolExecut ...

  2. Java MySQL 批量查询数据，每次查询10条

    因为 数据量比较多, 比如每次 /** * 批量查询 * @param sourList * @param batchCount * @param userMapper * @return */ pu ...

  3. RocketMQ补偿方案架构设计

    RocketMQ作为消息中间件,在系统异步化架构中,应用非常广泛.但是我们在享用RocketMQ的同时,也不能百分百完全信赖它.一旦RocketMQ崩溃了,给我们业务带来的也将是毁灭性打击. 因此,我 ...

  4. Linux设置复制粘帖的快捷方式

    一.快捷设置 安装gpm:yum install -y gpm* 开启gpm服务:systemctl start gpm 按住鼠标左键,选中想要复制的内容,松开就完成复制,再在复制的位置按右键就完成粘 ...

  5. 2018-8-10-dotnet-从入门到放弃的-500-篇文章合集

    title author date CreateTime categories dotnet 从入门到放弃的 500 篇文章合集 lindexi 2018-08-10 19:16:52 +0800 2 ...

  6. Python3读取深度学习CIFAR-10数据集出现的若干问题解决

    今天在看网上的视频学习深度学习的时候,用到了CIFAR-10数据集.当我兴高采烈的运行代码时,却发现了一些错误: # -*- coding: utf-8 -*- import pickle as p ...

  7. js获取url链接中的域名部分

    用js提取出url中的域名(domain)部分,用split()函数就可以了. 因为一个正确的url必定是由http://或者是https://.domain.路径/参数组成,所以可以用split以/ ...

  8. java 并发 详解

    1 普通线程和 守护线程的区别. 守护线程会跟随主线程的结束而结束,普通线程不会. 2 线程的 stop  和 interrupted 的区别. stop 会停止线程,但是不会释放锁之类的资源? in ...

  9. Go语言cookie的基本操作

    cookie数据结构介绍 cookie数据结构介绍 a. Expires,cookie过期时间,使用绝对时间.比如2018/10/10 10:10:10b. MaxAge,cookie过期时间,使用相 ...

  10. 一维、二维数组 与 常用的返回数组 以及 fetch_all与fetch_row的区别

    一维数组:单行单列的数组. 二维数组:多行多列的数组.       (至少两行两列) 索引数组: fetch_all() 返回所有数组 fetch_row() 返回一行或一列数组  (第二行需要输入两 ...