基于Leaflet的 图形绘制与服务接口调用

 

前段时间出差了，一直也没写新东西。上周回公司了，组长给了个小任务，但是这项任务涉及面还是比较广的，就记录一下。

包括：1、多边形的绘制；2、服务接口的调用；3、config配置文件的读与写；

后两项之前都只是读过项目代码，这一次算是第一次动手写。

一、首先是leaflet多边形的绘制；

 

var latlngs = [[51.505,-0.09],[52,-1],[51,-0.05],[51.3,-0.06]] var polygon = L.polygon(latlngs, {color: '#000eff',fillColor:'#0000ed', weight:1}).addTo(m);

这是一项基本的写法，具体代码网上一搜一大堆。但是这次在这个小功能上卡了好久，主要是多边形坐标问题。

功能逻辑是点击一下地图，能够读取服务，然后把坐标筛选出来保存，但是筛选出来的的坐标格式是经纬度格式的，

按照我以往的逻辑这样是没问题的，也没往这上面去想，但是在运行的时候总是报错，

最后我把坐标数组改成一个点来绘制marker，经过对比发现老外绘制图形坐标是维度在前经度在后的

二、服务接口调用就是固定写法：

1、生成option：

       let options = {};

        options.url = this.queryUrl; //'http://.......';

        options.layerId = layerid;

        options.geoSRS = 'EPSG:4326';

        options.outSRS = 'EPSG:4326';

        options.geometry = JSON.stringify(geometry);      查询的坐标需要由对象转化为JSON字符串

        //options.where = this.chooseValue;

2、查询

        let query = new L.kqmap.services.InfoQuery(options)；

        （1）query.queryAsync(good_func, error_func);

        （2）query.queryAsync((res) =>{},(err) => {});

三、config.xml

什么是 XML？

• XML 指可扩展标记语言（EXtensible Markup Language）。
• XML 是一种很像HTML的标记语言。
• XML 的设计宗旨是传输数据，而不是显示数据。
• XML 标签没有被预定义。您需要自行定义标签。
• XML 被设计为具有自我描述性。
• XML 是 W3C 的推荐标准。

<?xml version="1.0" encoding="UTF-8" standalone="no"?><config custom="0">

  <theme name="default-red"/>

  <map level="4" full_extent="13019627.07855688 286175.2521541758 13033051.54807897 290996.7107312403 " id="map" init_extent="13019627.07855688 286175.2521541758 13033051.54807897 290996.7107312403 " min_scale_id="0">

    <scales>

      <scale id="0">0.0000009999999999999999547481</scale>

      <scale id="1">0.0000019999999999999999094962</scale>

      <scale id="2">0.0000039999999999999998189924</scale>

      <scale id="3">0.0000079999999999999996379849</scale>

      <scale id="4">0.0000156250000000000003252607</scale>

      <scale id="5">0.0000312500000000000006505213</scale>

      <scale id="6">0.0000625000000000000013010426</scale>

      <scale id="7">0.0001250000000000000026020852</scale>

      <scale id="8">0.0002500000000000000052041704</scale>

      <scale id="9">0.0005000000000000000104083409</scale>

    </scales>

    <projection>

      <prj>EPSG:3857</prj>

      <proj4>+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs</proj4>

    </projection>

  </map>

</config>

写配置文件的目的是为了程序的灵活性，回头甲方数据有变动的话只需要更改配置文件而不需要改动程序了。

ok，这次写的比较认真，觉得有帮助的朋友点个赞吧