ol3对地图上某些特定的经纬度进行标注
最终效果需要类似于这种
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对地图上某些特定的经纬度进行标注的更多相关文章
- 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明
前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...
- 【百度地图API】建立全国银行位置查询系统(三)——如何在地图上添加银行标注
原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo, ...
- Angularjs+node+Mysql实现地图上特定点的定位以及附加信息展示
注:本博文为博主原创,转载请注明出处. 在上一篇博文中主要讲述了如何利用AngularJs+Node+MySql构建项目,并实现地图上的多点标注,今天在这篇文章中,我们将在上一个项目的基础上,实现特定 ...
- Google Map API v2 (三)----- 地图上添加标记(Marker),标记info窗口,即指定经纬度获取地址字符串
接上篇 http://www.cnblogs.com/inkheart0124/p/3536322.html 1,在地图上打个标记 private MarkerOptions mMarkOption; ...
- 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内。以及两点间的测距功能
权声明:本文为博主原创文章,未经博主允许不得转载. 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内.以及两点间的测距功能. 绘制多边形(蓝色) ...
- echarts 根据经纬度坐标在地图上描点
var mapData = [ {'latitude':30.67, 'longitude':104.07}, {'latitude':34.76, 'longitude':113.65}, {'la ...
- 在高德地图上用svg.js绘制简单图形
这段时间做的一个项目,需要在地图上绘制简单的图形.在学习高德地图JS API的过程中,发现高德地图提供的点.线等API并不能满足我的需求,还好它开放了自定义图层CustomLayer,官方说自定义图层 ...
- 高德地图api实现地址和经纬度的转换(python)
利用高德地图web服务api实现地理/逆地址编码 api使用具体方法请查看官方文档 文档网址:http://lbs.amap.com/api/webservice/guide/api/georegeo ...
- 根据地图上的两个点各自的x,y坐标,计算出2点之间的直线距离。显示为公里、米
/** * calc_map_distance() , 根据地图上的两个点各自的x,y坐标,计算出2点之间的直线距离 * @param array $point_1 第1个点的x,y坐标 array( ...
随机推荐
- java RE Validation常用
import java.util.regex.Matcher; import java.ulil.regex.Pattern; public class RegExpUtil { public sta ...
- struts实现邮件发送功能
在实现邮件发送的时候首先需要用到mail.jar开发包,有关mail.jar的下载可以去百度自行下载 下面是邮件发送核心代码 package com.yysj.lhb.action; import j ...
- 记学习hadoop时无法启动namenode的问题
1. 按照apache的文档,学习搭建hadoop. 2. 当把机器重启之后发现无法启动 namenode. 3. 查看日志发现是一些文件找不到,这些文件的位置是在/tmp目录下的,而/tmp 目录下 ...
- word自动编号后面空格位置太大了
选择你需要调整的段落.右键点击.选择“调整列表缩进” 然后在弹出的窗口中,第三行的“制表符”改成“空格”即可.或者空格都不需要可以改为“不特别标注”
- 师大校赛D coloring Game 并查集
这题说的是 在一个 森林中 两个人在这棵树上涂颜色,黑色或者白色,第一次只能在1 号节点上涂色 第二次 只能在2上涂,以此类推, 在每个节点上只能涂黑色或者白色,并且相邻的点不能有相同的颜色,最后求不 ...
- jQuery事件--change([[data],fn])、on(events,[selector],[data],fn)和hover([over,]out)
change([[data],fn]) 概述 当元素的值发生改变时,会发生 change 事件. 该事件仅适用于文本域(text field),以及 textarea 和 select 元素.当用于 ...
- uva 11354 Bond
题意: 邦德在逃命!他在一个有N个城市,由M条边连接的道路网中.一条路的危险度被定义为这条路上危险度最大的边的危险度. 现在给出若干个询问,s,t,问从s到t的最小的危险度是多少. 思路: 首先可以证 ...
- video control
function VideoControls(option){ this.id = option.videoId; this.videoId = document.getElementsByTagNa ...
- 使用QFileDiaglog实战designer快速开发
今天遇到一个大坑很久才解决 使用designer开发出图形界面转换为py文件后,使用QFileDialog对话框第一个参数一定要是当前窗口组件,否则程序直接奔溃(坑:能运行不报错但奔溃) def ge ...
- Hive中实现group concat功能(不用udf)
在 Hive 中实现将一个字段的多条记录拼接成一个记录: hive> desc t; OK id string str string Time taken: 0.249 seconds hive ...