supermap+openlayers初体验-vue

初次接触GIS开发，初体验记录一下～有不对的地方欢迎指正

1、引入 OpenLayers 和 SuperMap iClient for OpenLayers

npm install @supermap/iclient-ol
npm install ol

2、创建一张地图

<template>
	<div id="map" class="map">
</template>
<script>
import Map from "ol/Map";
import View from "ol/View";
import { Vector as VectorLayer } from "ol/layer";
import { defaults as defaultControls } from "ol/control";
import { Tile as TileLayer } from "ol/layer";
import { WMTS } from "ol/source";
export default {
	data(){
		return {
			map: null
		};
	},
	mounted() {
	// 初始化地图
	this.map = new Map({
			// 挂载元素ID
            target: "map",
            // 控件
            controls: defaultControls({
                attributionOptions: { collapsed: false },
                // 缩放控件，其他的可以查看官网
                zoom: false
           }),
            view: new View({
                center: this.center,
                projection: "EPSG:4326",
            })
        });
    // 添加切片
    let layer = new TileLayer({
    	// 这里如果是其他类型的服务，引入对应的资源并替换即可
   		source: new WMTS({
        	url: '图层切片服务地址',
        	wrapX: true
    	}),
    	// 设置投影，除了字符串也支持自定义投影，通过new Projection
    	projection: 'EPSG:4326'
	});
	// 添加图层
	this.map.addLayer(layer);
}
</script>

更多用法可以查看超图官网示例