jimjiayu
jimjiayu

Openlayers 在地图上画点，线，面，圆


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OPenLayers 3 exampletitle>
    <link rel="stylesheet" href="ol3/ol.css">
    <style>
        #map{
            width: 100%;
            height: 500px;
        }
        ul li{list-style: none;}
        .ol-popup {
            position: absolute;
            background-color: white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            padding: 5px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
            min-width: 350px;
        }
        .ol-popup:after, .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }
        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }
        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }
        .ol-popup-closer:after {
            content: "✖";
        }
    style>
head>
<body>
<div id="map">

div>
<div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer">a>
    <div id="popup-content">
        <ul id="message">

        ul>
    div>
div>
<form class="form-inline">
    <label>Geometry type  label>
    <select name="" id="type">
        <option value="Point">Pointoption>
        <option value="LineString">LineStringoption>
        <option value="Polygon">Polygonoption>
        <option value="Circle">Circleoption>
        <option value="None">Noneoption>
    select>
form>
<button id="btn">Bezierbutton>

            
<script src="ol3/jquery-1.11.3.js">script>
<script src="ol3/ol.js" type="text/javascript">script>

<script type="text/javascript">
    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');
    var closer = document.getElementById('popup-closer');
//    创建一个叠加层，将弹出式窗口定位到地图。
    var overlay = new ol.Overlay(/** @type {olx.OverlayOptions}*/ ({
        element: container,
        autoPan: true,
        autoPanAnimation:{
            duration:250
        }
    }));
//    点击关闭按钮  关闭弹窗
    closer.onclick = function () {
        //不显示弹出框
        overlay.setPosition(undefined);
        closer.blur();
        return false;
    };
    // 创建一个使用Open Street Map地图源的瓦片图层
var raster = new ol.layer.Tile({
    source:new ol.source.OSM()
});
var source = new ol.source.Vector({wrapX:false});
//ol.layer.Vector用于显示在客户端渲染的矢量数据。
var vector = new ol.layer.Vector({
    source:source
});

//地图部分
    var map = new ol.Map({
        //设置地图图层
       layers:[raster,vector],
        // 让id为map的div作为地图的容器
        target:'map',
        overlays:[overlay],
        // 设置显示地图的视图
        view:new ol.View({
           center:[-11000000, 4600000],  // 定义地图显示中心
            zoom:4  //缩放层级
        }),
        controls:ol.control.defaults({
            attributionOptions:{
                collapsible:false
            }
        })

    });

    //下拉列表切换
    var typeSelect = document.getElementById('type');
//添加形状的函数
var draw;
function addInteraction() {
    var value = typeSelect.value;
    if(value !== 'None'){
        //ol.interaction.Draw该类允许用户在地图上绘制一些几何图形，
        // 可以通过构造方法设置type属性来指写是绘制哪种几何图形。目前支持点，线，多边形，圆形。
            draw = new ol.interaction.Draw({
                source:source,
                type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
            });
        map.addInteraction(draw);
    }
}
    typeSelect.onchange = function () {
        map.removeInteraction(draw);
        addInteraction();

    };
addInteraction();
//向地图中添加点击处理程序以呈现弹出式窗口。
    map.on('click',function (evt) {
        //坐标
        var coordinate = evt.coordinate;
        console.log(coordinate);
        //ol.proj.transform(coordinate, source, destination)来转换不同的坐标点，
        // 比如，将地理坐标系108.4，23.7转换成墨卡托坐标系
        var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
                coordinate,'EPSG:3857','EPSG:4326'
        ));
        content.innerHTML = '
    '+'
  • '+"坐标系："+''+''+hdms+''+''+'
    • '    +'
';
        overlay.setPosition(coordinate);

    });

script>
body>
html>

Openlayers 在地图上画点，线，面，圆_第1张图片

你可能感兴趣的:(Openlayers)

  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • vue+threeJS示例（001）: 不断翻转的立体箱体 还是大剑师兰特 #ThreeJS综合教程200+threejs入门threejs教程threejs示例大剑师
    作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第001个示例文章目录一、示例效果图二、示例简介三、配置说明四、示例源代码（共88行）一、示例效果图二、示
  • 开源GIS与Vue结合 桃子味的白开水
    相关插件安装推荐使用npm的方式安装，它能更好地和webpack打包工具配合使用。¶1、ol-----OpenLayers地图操作基础包[email protected]¶2、ol-ext-----OpenLayers扩展包npminstallol-ext¶3、proj4------前端投影转换包npminstallproj4¶4、turf------前端空间分析包npminstall@tur
  • 在Vue项目中使用Proj4js库进行坐标系转换并加载WMTS服务 卡夫卡的小熊猫 vue.js前端
    OpenLayers是一个用于创建Web地图应用程序的JavaScript库。它支持许多不同的地图投影和坐标系，包括常见的Web墨卡托投影（EPSG:3857）和经纬度坐标系（EPSG:4326），以及其他许多本地或自定义的投影和坐标系。要在OpenLayers中转换不同坐标系下的WMTS服务，你需要了解两个主要部分：坐标系的定义和WMTS服务的配置。安装Proj4js：首先，在Vue项目中安装P
  • 四章-47-KML地震信息 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1047.html，对应的官网示例https://openlayers.org/en/latest/examples/kml-earthquakes.html?q=kmlimage.pngimage.pngKML源，数据处理方式和前例相同信息弹窗使用了bootstr
  • WebGL入门（019）：WebGLSync 简介、使用方法、示例代码 还是大剑师兰特 #webGL开发教程webgl大剑师
    还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。No.内容链接1Openlayers【入门教程】-【源代码+示例300+】2Leaflet【入门教
  • openlayers3——点 人鱼小姐ww openlayers前端
    本篇文章主要是介绍运用openlayers3新增点、移动点，删除点。新增点步骤：1、新增元素2、把元素添加到图层数据源上3、把图层数据源放到图层上4、把图层添加到地图上//新增元素that.pointFeature=newol.Feature({geometry:newol.geom.Point([data.longitude,data.latitude]),//经纬度key:data.id,})
  • Openlayers用图片填充面 Jinuss 玩转OpenlayersjavascriptOplayers
    概述我们知道openlayers通常设置feature要素的方式主要是通过ol.style.stroke描边和ol.style.fill填充,这对比较简单的样式设置十分有效。如果要设置feature的图标，还可以通过ol.style.Icon加载外部图片资源，但是如果要设置面的填充，就需要稍微复杂的设置。效果解决方案colorlikeopenlayers中定义了colorlike类型,通过ol.c
  • Openlayers用图片填充线 Jinuss 玩转Openlayers前端Oplayers前端
    概述上文中提过Openlayers如何用图片填充面，那么我们如何用图片或图标去填充线条呢？在面的填充，我们是平铺的，没有方向，在水平垂直方向重复就完事，但是在线的填充就没有这么简单粗暴了，因为线往往是首尾两端有方向的，比如当线条表示线路图时，pattern就有些力不从心了。效果解决方案StyleFunctionOpenlayers中设置样式除了Style的stroke和fill往，还提供了另一种方
  • 283：vue+openlayers 4326和3857坐标系下的分辨率区别 还是大剑师兰特 #大剑师openlayers示例openlayers入门openlayers教程
    作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第283个示例文章目录一、示例效果图二、示例简介三、配置说明四、示例源代码（共115行）五、相关文章参考一
  • Vue使用openlayers加载天地图 zsd_666 前端
    Vue使用openlayers加载天地图https://www.jb51.net/javascript/315236epf.htm
  • 五章-50-绘制点线面 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1050.html，对应的官网示例https://openlayers.org/en/latest/examples/draw-features.html?q=Draghttps://openlayers.org/en/latest/examples/draw-fr
  • 四章-46-使用KML文件渲染要素 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1046.html，对应的官网示例https://openlayers.org/en/latest/examples/kml.html?q=wktimage.pngimage.pngKML varraster=newol.layer.Tile({sourc
  • Vue中$root的使用方法 还是大剑师兰特 #vue2实战指南vue.jsvue的root大剑师
    查看本专栏目录关于作者还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。热门推荐内容链接1openlayers从基础到精通，300+代码示例2leaflet热门分解学习教程，15
  • vue3结合openlayers，geoserver实现GIS一张图(WebGIS) GIS小小白 javascriptvue.js前端arcgispostgresqlweb
    一.前言不知不觉一年又要过去了，接触开发也就是这几个月的事情，感觉时间过的真快，今天就是除夕了，祝各位新年快乐呀，话说回来，其实在接触学习WebGIS的过程中还是蛮迷茫的，自己虽然是地信的学生，对于地理方面还有有一些自己的理解，但平时专业课学习的就是arcgis空间分析，遥感图像处理，WebGIS的部分并不是太重视，可能是因为没有那么多时间，毕竟这需要扎实的前端技能，不是一朝一夕就可以说明白的，当
  • CSS特效027：超可爱的小狗狗，女孩子都喜欢 还是大剑师兰特 #css常用示例100+css前端css小狗
    为什么当初选择计算机行业？科技总是迷人的，通过计算机可以造出各种美妙的设计。后来工作，更加感觉到可视化的魅力，于是乎更加的专注于canvas，CSS，openlayers，leaflet，cesium。。。CSS常用示例100+专栏目录本专栏记录的是经常使用的CSS示例与技巧，主要包含CSS布局，CSS特效，CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点，CSS特效主
  • 四章-35-鼠标悬停查看矢量瓦片的信息 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1035.html，对应的官网示例https://openlayers.org/en/latest/examples/vector-tile-info.html?q=featureimage.pngimage.png鼠标悬停查看矢量瓦片的信息#map{positio
  • 四章-36-单选或多选矢量瓦片 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1036.html，对应的官网示例https://openlayers.org/en/latest/examples/box-selection.html?q=featureimage.png单选或多选矢量瓦片选择方式 单选多选//实现思路：声明一个对象s
  • Geoserver 2.20.x 使用SVG符号的准确方法 [email protected] GISGeoserversvgsld
    1、找到数据目录：如图所示：或者：2、将QGIS如下目录下的svg文件夹全部拷贝到相应路径：(也叫“工作区”)3、用相对路径引用：（openlayers）4、最终效果：另：网上的很多方法都不管用，我这经测可行。
  • 从零打造一个Web地图引擎 街角小林2
    说到地图，大家一定很熟悉，平时应该都使用过百度地图、高德地图、腾讯地图等，如果涉及到地图相关的开发需求，也有很多选择，比如前面的几个地图都会提供一套jsAPI，此外也有一些开源地图框架可以使用，比如OpenLayers、Leaflet等。那么大家有没有想过这些地图是怎么渲染出来的呢，为什么根据一个经纬度就能显示对应的地图呢，不知道没关系，本文会带各位从零实现一个简单的地图引擎，来帮助大家了解GIS
  • vue+cesium：从0到1部署开发运行环境 还是大剑师兰特 #cesium示例教程100+vue.jsjavascriptcesiumcesium教程cesium示例
    本系列教程是在vue2.X的基础上加载cesium程序，来开发各种示例程序。安装顺序1，下载安装nodejs下载地址：https://nodejs.org/en/download/根据用户自己的机器情况进行选择不同版本的软件下载。本教程示例采用是是windows64位系统软件。安装过程很简单，一路下一步。更为详细的请参考：http://www.openlayers-cesium.com/2021/
  • WebGIS入门—进阶 GISer_Jing WebGIS读研笔记期末考试arcgiswebgl前端javatomcatmysqlvue
    WebGIS入门_GISer_Jing的博客-CSDN博客在WebGIS入门篇，前端使用了纯HTML、CSS、Javascript、Jquery较为传统方式构建，服务器借助ArcGISSrver发布相关地理服务且仅涉及到2DGIS，未自行构建后端且未涉及到数据库。So,WebGIS进阶来了！！！！本文大概是关于：Vue2+Cesium+Openlayers+Java+MySQL+Tomcat1.前
  • openlayers 信息弹出框封装 jjxliu306
    在使用openlayers作为地图前端展示层的时候，用户经常需要点击具体某个feature之后弹出该feature的具体信息，因此封装一个弹出层组件作为公共组件，样式统一，调用简单。代码如下：1、组件封装Popup.js/*刘玉峰[email protected]*///点击后高亮下方的feature并且弹出popup信息做展示Popup=function(map){this.
  • GeoServer安装部署并发布图层 朱凤丽
    概况GeoServer是基于Java的软件服务器，允许用户查看和编辑地理空间数据。使用开放地理空间联盟（OGC）提出的开放标准，GeoServer在地图创建和数据共享方面具有极大的灵活性。这是官方的介绍，其实看它的名字，不难理解，是一种服务，它可以创建各种格式的地图，根据数据可以呈现为png/jpeg格式的图片，使数据可视化。接触地图，使用openlayers挺长时间，请求了很多GeoServer
  • openlayers地图初始化(一) Summer_Uncle 前端javascript
    1.下包npminstallol2.初始化import{Map,View}from'ol'importTileLayerfrom'ol/layer/Tile'//创建一个map对象，指定地图容器的id和展示地图的初始视图varmap=newol.Map({target:'map',//地图容器的idview:newol.View({center:ol.proj.fromLonLat([118.79
  • Cesium 实战 - 加载 GeoJson 混合几何类型数据（同时包含 MultiPolygon 和 MultiLinestring），不能加载的问题 非科班Java出身GISer Cesium实战教程cesiumgeoJsoncesium多几何问题geoJson多几何问题geoJson混合数据问题geoJsoncesium
    Cesium实战-加载GeoJson混合几何类型数据（同时包含MultiPolygon和MultiLinestring），不能加载的问题复现问题完整代码：在线示例在之前的项目中，偶然遇到个气泡的问题：GeoJson同时包含MultiPolygon和MultiLinestring，并且数量比较大的时候，MultiLinestring不同正常加载。经过测试，Openlayers中加载是没有问题的，Ce
  • 卫星影像离线瓦片如何调用？ 水经注GIS 地图数据
    我们曾为你分享了按区县购买卫星影像并在线调用的方法。于是就有朋友问，卫星影像瓦片可以离线调用吗？当然可以，这里就来分享一下卫星影像瓦片离线调用的方法。卫星影像离线瓦片如何调用？这里以OpenLayers、Mapbox和Cesium等多个开源GIS平台为例，为你分享卫星影像瓦片离线调用的方法，并附上相应的源代码示例。如果你需要该源代码，请通过关注公众号“水经注GIS”，并在后台回复“240124”自
  • vue+openlayers根据坐标点绘制多边形 小黑猪hhh openlayersvue天地图
    需求：根据多边形轮廓点及中心点在天地图上绘制形状；不同类型的多边形轮廓以颜色区分功能：1.中心点坐标实现聚合2.根据地图的缩放级别显示或者隐藏多边形3.鼠标移入多边形或者中心点实现高亮并显示弹框，移除恢复原来的效果js代码varmap,layer_poly_A,layer_poly_B,layer_poly_C,layer_poi_A,layer_poi_B,layer_poi_Cconstove
  • WebGIS实战：Vue+Openlayers实现地图控件的加载与控件自定义位置 Oruizn Vue.jsWebGISvuecss
    目录前言1、Openlayers自带的地图控件介绍与展示2、Openlayers-Extension提供的地图控件介绍与展示3、地图控件位置调整4、下一步计划5、相关源码相关WebGIS实战信息：上一篇博客：WebGIS实战：Vue+Openlayers实现网络地图的加载与切换下一篇博客：前言在上一节《WebGIS实战：Openlayers实现网络地图的加载与切换》中，我们已经用到了一个地图控件了
  • 259：vue+openlayers: 显示海量多边形数据，10ms加载完成 还是大剑师兰特 #openlayers海量多边形openlayers海量数据openlayers进阶教程openlayers入门教程
    第259个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers项目中通过WebGLVectorLayerRenderer方式加载海量多边形数据。这里相当于将海量的数据放在同一个层的source中，然后通过webglTile的方式渲染出这一层。本示例数据为5000个多边形，加载速度超级快。直接复制下面的vue+openlayers源代码，操作2分钟即可运行实现效果；注意如果Ope
  • 统一思想认识 永夜-极光 思想
    1.统一思想认识的基础,才能有的放矢  原因:    总有一种描述事物的方式最贴近本质,最容易让人理解.    如何让教育更轻松,在于找到最适合学生的方式.          难点在于,如何模拟对方的思维基础选择合适的方式.   &
  • Joda Time使用笔记 bylijinnan javajoda time
    Joda Time的介绍可以参考这篇文章： http://www.ibm.com/developerworks/cn/java/j-jodatime.html 工作中也常常用到Joda Time，为了避免每次使用都查API，记录一下常用的用法：     /** * DateTime变化（增减） */ @Tes
  • FileUtils API eksliang FileUtilsFileUtils API
    转载请出自出处：http://eksliang.iteye.com/blog/2217374 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • 各种新兴技术 不懂事的小屁孩 技术
    1:gradle Gradle 是以 Groovy 语言为基础，面向Java应用为主。基于DSL（领域特定语言）语法的自动化构建工具。 现在构建系统常用到maven工具，现在有更容易上手的gradle， 搭建java环境: http://www.ibm.com/developerworks/cn/opensource/os-cn-gradle/ 搭建android环境： http://m
  • tomcat6的https双向认证 酷的飞上天空 tomcat6
    1.生成服务器端证书 keytool -genkey -keyalg RSA -dname "cn=localhost,ou=sango,o=none,l=china,st=beijing,c=cn" -alias server -keypass password -keystore server.jks -storepass password -validity 36
  • 托管虚拟桌面市场势不可挡 蓝儿唯美
    用户还需要冗余的数据中心，dinCloud的高级副总裁兼首席营销官Ali Din指出。该公司转售一个MSP可以让用户登录并管理和提供服务的用于DaaS的云自动化控制台，提供服务或者MSP也可以自己来控制。 在某些情况下，MSP会在dinCloud的云服务上进行服务分层，如监控和补丁管理。 MSP的利润空间将根据其参与的程度而有所不同，Din说。 “我们有一些合作伙伴负责将我们推荐给客户作为个
  • spring学习——xml文件的配置 a-john spring
    在Spring的学习中，对于其xml文件的配置是必不可少的。在Spring的多种装配Bean的方式中，采用XML配置也是最常见的。以下是一个简单的XML配置文件： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.or
  • HDU 4342 History repeat itself 模拟 aijuans 模拟
    来源：http://acm.hdu.edu.cn/showproblem.php?pid=4342 题意：首先让求第几个非平方数，然后求从1到该数之间的每个sqrt(i)的下取整的和。 思路：一个简单的模拟题目，但是由于数据范围大，需要用__int64。我们可以首先把平方数筛选出来，假如让求第n个非平方数的话，看n前面有多少个平方数，假设有x个，则第n个非平方数就是n+x。注意两种特殊情况，即
  • java中最常用jar包的用途 asia007 java
    java中最常用jar包的用途 jar包用途axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现、查找和实现可插入式接口，提供一些一般类实例化、单件的生命周期管理的常用方法.jaxrpc.jarAxis运行所需要的组件包saaj.jar创建到端点的点到点连接的方法、创建并处理SOAP消息和附件的方法，以及接收和处理SOAP错误的方法.  w
  • ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法 百合不是茶 jsjson编码返回异常
    一:ajax获取自定义Struts框架中的json编码  出现以下 问题:       1,强制flush输出  json编码打印在首页 2, 不强制flush js会解析json 打印出来的是错误的jsp页面   却没有跳转到错误页面 3,  ajax中的dataType的json 改为text 会
  • JUnit使用的设计模式 bijian1013 java设计模式JUnit
    JUnit源代码涉及使用了大量设计模式 1、模板方法模式（Template Method）         定义一个操作中的算法骨架，而将一些步骤延伸到子类中去，使得子类可以不改变一个算法的结构，即可重新定义该算法的某些特定步骤。这里需要复用的是算法的结构，也就是步骤，而步骤的实现可以在子类中完成。   
  • Linux常用命令（摘录） sunjing crondchkconfig
    chkconfig --list   查看linux所有服务 chkconfig --add servicename 添加linux服务 netstat -apn | grep 8080  查看端口占用 env 查看所有环境变量 echo $JAVA_HOME 查看JAVA_HOME环境变量   安装编译器 yum install -y gcc
  • 【Hadoop一】Hadoop伪集群环境搭建 bit1129 hadoop
     结合网上多份文档，不断反复的修正hadoop启动和运行过程中出现的问题，终于把Hadoop2.5.2伪分布式安装起来，跑通了wordcount例子。Hadoop的安装复杂性的体现之一是，Hadoop的安装文档非常多，但是能一个文档走下来的少之又少，尤其是Hadoop不同版本的配置差异非常的大。Hadoop2.5.2于前两天发布，但是它的配置跟2.5.0，2.5.1没有分别。 &nb
  • Anychart图表系列五之事件监听 白糖_ chart
    创建图表事件监听非常简单：首先是通过addEventListener('监听类型',js监听方法)添加事件监听，然后在js监听方法中定义具体监听逻辑。 以钻取操作为例，当用户点击图表某一个point的时候弹出point的name和value，代码如下： <script> //创建AnyChart var chart = new AnyChart(); //添加钻取操作&quo
  • Web前端相关段子 braveCS web前端
    Web标准：结构、样式和行为分离   使用语义化标签 0）标签的语义：使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页结构，抓取重要内容。去样式后也会根据浏览器的默认样式很好的组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。 1）div和span是没有语义的：只是分别用作块级元素和行内元素的区域分隔符。当页面内标签无法满足设计需求时，才会适当添加div
  • 编程之美-24点游戏 bylijinnan 编程之美
    import java.util.ArrayList; import java.util.Arrays; import java.util.HashSet; import java.util.List; import java.util.Random; import java.util.Set; public class PointGame { /**编程之美
  • 主页面子页面传值总结 chengxuyuancsdn 总结
    1、showModalDialog returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口时,用于返回窗口的值 主界面 var sonValue=window.showModalDialog("son.jsp"); 子界面 window.retu
  • [网络与经济]互联网+的含义 comsci 互联网+
          互联网+后面是一个人的名字 = 网络控制系统       互联网+你的名字 =  网络个人数据库       每日提示:如果人觉得不舒服,千万不要外出到处走动,就呆在床上,玩玩手游,更不能够去开车,现在交通状况不
  • oracle 创建视图 with check option daizj 视图vieworalce
    我们来看下面的例子： create or replace view testview as select empno,ename from emp where ename like ‘M%’ with check option; 这里我们创建了一个视图，并使用了with check option来限制了视图。 然后我们来看一下视图包含的结果： select * from testv
  • ToastPlugin插件在cordova3.3下使用 dibov Cordova
        自己开发的Todos应用，想实现“ 再按一次返回键退出程序 ”的功能，采用网上的ToastPlugins插件，发现代码或文章基本都是老版本，运行问题比较多。折腾了好久才弄好。下面吧基于cordova3.3下的ToastPlugins相关代码共享。       ToastPlugin.java package&nbs
  • C语言22个系统函数 dcj3sjt126com cfunction
    C语言系统函数一、数学函数下列函数存放在math.h头文件中Double floor(double num) 求出不大于num的最大数。Double fmod(x, y) 求整数x/y的余数。Double frexp(num, exp); double num; int *exp; 将num分为数字部分（尾数）x和 以2位的指数部分n，即num=x*2n，指数n存放在exp指向的变量中，返回x。D
  • 开发一个类的流程 dcj3sjt126com 开发
    本人近日根据自己的开发经验总结了一个类的开发流程。这个流程适用于单独开发的构件，并不适用于对一个项目中的系统对象开发。开发出的类可以存入私人类库，供以后复用。   以下是开发流程： 1. 明确类的功能，抽象出类的大概结构 2. 初步设想类的接口 3. 类名设计（驼峰式命名） 4. 属性设置(权限设置) 判断某些变量是否有必要作为成员属
  • java 并发 shuizhaosi888 java 并发
    能够写出高伸缩性的并发是一门艺术   在JAVA SE5中新增了3个包 java.util.concurrent java.util.concurrent.atomic java.util.concurrent.locks 在java的内存模型中，类的实例字段、静态字段和构成数组的对象元素都会被多个线程所共享，局部变量与方法参数都是线程私有的，不会被共享。
  • Spring Security（11）——匿名认证 234390216 Spring SecurityROLE_ANNOYMOUS匿名
    匿名认证 目录 1.1     配置 1.2     AuthenticationTrustResolver          对于匿名访问的用户，Spring Security支持为其建立一个匿名的AnonymousAuthenticat
  • NODEJS项目实践0.2[ express,ajax通信...] 逐行分析JS源代码 Ajaxnodejsexpress
      一、前言         通过上节学习，我们已经        ubuntu系统搭建了一个可以访问的nodejs系统，并做了nginx转发。本节原要做web端服务 及 mongodb的存取，但写着写着，web端就
  • 在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值 lhbthanks javahtmlstrutscheckbox
    第一种方法：获取结果String类型 在 Action 中获得的是一个 String 型数据，每一个被选中的 checkbox 的 value 被拼接在一起，每个值之间以逗号隔开(,)。 所以在 Action 中定义一个跟 checkbox 的 name 同名的属性来接收这些被选中的 checkbox 的 value 即可。 以下是实现的代码： 前台 HTML 代码：
  • 003.Kafka基本概念 nweiren hadoopkafka
    Kafka基本概念：Topic、Partition、Message、Producer、Broker、Consumer。 Topic：             消息源（Message）的分类。 Partition：             Topic物理上的分组，一
  • Linux环境下安装JDK roadrunners jdklinux
    1、准备工作 创建JDK的安装目录： mkdir -p /usr/java/   下载JDK，找到适合自己系统的JDK版本进行下载： http://www.oracle.com/technetwork/java/javase/downloads/index.html   把JDK安装包下载到/usr/java/目录，然后进行解压： tar -zxvf jre-7
  • Linux忘记root密码的解决思路 tomcat_oracle linux
    1：使用同版本的linux启动系统，chroot到忘记密码的根分区passwd改密码 　　2：grub启动菜单中加入init=/bin/bash进入系统，不过这时挂载的是只读分区。根据系统的分区情况进一步判断. 　　3: grub启动菜单中加入 single以单用户进入系统. 　　4:用以上方法mount到根分区把/etc/passwd中的root密码去除 　　例如: 　　ro
  • 跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现 xueyou jsonpjquery框架UIhtml5
    postMessage 是 HTML5 新方法，它可以实现跨域窗口之间通讯。到目前为止，只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持，而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样，前者是前端擅长跨域文档数据即时通讯，后者擅长针对跨域服务端数据通讯，p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他