maptalks入门教程--区域块着色

1、安装 npm install maptalks 

2、加载地图

geojson数据采用直接http请求阿里的数据

https://geo.datav.aliyun.com/areas_v3/bound/440000_full.json

import * as maptalks from 'maptalks'
// import gds from '/public/map/440000.json'
import {ApiGetData} from "@/api/APITool";

let $map = null
export default {
    name: "Map",
    mounted() {
        let baseLayer =  new maptalks.TileLayer('base', {
            urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
            subdomains: ["a","b","c","d"],
            attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
        })
        baseLayer = new maptalks.TileLayer('base', {
            'urlTemplate' : 'https://gss{s}.bdstatic.com/8bo_dTSlRsgBo1vgoIiO_jowehsv/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=20170927',
            'subdomains':[0, 1, 2, 3],
            'attribution' :  '&copy; <a target="_blank" href="http://map.baidu.com">Baidu</a>'
        })
        let center = [113.4234,23.0115]
        // center = [105.08052356963802, 36.04231948670001]

        let map = new maptalks.Map('map', {
            center: center,
            zoom: 7,
            baseLayer: baseLayer,
            minZoom:1,
            maxZoom:19,
            spatialReference:{
                projection : 'baidu'
            },
        });

        $map = map

        this.initGeojson()
    },
    methods: {
        async initGeojson(){

            let resJson = await this.getGeoJson()
            //geojson数据
            let data = resJson || {}
            //将获取到的geojosn数据 转换为几何图形后，赋值给collection
            let collection = maptalks.GeoJSON.toGeometry(data)
            console.log(collection);
            //创建一个新的图层将collection 添加到地图
            //创建一个新的图层，名为vector ， 可使用getLayer获取该图层，或使用removeLayer删除该图层
            //将collection 添加到地图实例中
            let vectorLayer = new maptalks.VectorLayer('vector',collection).addTo($map)
            //使用for循环设置颜色（需要在geojson数据中有colour这个属性）

            //渲染全部房间染色
            for (let i = 0; i < collection.length; i++) {
                if (collection[i].GeometryType.name=="Polygon") {
                    //在collection中properties设置cunt属性
                    collection[i].properties.cunt=i;
                    collection[i]._geometries = collection[i]._geometries.slice(0,1)
                    console.log(collection[i].properties.name)
                    console.log(collection[i].properties.colour)
                    console.log(collection[i].properties.cunt)
                    collection[i].setSymbol(
                        getSymbol('rgb(135,196,240)',collection[i].properties.name)
                    )
                    collection[i].on('mouseenter',(e)=>{
                        if(e.target){
                            let symbol = e.target.getSymbol()
                            console.log(symbol)
                            e.target.updateSymbol([  {
                                'polygonFill': '#f00',
                                polygonOpacity: 0.8
                            }]

                            )
                        }

                    })
                        .on('mouseout',(e)=>{
                        e.target.updateSymbol([{
                            'polygonFill' : '#c4137c',
                            polygonOpacity: 1
                        }])
                    })
                    //渲染染色

                    vectorLayer.setStyle(
                        {

                            'filter': ['==', 'cunt', i],
                            'symbol': getSymbol('rgb(135,196,240)',collection[i].properties.name)
                        }
                    );
                }
            }
            //设置线和面的属性（设置颜色,设置文字）
            function getSymbol(colour,name) {
                return [
                    {
                        'lineColor' : '#2acaff',
                        'lineWidth' : 1,
                        'polygonFill' : '#c4137c',
                        'polygonOpacity' : 1,
                        shadowBlur : 1,
                        shadowColor : '#c1d9bc',
                        shadowOffsetX: -2,
                        shadowOffsetY: 1,
                    },
                    {
                        'textName' : name,
                        'textSize' : 14,
                        'textFill' : '#fff',


                    }
                ];
            }

        },
        async getGeoJson(){
            let url = '440000_full.json'
            let param = {

            }
            let res = await ApiGetData(url,param)
            console.log('http: res:')
            console.log(res)

            return res
        }
    }

4、vue容器

<template>
    <div class="map-wrapper">
        <div id="map" class="container"></div>
    </div>

</template>

5、scss样式表

<style lang="scss" scoped>
.map-wrapper {
    border: #42b983 solid 1px;
    background-color: #cec6c6;
    .container {
        width: 800px;
        height: 600px;
        border: #42b983 solid 1px;
    }
}


</style>

 6、结果截屏