SuperMap iClient for OpenLayers使用geojson数据裁剪地图

最新推荐文章于 2025-08-07 15:40:47 发布

转载最新推荐文章于 2025-08-07 15:40:47 发布 · 316 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://mp.youkuaiyun.com/mp_blog/creation/editor/144193909

文章标签：

#SuperMap

WebGIS 专栏收录该内容

145 篇文章

订阅专栏

1.初始化地图信息

var map = new ol.Map({
    target: 'map',
    controls: ol.control.defaults({attributionOptions: {collapsed: false}})
        .extend([new ol.supermap.control.Logo()]),
    view: new ol.View({
        center: [113, 33],
        zoom: 8,
        projection: 'EPSG:4326'
    })
});

2.添加底图

var cityNameLayer = new ol.layer.Tile({
    source: new ol.source.TileSuperMapRest({
        url: url,
        wrapX: true
    }),
    projection: 'EPSG:4326'
});
map.addLayer(cityNameLayer);

3.加载geojson数据

var geoLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            //换成你的地址
            url: '../data/河南省.json',
            format: new ol.format.GeoJSON()
        }),
        style: new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: "ff0000", 
            width: 2, 
          }),
        }),
          fill: new ol.style.Fill({
            color: "ff0000", 
          }),
        
    })
    map.addLayer(geoLayer);

4.裁剪图层

裁剪掉超出河南省区域的部分

geoLayer.getSource().on('change')：监听河南省矢量图层数据源的变化，一旦加载完成，就获取其几何数据（河南省的边界）。
cityNameLayer.on('prerender')：在地图渲染之前，获取绘图上下文 (event.context)，然后用 vecCtx 绘制一个多边形（河南省的边界）。vecCtx.setStyle 设置图形透明填充，使得绘制部分不会遮挡地图内容。
ctx.clip()：将当前绘制的区域设置为“裁剪区域”，即只有在这个区域内的地图内容才会被渲染。
cityNameLayer.on('postrender')：渲染完成后恢复绘图状态 (ctx.restore())，确保后续的绘图操作不受影响。

geoLayer.getSource().on('change', function () {
        //获取数据源
        let source = geoLayer.getSource()
        //获取数据源中所有要素
        let features = source.getFeatures()
        //获取某个要素中的几何图形 这里示例中的数据在0下标
        let geometry = features[0].getGeometry()
        //获取几何图形中的坐标点集合
        let coordinates = geometry.getCoordinates()
        //根据坐标点集合创建闭合多边形
        let data = new ol.geom.MultiPolygon(coordinates)
        //监听需要裁剪的图层加载前事件
        cityNameLayer.on('prerender', function (event) {
            //获取上下文
            var ctx = event.context;
            //转为ol的矢量对象
            var vecCtx = ol.render.getVectorContext(event);
			//这里必须在保存状态之前修改为透明色
            vecCtx.setStyle(new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: '#ffffff00'
                    })
                }))
            //这里的ctx已经被更改 save保存更改的ctx
            ctx.save();
            //绘制之前创建的多边形
            vecCtx.drawGeometry(data);
            
            // ctx.stroke();
            //将当前画布的绘制区域设置为剪切区域，只有位于剪切区域内的图形部分会被显示，超出剪切区域的部分将被隐藏
            ctx.clip();
        });
        //监听渲染完成事件postrender
        cityNameLayer.on('postrender', function (event) {
            //获取上下文
            var ctx = event.context;
            //恢复之前保存的绘图状态，否则会卡在这里不能进行任何操作
            ctx.restore();
        });
    })

5.实现效果

6.完整代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title data-i18n="resources.title_tiledMapLayer3857"></title>
  <script type="text/javascript" src="../js/include-web.js"></script>
  <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
</head>

<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
  <div id="map" style="width: 100%; height: 100%"></div>
  <script type="text/javascript">
var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
// 初始化地图信息
var map = new ol.Map({
    target: 'map',
    controls: ol.control.defaults({attributionOptions: {collapsed: false}})
        .extend([new ol.supermap.control.Logo()]),
    view: new ol.View({
        center: [113, 33],
        zoom: 8,
        projection: 'EPSG:4326'
    })
});
// 添加图层
var cityNameLayer = new ol.layer.Tile({
    source: new ol.source.TileSuperMapRest({
        url: url,
        wrapX: true
    }),
    projection: 'EPSG:4326'
});
map.addLayer(cityNameLayer);
var geoLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            //换成你的地址
            url: '../data/河南省.json',
            format: new ol.format.GeoJSON()
        }),
        style: new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: "ff0000", 
            width: 2, 
          }),
        }),
          fill: new ol.style.Fill({
            color: "ff0000", 
          }),
        
    })
    map.addLayer(geoLayer);

    geoLayer.getSource().on('change', function () {
        //获取数据源
        let source = geoLayer.getSource()
        //获取数据源中所有要素
        let features = source.getFeatures()
        //获取某个要素中的几何图形 这里示例中的数据在0下标
        let geometry = features[0].getGeometry()
        //获取几何图形中的坐标点集合
        let coordinates = geometry.getCoordinates()
        //根据坐标点集合创建闭合多边形
        let data = new ol.geom.MultiPolygon(coordinates)
        //监听需要裁剪的图层加载前事件
        cityNameLayer.on('prerender', function (event) {
            //获取上下文
            var ctx = event.context;
            //转为ol的矢量对象
            var vecCtx = ol.render.getVectorContext(event);
			//这里必须在保存状态之前修改为透明色
            vecCtx.setStyle(new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: '#ffffff00'
                    })
                }))
            //这里的ctx已经被更改 save保存更改的ctx
            ctx.save();
            //绘制之前创建的多边形
            vecCtx.drawGeometry(data);
            //将当前画布的绘制区域设置为剪切区域，只有位于剪切区域内的图形部分会被显示，超出剪切区域的部分将被隐藏
            ctx.clip();
        });
        //监听渲染完成事件postrender
        cityNameLayer.on('postrender', function (event) {
            //获取上下文
            var ctx = event.context;
            //恢复之前保存的绘图状态，否则会卡在这里不能进行任何操作
            ctx.restore();
        });
    })

        
  </script>
</body>
</html>