最终效果需要类似于这种

1、首先我们需要一个最基本的地图,这一步骤可以浏览该分类下的上一篇随笔。

2、ol3支持的文件格式有.geojson,我们需要将坐标制作成符合这种格式的样子才能被ol3识别并显示在地图上。需要注意的是,必须确保经纬度数据的合法性,即纬度不能超过90度,经度不能超过180度。

geojson文件格式类似于json:

{"type": "FeatureCollection","features": [
{"type": "Feature","properties": {"name":"老厂"},"geometry": {"type": "Point","coordinates": [111,25]}},
{"type": "Feature","properties": {"name":"富邓线老胡家变"},"geometry": {"type": "Point","coordinates": [111,26]}}
]}

可以同时描述多个点,也可以只描述一个点,还可以同时描述正方形,三角形,圆。每一个点或是其他图形,代表一个feature,而name代表这个feature的名字。

3、可以通过读取geojson文件,或者是在前端将数据拼接成这种格式,然后添加到地图上:

同样的,类似于离线地图,这里也需要我们将这些点,或是其他图形,制作成一个layer,即图层。图层有两种属性,一个是source,一个是style。
var vectorLayer2 = new ol.layer.Vector({
source: new ol.source.Vector({
url: "map/yz_coordinate2.geojson",//这里采用文件的形似,加载了这样一个文件
format: new ol.format.GeoJSON()//识别文件类型
}),
style: new ol.style.Style({
image: new ol.style.Circle({//这里采用的是圆点
points: 5,
radius: 1,
fill: new ol.style.Fill({
color: 'red'//设置颜色为红色,fill是设置圆内属性,还有另一个s***是设置圆边界
})
})
})
});

4、最后,将这个layer添加入我们的地图中。

map.addLayer(vectorLayer2);

ol3对地图上某些特定的经纬度进行标注的更多相关文章

  1. 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明

    前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...

  2. 【百度地图API】建立全国银行位置查询系统(三)——如何在地图上添加银行标注

    原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo, ...

  3. Angularjs+node+Mysql实现地图上特定点的定位以及附加信息展示

    注:本博文为博主原创,转载请注明出处. 在上一篇博文中主要讲述了如何利用AngularJs+Node+MySql构建项目,并实现地图上的多点标注,今天在这篇文章中,我们将在上一个项目的基础上,实现特定 ...

  4. Google Map API v2 (三)----- 地图上添加标记(Marker),标记info窗口,即指定经纬度获取地址字符串

    接上篇 http://www.cnblogs.com/inkheart0124/p/3536322.html 1,在地图上打个标记 private MarkerOptions mMarkOption; ...

  5. 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内。以及两点间的测距功能

    权声明:本文为博主原创文章,未经博主允许不得转载. 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内.以及两点间的测距功能. 绘制多边形(蓝色) ...

  6. echarts 根据经纬度坐标在地图上描点

    var mapData = [ {'latitude':30.67, 'longitude':104.07}, {'latitude':34.76, 'longitude':113.65}, {'la ...

  7. 在高德地图上用svg.js绘制简单图形

    这段时间做的一个项目,需要在地图上绘制简单的图形.在学习高德地图JS API的过程中,发现高德地图提供的点.线等API并不能满足我的需求,还好它开放了自定义图层CustomLayer,官方说自定义图层 ...

  8. 高德地图api实现地址和经纬度的转换(python)

    利用高德地图web服务api实现地理/逆地址编码 api使用具体方法请查看官方文档 文档网址:http://lbs.amap.com/api/webservice/guide/api/georegeo ...

  9. 根据地图上的两个点各自的x,y坐标,计算出2点之间的直线距离。显示为公里、米

    /** * calc_map_distance() , 根据地图上的两个点各自的x,y坐标,计算出2点之间的直线距离 * @param array $point_1 第1个点的x,y坐标 array( ...

随机推荐

  1. webpack配置常用loader加载器

    webapck中使用loader的方法有三种 使用loader之前必须运行安装 : npm install --save-dev xxx-loader (1)通过CLI : 命令行中运行 webpac ...

  2. [ English ] 俚语 “Ping me=打我电话”

    有次做项目的时候跟一个美国人通过MSN讨论一个问题.突然他说了一句,“Can you ping me in 15 minutes?” Ping Me,什么意思啊? 首先我们来看看“Ping”的原意: ...

  3. djago 定义后台地址

    在app 中urls.py 可替换原始后台登陆地址  /admin   为自定义地址

  4. MyEclipse10中文乱码

    1 进入window->preferences general->content types,可以设置Text对应的default encoding值为UTF-8或为空,然后点击updat ...

  5. Linux服务器下jdk 安装与环境变量的配置

    1,Oracle 官网下载jdk Linux版本 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213 ...

  6. python isinstance()方法的使用

    1. 描述Python中的 isinstance() 函数,是Python中的一个内置函数,用来判断一个函数是否是一个已知的类型,类似 type(). 2. 语法isinstance(object,c ...

  7. Linux基础命令---arp

    arp arp指令用来管理系统的arp缓冲区,可以显示.删除.添加静态mac地址.ARP以各种方式操纵内核的ARP缓存.主要选项是清除地址映射项并手动设置.为了调试目的,ARP程序还允许对ARP缓存进 ...

  8. 查询和修改mysql最大连接数的方法

    查询和修改mysql最大连接数的方法切换到mysql库里查询show variables like 'max_connections';show global status like 'Max_use ...

  9. sqlyog连接Linux上的mysql报错误号码2013,错误号码1130的解决办法

    sqlyog连接Linux上的mysql报错误号码2013,错误号码1130的解决办法 1.报错误号码2013,可能是端口号不是默认的3306,需要改成对应的,检查命令是: [root@host et ...

  10. H.264流媒体协议格式中的Annex B格式和AVCC格式深度解析

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Romantic_Energy/article/details/50508332本文需要读者对H.26 ...