openlayers入门学习二——比例尺控件

<template> 
 <div id="map" ref="rootmap">
    </div>
</template>

<script>
import ol from 'openlayers';
export default {
  name: 'app',
  data: function () {
    return {
      count: 0
    }
  },
  components: {
  
  },
  mounted(){
    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: [116.402, 39.905],
            zoom: 5,
            projection: "EPSG:4326"
        }),

        layers: [new ol.layer.Tile({
            source: new ol.source.Tianditu({
                layerType: 'ter',
                key: "1d109683f4d84198e37a38c442d68311",
                projection: "EPSG:4326"
            })
        }), new ol.layer.Tile({
            source: new ol.source.Tianditu({
                layerType: 'ter',
                key: "1d109683f4d84198e37a38c442d68311",
                isLabel: true,
                projection: "EPSG:4326"
            })
        })]
    });
  }
}
</script>

<style>
</style>

1、 这是上次写到的关于天地图的例子，下面为其加比例尺：

  var scaleControl = new ol.control.ScaleLine();
    map.addControl(scaleControl);
    map.addLayer(layer);

  

左下角就会出现比例尺

2、矢量瓦片

使用默认风格的矢量瓦片示例

 mounted(){
    var url = (window.isLocal ? window.server : "http://support.supermap.com.cn:8090")+"/iserver/services/map-china400/rest/maps/China";
    new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
        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: [12957388, 4853991],
                zoom: 11
            })
        });
        var stylesOptions = {
            url: url,
            view: map.getView()
        };
        var vectorTileStyles = new ol.supermap.VectorTileStyles(stylesOptions);
        var vectorTileOptions = ol.source.VectorTileSuperMapRest.optionsFromMapJSON(url, serviceResult.result);
        var vectorLayer = new ol.layer.VectorTile({
            source: new ol.source.VectorTileSuperMapRest(vectorTileOptions),
            style: vectorTileStyles.getFeatureStyle
        });
        map.addLayer(vectorLayer);
        map.on('click', function (e) {
            map.forEachFeatureAtPixel(e.pixel, function (feature) {
                vectorTileStyles.dispatchEvent({type: 'featureSelected',
                    selectedId: feature.getProperties().id,
                    layerName: feature.getProperties().layerName
                });
                return true;
            }, {hitTolerance: 5});
            vectorLayer.changed();
        })

    });
  }