openlayers入门学习一

openlayers官方文档：http://iclient.supermap.io/web/introduction/openlayersDevelop.html#top

官方文档对我来说有点乱，看不是很懂，而且上面是以HTML写的，我在做的时候用的是vue写的。

项目的创建就不多说了，我用了最新的vue-cli3.x创建的，具体可见上次文章：https://mp.csdn.net/postedit/102580903

1、使用此方式前请先检查电脑中是否已安装应用程序 Node.js，安装 SuperMap iClient for OpenLayers需要用到，命令：

npm install @supermap/iclient-openlayers

2、引入css，特别是引入，看官方文档看了好久也没懂，怪自己理解太差，请教别人最后还是做出来了，在main.js中添加以下代码，不知道引入路径的，可以去找node_modules--openlayers

import 'openlayers/css/ol.css'
import 'openlayers/dist/ol'
import '@supermap/iclient-openlayers'

3、创建一幅地图，SuperMap iServer发布的地图

App.vue

<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 url = "http://support.supermap.com.cn:8090/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: [0, 0],
            zoom: 2,
            projection: 'EPSG:4326'
        })
    });
    // 添加图层
    var layer = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: url,
            wrapX: true
        }),
        projection: 'EPSG:4326'
    });
    map.addLayer(layer);
    map.addControl(new ol.supermap.control.ScaleLine());

  }
}
</script>

<style>
</style>

运行效果

天地图

<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>

 

leaflet的学习可见：https://blog.csdn.net/dengdengchen/article/details/102585506