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( ...
随机推荐
- 强力上攻后,在缓解期结束时,MACD将死叉,的后续情形
强力上攻后,在缓解期结束时,MACD将死叉,的后续情形
- Ajax技术之使用XMLHttpRequest对象(一)【初始化XMLHttpRequest对象】
在初始化XMLHttpRequest对象时要考虑两种情况,一种是IE浏览器,另一种是非IE浏览器.在IE浏览器中要把XMLHttpRequest实例化一个ActiveX对象 http_request ...
- 环形数组 最大子段和 dp
题目链接:https://nanti.jisuanke.com/t/36118 环形数组的连续最大子段和,有两种情况. 1.最大和的这个子段没有包含头尾.所以直接dp[i] = max(dp[i-1] ...
- shell作业控制(后台前台命令)
ctrl+z暂停命令(任务) fg调回命令 | fg +id号 bg放在后台持续执行 vmstat 1 & 在后面加上‘&’ 即相当于bg jobs列出当前的 ...
- rpgmakermv(10) GraphicalDesignMode
插件地址:https://github.com/triacontane/RPGMakerMV/blob/master/GraphicalDesignMode.js 原文: メニュー画面や戦闘画面など各 ...
- 取n的第k位
实例二:取n的第k位 方法:a>> k & 1 某值a右移K位后与整数“1”进行与运算.即把需要第几位就右移几位. 例子: 0000 1000 ------8右移3位 0000 0 ...
- cookie中存取中文
- Solid Dominoes Tilings (轮廓线dp打表 + 容器)
第一步先打一个表,就是利用轮廓线DP去打一个没有管有没有分界线组合数量的表 #include<bits/stdc++.h> using namespace std; ; <<; ...
- Redis入门——Java接口
1. maven配置 <dependency> <groupId>redis.clients</groupId> <artifactId>jedis&l ...
- qt之qmake
qt之qmake qmake 10分钟学会使用qmake 创建一个项目文件 qmake使用储存在项目(.pro)文件中的信息来决定Makefile文件中该生成什么. 一个基本的项目文件包含关于应用程序 ...