点击查询矢量瓦片提示缺少文件 - SuperMap技术问答社区

对的我就是用这个方法但是提示错误

kissgeiu...

54EXP 2020年05月13日

您那边是模块引入，还是js文件引入，如果是js文件引入的换，建议您参考https://iclient.supermap.io/web/introduction/openlayersDevelop.html我们iclient for openlayer的开发指南

阳俊林

3,357EXP 2020年05月14日

我这边是文件引入是因为文件冲突还是包的问题？

kissgeiu...

54EXP 2020年05月14日

您得给我贴下您那边怎么引入的，这个控制台只是报错map这个方法的回调不存在，我没法判断

阳俊林

3,357EXP 2020年05月14日

这样子引用

kissgeiu...

54EXP 2020年05月14日

https://cdn.bootcss.com/openlayers/4.6.5/ol-debug.js

https://iclient.supermap.io/dist/ol/iclient-ol-es6.min.js

这两个js需要引入，您看下您刷新页面的时候有这个两个js文件引入没有

阳俊林

3,357EXP 2020年05月14日

已经引入了

kissgeiu...

54EXP 2020年05月14日

不用es6的用https://iclient.supermap.io/dist/ol/iclient-ol.min.js

阳俊林

3,357EXP 2020年05月14日

换了您那边的js还是报一样的错

kissgeiu...

54EXP 2020年05月14日

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="https://cdn.bootcss.com/openlayers/4.6.5/ol-debug.js"></script>

    <script src="https://iclient.supermap.io/web/libs/openlayers/plugins/ol-mapbox-style/2.11.2/olms.js"></script>

    <script src="https://iclient.supermap.io/dist/ol/iclient-ol.min.js"></script>

    <style>

        ol {

            list-style: none;

            margin-left: -30px;

        }

        .ol-popup {

            position: absolute;

            background-color: rgba(0, 60, 136, 0.7);

            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));

            padding: 10px;

            border-radius: 5px;

            border: 1px solid #cccccc;

            bottom: 20px;

            left: 10px;

            opacity: 0;

            transition: opacity 100ms ease-in;

            color: white;

            font-size: 15px;

            font-weight: bold;

        }

        #tipsPopup {

            background-color: rgba(0, 60, 136, 0.7);

            color: red;

            display: none;

            padding: 15px;

            color: white;

            font-size: 15px;

            font-weight: bold;

            border-radius: 5px;

            box-shadow: 0px -1px 46px 0px rgba(0, 0, 0, 0.75);

        }

        .editContainer {

            position: absolute;

            right: 15px;

            top: 50px;

            display: block;

            transition: opacity 100ms ease-in;

            border-radius: 5px;

            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));

            box-shadow: 0px 0px 13px 0px rgba(25, 34, 41, 1);

            background: white;

            width: 300px;

        }

        .editContainer>.mainPanelHeader {

            width: 100%;

            padding: 8px 15px;

            background: rgb(0, 131, 203);

            font-size: 17px;

            font-weight: bold;

            color: white;

        }

        .editContainer>.mainPanelHeader>.closeButton {

            float: right;

            padding-left: 80px;

            font-size: 20px;

            cursor: pointer;

        }

        .editContainer>.editPanel {

            width: 100%;

            border: 1px solid grey;

            background: white;

            color: grey;

        }

        .layerType{

           margin-top: 20px;

           font-size: 16px;

           font-weight: bold;

        }

        .borderPanel,

        .fillPanel {

            background: white;

            margin: 10px;

            padding: 8px 12px 3px;

            box-shadow: inset 0px 0px 7px 0px rgba(43, 40, 43, 1);

        }

        .fillPanel {

            padding-right: 20px;

        }

        .borderPanelHeader,

        .fillPanelHeader {

            padding: 8px 0 8px;

            font-size: 15px;

        }

        .irs {

            height: 40px !important;

        }

        .irs-line,

        .irs-line-left,

        .irs-line-mid,

        .irs-line,

        .irs-bar,

        .irs-bar-edge {

            height: 5px !important;

        }

        .irs-min,

        .irs-max,

        .irs-from,

        .irs-to,

        .irs-single {

            font-size: 10px !important;

        }

        .irs-slider {

            top: 27px !important;

            width: 15px !important;

            height: 15px !important;

        }

        .alertContainer {

            width: 100%;

            text-align: center;

            position: absolute;

            top:10px;

        }

        .alertContainer > .alert{

            margin: auto;

            width: 300px;

        }

    </style>

</head>

<body style='margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;'>

    <div id='map' style='margin:0 auto;width: 100%;height: 100%'></div>

    <div id="popup" class="ol-popup">

    <div id="popup-content"></div>

    </div>

    <script>

        var url = (window.isLocal ? window.server : "https://iserver.supermap.io") +

            "/iserver/services/map-mvt-landuse/rest/maps/landuse";

        proj4.defs("EPSG:2362",

            "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=38500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs "

        );

        getResolutions = function (zoom, scale, targetMinZoom, targetMaxZoom) {

            var res = scaleToResolution(scale);

            var minRes = res * Math.pow(2, zoom - targetMinZoom);

            var resolutions = [];

            for (var index = 0; index < targetMaxZoom - targetMinZoom + 1; index++) {

                resolutions.push(minRes / Math.pow(2, index));

            }

            return resolutions;

        }

        scaleToResolution = function (scale) {

            var inchPerMeter = 1 / 0.0254;

            return 1 / (scale * 96 * inchPerMeter);

        };

        var vectorLayer;

        //通过缓存sci文件已知第9级的比例尺是0.00000346726346971252，计算0到16级的分辨率

        var resolutions = getResolutions(9, 0.00000346726346971252, 0, 16);

        var projection = ol.proj.get('EPSG:2362');

        projection.setExtent([32876993.777095847, -10001970.421227315, 52880934.619550481, 10001970.421227315])

        var map = new ol.Map({

            target: 'map',

            view: new ol.View({

                center: [37981118.1854434, 2645345.86991791],

                zoom: 13,

                minZoom: 11,

                maxZoom: 15,

                projection: projection,

                resolutions: resolutions

            })

        });

        var container = document.getElementById('popup');

        var content = document.getElementById('popup-content');

        info = new ol.control.Control({

            element: container

        });

        info.setMap(map);

        map.addControl(info);

        var style = new ol.supermap.MapboxStyles({

            map: map,

            url: url,

            // source: 'landuse',

            resolutions: resolutions

        })

        style.on('styleloaded', function () {

            vectorLayer = new ol.layer.VectorTile({

                //设置避让参数

                declutter: true,

                source: new ol.source.VectorTileSuperMapRest({

                    url: url,

                    projection: projection,

                    tileGrid: new ol.tilegrid.TileGrid({

                        resolutions: resolutions,

                        origin: [32876993.777095847, 10001970.421227315],

                        tileSize: 512

                    }),

                    tileType: 'ScaleXY',

                    format: new ol.format.MVT()

                }),

                style: style.getStyleFunction()

            });

            map.addLayer(vectorLayer);

            map.on('click',e=>{

              var features = map.getFeaturesAtPixel(e.pixel);

              console.log(features)

        })

        })

    </script>

</html>

直接运行

阳俊林

3,357EXP 2020年05月14日

我这边已经弄好了

kissgeiu...

54EXP 2020年05月14日

请登录或者注册后回答这个问题。

1个回答

请登录或者注册后再添加评论。

请 登录 或者 注册 后回答这个问题。

1个回答

请 登录 或者 注册 后再添加评论。

智能推荐

请登录或者注册后回答这个问题。

请登录或者注册后再添加评论。