iClient for Leaflet之椭圆的简易绘制方法

版权声明:本文为博主原创文章,欢迎转载,SuperMap技术问答社区 http://ask.supermap.com https://blog.csdn.net/supermapsupport/article/details/79783838

作者:Lily

背景

       SuperMap iClient for JavaScript 9D客户端产品:Leaflet,OpenLayaers,MapboxGL,Classic。想必大家都有所了解,可能对于熟悉8c产品的同学来说,还是习惯用Classic,对于其他三款产品不是特别熟悉,但是有的时候项目需求又需要使用leaflet的功能,有些功能范例里面没有,就比较头疼,比如前两天就有人问如何用leaflet画椭圆,针对这个问题,leaflet并没有原生的绘制椭圆接口,所以绘制起来还是比较麻烦,下面我给大家介绍一种简易的绘制方法。

绘制方法

1.下载椭圆绘制插件
https://download.csdn.net/download/supermapsupport/10321709

2.调用leaflet接口
由于插件中需要用到leaflet的相关接口,所以必须先引用leaflet.js,插件才可以使用

<script type="text/javascript" src="https://cdn.bootcss.com/leaflet/1.0.3/leaflet.js">

3.引入插件

<script src="./l.ellipse.js"></script>

4.调用iclient for leaflet接口
要对接supermap iserver服务,还需要引用超图客户端产品包中带的iclient9-leaflet.js

 <script type="text/javascript" src="http://iclient.supermap.io/dist/iclient9-leaflet.js"></script>

5.添加地图
由于动态标绘只是渲染矢量数据,所以不能作为底图,我们需要在map上添加一个 TiledDynamicRESTLayer做为底图

    var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
        var map, resultLayer,
            baseUrl = host + "/iserver/services/map-world/rest/maps/World",
            url = host + "/iserver/services/data-world/rest/data";
        map = L.map('map', {
            preferCanvas: true,
            crs: L.CRS.EPSG4326,
            center: { lon: 0, lat: 0 },
            maxZoom: 18,
            zoom: 2
        });
        L.supermap.tiledMapLayer(baseUrl).addTo(map);

6.调用绘制方法,并将结果绘制到地图上

//latlng:椭圆的位置;经纬度坐标
//radii:长半轴,短半轴;二维数组
//tilt:倾斜角度;度
//options:其他一些属性,如fill,startAngle,endAngle
L.ellipse(latlng, radii, tilt, options).addTo(map);

7.绘制结果
这里写图片描述
上图示例代码如下:
链接:https://pan.baidu.com/s/1ZtIVhfEbPAW1WzDoaO6AeQ 密码:eqi7

阅读更多

扫码向博主提问

SuperMap技术控

非学,无以致疑;非问,无以广识
去开通我的Chat快问
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页