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);
  • 相关阅读:
    ABP文档
    ABP框架没有httpPost,httpget,httpput特性
    使用命令关闭占用80端口的程序
    nginx安装编译详解
    docker端口映射设置
    centos6.3安装nginx
    process有个env属性,env属性就是环境变量,里面可以访问到NODE_ENV;NODE_ENV是在启动nodejs时添加上去的;
    使用nssm在windows服务器上部署nodejs
    对象相等与不相等
    可用的CSS文字两端对齐
  • 原文地址:https://www.cnblogs.com/yxth/p/6496989.html
Copyright © 2011-2022 走看看