openlayers基础思想

openlayers基础思想

  var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    title: "天地图矢量图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=3bc6874f2b919aa581635abab7759a3f",
                        wrapX: false
                    })
                }),
                new ol.layer.Tile({
                    title: "天地图矢量图层注记",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=3bc6874f2b919aa581635abab7759a3f",
                        attributions: "天地图的属性描述",
                        wrapX: false
                    }),
                    preload: Infinity
                })
            ],
            //地图容器div的ID
            target: 'mapCon',
            view: new ol.View({
                //地图初始中心点
                center: [12000000, 4000000],
                minZoom: 2,
                zoom: 3
            })
        });

对代码进行深层次的理解，我们可以发现openlayers中对于图层的创造就是对对象的赋予和创建

<script>
	import { songDetail , songUrl , songLyric , songSimi , songComment } from '../../common/api.js';
	import '../../common/iconfont.css'
	export default {
		data() {
			return {
				songDetail : {
					al : { picUrl : '' }
				},
				songSimi : [],
				songComment : [],
				songLyric : [],
				lyricIndex : 0,
				playicon : 'iconpause',
				isplayrotate : true
			}
		},

对比vue代码

view: new ol.View({
                //地图初始中心点
                center: [12000000, 4000000],
                minZoom: 2,
                zoom: 3
            })

上面代码就是在赋予view一个属性，这个属性要是一个对象，只不过我们是现场创建了一个对象，我们也可以在后面给他一个对象的名字。

new ol.Map({
        layers: [
            new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        }),
        target: 'map1'
    });

这个代码中将layer.Title和source结合在了一起

要注意这个对象灵活创建的思想