最终效果需要类似于这种

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. 多表关联查询_resultMap_集合对象

    多表关联查询_resultMap_集合对象_N+1方式实现 package com.bjsxt.mapper; import java.util.List; import com.bjsxt.pojo ...

  2. 16.和input相关的知识点

    1.改变input里面placeholder颜色 <input class="pre_name" type="text" placeholder=&quo ...

  3. linux中安装oracle数据库

    1. 执行 ./runInstaller 提示 /tmp 的空间过小执行 mount -o remount,size=1G,noatime /tmp重新设置 /tmp 的大小 2. 安装完成数据库之后 ...

  4. Some Useful Resources for the Future Usage

    并发编程 http://ifeve.com/ 美国各州 http://114.xixik.com/usa-stats/ 美国各州邮编zip code -> https://www.douban. ...

  5. spring boot 知识点

    spring boot 好处 1. 简化配置,spring boot 提供了默认配置 例如 日志 默认logback日志  info级别 2. 简化部署,内嵌容器,tomcat,jetty,直接部署j ...

  6. Java集合-----Set详解

    Set是没有重复元素的集合,是无序的 1.HashSet HashSet它是线程不安全的       HashSet常用方法:   add(E element)  将指定的元素添加到此集合(如果尚未存 ...

  7. maven工程的common模块jar上传至仓库并被其它模块依赖

    .parent pom和common pom 都需要添加 <distributionManagement> <repository> <id>nexus</i ...

  8. First Wainberg-2018-Deep learning in biomedicine Experience

    ppt+paper 链接:https://pan.baidu.com/s/14toqjcSJti5ZXT3ff4rwIA 提取码:xgkt

  9. 集合运算—union(并集)、intersect(交集)和except(差集)

    一.集合运算的基本格式是: 集合查询1 <集合运算> 集合查询2 [order by ...] 二.集合运算符是对两个集合操作的,两个集合必须具有相同的列数,列具有相同的数据类型(至少能隐 ...

  10. RN与android原生开发混合后的环境报错问题

    RN与android原生开发混合后的环境报错问题 需要先安装nodejs$ yarn --version1.12.1更新当前版本yarn upgrade --latest安装 | Yarnhttps: ...