最终效果需要类似于这种

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

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

geojson文件格式类似于json:

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

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

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

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

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

  1. 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. bat cmd 删除文件或文件夹 删除注册表

    @echo off rd "C:\Documents and Settings\Administrator\桌面\新建文件夹" del 是用来删除文件的,删除文件夹的命令是rd 注 ...

  2. 解决React Native使用Fetch API请求网络报Network request failed

    问题来源: 1 . 在测试fetch数据请求时,Xcode9.0以上的无法请求https, 需要在Xcode中加载项目后修改Info.plist的相关配置,具体如下参考 问题及解决方法一模一样,不再重 ...

  3. ping主机不通邮件报警

    #!/bin/bash#Author: wang#Date: 20170825 for ip in "192.168.101.28" do ping -c 1 $ip && ...

  4. laravel使用过程总结

    docker-compose exec -T workspace php artisan route:list  //查看路由 laravel数据存入session,会出现Session store ...

  5. c# 调试模式下Swaggerf附加接口参数

    c# 调试模式下Swaggerf附加接口参数,如:每个接口Header中附加参数appId 1.新增过滤器: public class GlobalHttpHeaderFilter : IOperat ...

  6. 斯坦福大学自然语言处理第四课“语言模型(Language Modeling)”

    http://52opencourse.com/111/斯坦福大学自然语言处理第四课-语言模型(language-modeling) 一.课程介绍 斯坦福大学于2012年3月在Coursera启动了在 ...

  7. CSS选择符-----关系选择符

       包含选择符(E F)           选择所有被E元素包含的F元素 与 子选择符(E>F) 不同的是,包含选择符将会命中所有符合条件的后代,包括儿子,孙子,孙子的孙子... <! ...

  8. android手机平板如何使用usb有线网卡

    最近有个项目需要在android平板上使用usb有线网卡,所以做了一部分工作,在这里简单总结一下. 我在TB上购买了一个micro-usb接口的android免驱有线网卡,这个网上很多,随便买一个符合 ...

  9. tiny4412 硬件解码

    今天发现了一个好的资源,上面有三星的一些实例代码.http://git.infradead.org/users/kmpark/public-apps

  10. Linux基础命令---apwatch

    arpwatch      arpwatch指令可以监听网络设备和ip地址的对应关系,将发现的信息发送到系统日志“/var/log/message”. 此命令的适用范围:RedHat.RHEL.Ubu ...