zoukankan      html  css  js  c++  java
  • 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);
  • 相关阅读:
    博客园的使用和设置
    关于递推算法求解约瑟夫环问题P(n,m,k,s)
    HTML超链接和路径
    HTML文本元素标签
    HTML前序
    Java正则表达式验证至少6位表达式中至少包含数字大小写字母中的一种
    创建自己的第一个Vue项目
    查看端口及进程
    Java读取数据库(Oracle,MySQL,PostgresSQL)表信息以及字段信息生成Word文档
    启动项目报错ORA-12505, TNS:listener does not currently know of SID given in
  • 原文地址:https://www.cnblogs.com/yxth/p/6496989.html
Copyright © 2011-2022 走看看