GIS之Supermap系列03：二维地图页面开发

GIS萬事通

于 2024-01-10 10:36:11 发布

阅读量394

点赞数 6

分类专栏： GIS之supermap系列文章标签：源代码管理

本文链接：https://blog.csdn.net/weixin_55429615/article/details/130515946

版权

GIS之supermap系列专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细描述了如何使用Vue.js和SuperMap库在Web页面中开发包含Leaflet和TiledMapLayer的地图功能，包括图层设置、控制面板和地图事件处理。开发者可以创建交互式地图，如标记、多边形等，并处理鼠标悬停和双击事件。

摘要由CSDN通过智能技术生成

supermap地图页面开发，二维地图部分。

<template>
    <div class="plane-layout">
        <div class="plane-layout-bottom">
            <div class="plane-layout-bottom-left">
            </div>
            <div class="plane-layout-bottom-right">
                <div id="map" style="width: 100%; height: 750px;">
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import * as L from 'leaflet'
import '@supermap/iclient-leaflet/dist/iclient-leaflet.css'
import 'leaflet/dist/leaflet.css'
import '@supermap/iclient-leaflet'
import { reactive,nextTick } from 'vue'


const state = reactive({
    options: [
        { label: '全部' }
    ],
    value1: '全部',
    value2: '',
    value3: '全部',
    value4: '全部',
    tableData: [
    ]
})
const createMap = () => {
    var url4326 = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";

    var map = L.map('map', {
        crs: L.CRS.EPSG4326,
        center: [40.044716,111.489059],
        maxZoom: 18,
        zoom: 4
    });
    // 天地图底图
    var tdtmap = new L.supermap.TiandituTileLayer({
        layerType: 'img',
        key: '1d109683f4d84198e37a38c442d68311'
    }).addTo(map);
    // 图层设置
    var world = new L.supermap.TiledMapLayer(url4326,{noWrap:true});
    var 县域城市 = new L.supermap.TiledMapLayer('http://localhost:8090/iserver/services/map/rest/maps/县域城市0529', {noWrap:true});
    var baseMaps = { "天地图WMTS": tdtmap, "world": world };
    var overlayMaps = { "Cities": 县域城市};
      // 添加控件
    L.control.layers(baseMaps, overlayMaps).addTo(map);
    L.control.scale().addTo(map);
    L.control.minimap().addTo(map);
    L.control.sideBySide().addTo(map);
    
    // L.control.sideBySide(China, ChinaDark).addTo(map);
    new L.supermap.TiledMapLayer(url4326).addTo(map);
    var editableLayers = new L.FeatureGroup();
    map.addLayer(editableLayers);
    var options = {
        position: 'topleft',
        draw: {
            polyline: {},
            polygon: {},
            circle: {},
            rectangle: {},
            marker: {},
            remove: {}
        },
        edit: {
            featureGroup: editableLayers,
            remove: true
        }
    };
    var drawControl = new L.Control.Draw(options);
    map.addControl(drawControl);
    handleMapEvent(drawControl._container, map);
    map.on(L.Draw.Event.CREATED, function (e) {
        var type = e.layerType,
            layer = e.layer;
        if (type === 'marker') {
            layer.bindPopup('A popup!');
        }
        editableLayers.addLayer(layer);
    });

    function handleMapEvent(div, map) {
        if (!div || !map) {
            return;
        }
        div.addEventListener('mouseover', function () {
            map.scrollWheelZoom.disable();
            map.doubleClickZoom.disable();
        });
        div.addEventListener('mouseout', function () {
            map.scrollWheelZoom.enable();
            map.doubleClickZoom.enable();
        });
    }
}
nextTick(() => {
    createMap();
    });
</script>
<style lang="less">

</style>
<style lang="less" scoped>
.plane-layout {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0px;
    &-bottom {
        &-right {
            flex: 1;
            background: url(@/images/border.png) no-repeat;
            background-size: 100% 150%;
            padding: 1px;
        }
    }
    &-table {
        flex: 1;
        overflow: hidden;
    }
}
</style>