mapboxgl测量功能优化-爱代码爱编程

2023-02-18 分类: javascript html 前端 mapbox

概述

MapboxGL里面虽然有测量的功能，但是不太好用，本文通过改写代码，实现了测量长度，面积功能并支持编辑，单点删除，测量结果实时更新。

效果

在这里插入图片描述

实现代码

1.功能引入

        // 测量距离
        measureDistance() {
            // ID可以自定义
            const layerId = String(new Date().getTime())
            if (!meatureTool) {
                meatureTool = new MeatureTool(this.sdMap)
            }
            meatureTool.measureDistance(layerId)
            // 防止函数冲突
            meatureTool.setDistance()
        },
        // 测量面积
        measureArea() {
        	// ID可以自定义
            const layerId = String(new Date().getTime())
            if (!meatureTool) {
                meatureTool = new MeatureTool(this.sdMap)
            }
            meatureTool.measureArea(layerId)
            // 防止函数冲突
            meatureTool.setArea()
        },
        // 清除测量结果
        clearAll() {
            if (meatureTool) {
                meatureTool.clearMeasureAll()
            }
        },

2.measureTool.js

import mapboxgl from '@/third/maplibre-gl/maplibre-gl.js'
import MapboxDraw from '@mapbox/mapbox-gl-draw'
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
import * as turf from '@turf/turf'
import '@/assets/css/measureIcon.css'
export default class MeatureTool {
    map = void 0
    sdMap = void 0
    constructor(sdMap) {
        this.sdMap = sdMap
        this.map = sdMap.map
    }

    layerDistanceList = []
    layerAreaList = []
    setDistance = () => {}
    setArea = () => {}

    /**
     * 测量距离
     * @param {*} layerId
     */
    measureDistance(layerId) {
        this.layerDistanceList.push(layerId)
        var isMeasure = true
        const map = this.map
        map.doubleClickZoom.disable()

        const jsonPoint = {
            type: 'FeatureCollection',
            features: [],
        }
        const jsonLine = {
            type: 'FeatureCollection',
            features: [],
        }

        const ele = document.createElement('div')
        ele.setAttribute('class', 'measure-move')
        const option = {
            element: ele,
            anchor: 'left',
            offset: [8, 0],
        }
        const tooltip = new mapboxgl.Marker(option).setLngLat([0, 0]).addTo(map)

        map.addSource('points' + layerId, {
            type: 'geojson',
            data: jsonPoint,
        })
        map.addSource('point-move' + layerId, {
            type: 'geojson',
            data: jsonPoint,
        })
        map.addSource('line' + layerId, {
            type: 'geojson',
            data: jsonLine,
        })
        map.addSource('line-move' + layerId, {
            type: 'geojson',
            data: jsonLine,
        })
        map.addLayer({
            id: 'line' + layerId,
            type: 'line',
            source: 'line' + layerId,
            paint: {
                'line-color': '#ff0000',
                'line-width': 2,
                'line-opacity': 0.65,
            },
        })
        map.addLayer({
            id: 'line-move' + layerId,
            type: 'line',
            source: 'line-move' + layerId,
            paint: {
                'line-color': '#ff0000',
                'line-width': 2,
                'line-opacity': 0.65,
                'line-dasharray': [5, 2],
            },
        })
        map.addLayer({
            id: 'points' + layerId,
            type: 'circle',
            source: 'points' + layerId,
            paint: {
                'circle-color': '#ffffff',
                'circle-radius': 3,
                'circle-stroke-width': 2,
                'circle-stroke-color': '#ff0000',
            },
        })
        map.addLayer({
            id: 'point-move' + layerId,
            type: 'circle',
            source: 'point-move' + layerId,
            paint: {
                'circle-color': '#ffffff',
                'circle-radius': 3,
                'circle-stroke-width': 2,
                'circle-stroke-color': '#ff0000',
            },
        })
        
		this.setArea = () => {
            isMeasure = false
            const json = {
                type: 'FeatureCollection',
                features: [],
            }
            map.getSource('point-move' + layerId).setData(json)
            map.getSource('line-move' + layerId).setData(json)
            return isMeasure
        }

        /**
         * 添加点
         * @param {*} _e
         */
        function addPointforJSON(_e) {
            if (isMeasure) {
                const point = {
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: [_e.lngLat.lng, _e.lngLat.lat],
                    },
                    properties: {
                        id: String(new Date().getTime()),
                    },
                }
                jsonPoint.features.push(point)
                map.getSource('points' + layerId).setData(jsonPoint)
                drawLine(jsonPoint)
                addMeasureRes(jsonPoint)
            }
        }

        /**
         * 绘制线
         * @param {*} jsonPoint 点集
         */
        function drawLine(jsonPoint) {
            if (jsonPoint.features.length > 1) {
                jsonLine.features = []
                for (let i = 0; i < jsonPoint.features.length - 1; i++) {
                    const coords = jsonPoint.features[i].geometry.coordinates
                    const next_coords = jsonPoint.features[i + 1].geometry.coordinates
                    jsonLine.features.push({
                        type: 'Feature',
                        geometry: {
                            type: 'LineString',
                            coordinates: [coords, next_coords],
                        },
                    })
                }
                map.getSource('line' + layerId).setData(jsonLine)
            }
        }

        /**
         * 添加dom
         * @param {*} jsonPoint 点集
         */
        function addMeasureRes(jsonPoint) {
            if (jsonPoint.features.length > 0) {
                removedom()
                const pointList = []
                for (let i = 0; i < jsonPoint.features.length; i++) {
                    const coords = jsonPoint.features[i].geometry.coordinates
                    pointList.push(coords)

                    const close = document.createElement('div')
                    close.setAttribute('class', `measure-result ${layerId} close`)
                    close.onclick = (__e) => {
                        __e.stopPropagation()
                        removePoint(coords)
                    }

                    const clear = document.createElement('div')
                    clear.setAttribute('class', `measure-result ${layerId} clear`)
                    clear.onclick = (__e) => {
                        __e.stopPropagation()
                        removeLayer()
                    }

                    const edit = document.createElement('div')
                    edit.setAttribute('class', `measure-result ${layerId} edit`)
                    edit.onclick = (__e) => {
                        // __e.stopPropagation()
                        // editFeature()
                        editFeature(jsonPoint, jsonLine)
                    }

                    const element = document.createElement('div')
                    element.setAttribute('class', 'measure-result ' + layerId)
                    const option = {
                        element: element,
                        anchor: 'left',
                        offset: [8, 0],
                    }
                    element.innerHTML = i === 0 ? '起点' : getLength(pointList)
                    if ((jsonPoint.features.length === i + 1) & !isMeasure) {
                        element.appendChild(edit)
                        element.appendChild(clear)
                    }
                    element.appendChild(close)
                    new mapboxgl.Marker(option).setLngLat(coords).addTo(map)
                }
            }
        }

        /**
         * 移除点
         * @param {*} coords 点坐标
         */
        function removePoint(coords) {
            if (jsonPoint.features.length > 0) {
                if (jsonPoint.features.length === 2) {
                    jsonPoint.features = []
                    jsonLine.features = []
                    map.getSource('points' + layerId).setData(jsonPoint)
                    map.getSource('line' + layerId).setData(jsonLine)
                    removedom()
                } else {
                    for (let i = 0; i < jsonPoint.features.length; i++) {
                        if (
                            (jsonPoint.features[i].geometry.coordinates[0] === coords[0]) &
                            (jsonPoint.features[i].geometry.coordinates[1] === coords[1])
                        ) {
                            jsonPoint.features.splice(i, 1)
                        }
                    }
                    drawLine(jsonPoint)
                    addMeasureRes(jsonPoint)
                    map.getSource('points' + layerId).setData(jsonPoint)
                }
            }
        }

        function editFeature(jsonPoint, jsonLine) {
            var feature = {
                id: '111',
                type: 'Feature',
                properties: {},
                geometry: { type: 'Point', coordinates: [0, 0] },
            }
            const draw = new MapboxDraw({
                displayControlsDefault: false,
                defaultMode: 'draw_polygon',
            })
            map.addControl(draw)
            draw.add(jsonPoint)
            draw.add(jsonLine)
        }

        /**
         * 计算长度
         * @param {*} pointList
         * @returns
         */
        function getLength(pointList) {
            const line = turf.lineString(pointList)
            let len = turf.length(line)
            if (len < 1) {
                len = Math.round(len * 1000) + '米'
            } else {
                len = len.toFixed(2) + '公里'
            }
            return len
        }

        /**
         * 移除dom
         */
        function removedom() {
            const dom = document.getElementsByClassName('measure-result ' + layerId)
            const len = dom.length
            if (len) {
                for (let i = len - 1; i >= 0; i--) {
                    if (dom[i]) dom[i].remove()
                }
            }
        }

        /**
         * 移除图层
         */
        function removeLayer() {
            jsonPoint.features = []
            jsonLine.features = []
            map.getSource('points' + layerId).setData(jsonPoint)
            map.getSource('line' + layerId).setData(jsonLine)
            removedom()
        }

        /**
         * 鼠标move事件
         * @param {} _e
         */
        function mouseMove(_e) {
            if (isMeasure) {
                map.getCanvas().style.cursor = 'default'
                var coords = [_e.lngLat.lng, _e.lngLat.lat]
                const jsonp = {
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: coords,
                    },
                }
                map.getSource('point-move' + layerId).setData(jsonp)

                if (jsonPoint.features.length > 0) {
                    const pointList = []
                    for (let i = 0; i < jsonPoint.features.length; i++) {
                        const coord = jsonPoint.features[i].geometry.coordinates
                        pointList.push(coord)
                    }
                    pointList.push(coords)
                    const prev = jsonPoint.features[jsonPoint.features.length - 1]
                    const jsonl = {
                        type: 'Feature',
                        geometry: {
                            type: 'LineString',
                            coordinates: [prev.geometry.coordinates, coords],
                        },
                    }
                    map.getSource('line-move' + layerId).setData(jsonl)
                    ele.innerHTML = getLength(pointList)
                    tooltip.setLngLat(coords)
                }
            }
        }

        /**
         * 绘制完成
         * @param {*} _e
         */
        function finish(_e) {
            if (isMeasure) {
                isMeasure = false
                var coords = [_e.lngLat.lng, _e.lngLat.lat]
                removePoint(coords)
                const json = {
                    type: 'FeatureCollection',
                    features: [],
                }
                map.getSource('point-move' + layerId).setData(json)
                map.getSource('line-move' + layerId).setData(json)
                // editFeature(jsonPoint)
                map.getCanvas().style.cursor = 'default'
                tooltip.remove()
            }
        }

        map.on('click', function (_e) {
            addPointforJSON(_e)
        })

        map.on('mousemove', function (_e) {
            mouseMove(_e)
        })

        map.on('dblclick', function (_e) {
            finish(_e)
        })
    }

    /**
     * 测量面积
     * @param {*} layerId
     */
    measureArea(layerId) {
        this.layerAreaList.push(layerId)
        var isMeasure = true
        const map = this.map
        map.doubleClickZoom.disable()

        const jsonPoint = {
            type: 'FeatureCollection',
            features: [],
        }
        const jsonLine = {
            type: 'FeatureCollection',
            features: [],
        }

        const ele = document.createElement('div')
        ele.setAttribute('class', 'measure-move')
        const option = {
            element: ele,
            anchor: 'left',
            offset: [8, 0],
        }
        const tooltip = new mapboxgl.Marker(option).setLngLat([0, 0]).addTo(map)

        map.addSource('points-area' + layerId, {
            type: 'geojson',
            data: jsonPoint,
        })
        map.addSource('point-move' + layerId, {
            type: 'geojson',
            data: jsonPoint,
        })
        map.addSource('line-area' + layerId, {
            type: 'geojson',
            data: jsonLine,
        })
        map.addSource('line-move' + layerId, {
            type: 'geojson',
            data: jsonLine,
        })
        map.addLayer({
            id: 'line-move' + layerId,
            type: 'line',
            source: 'line-move' + layerId,
            paint: {
                'line-color': '#ff0000',
                'line-width': 2,
                'line-opacity': 0.65,
                'line-dasharray': [5, 2],
            },
        })
        map.addLayer({
            id: 'line-area' + layerId,
            type: 'fill',
            source: 'line-area' + layerId,
            paint: {
                'fill-color': '#ff0000',
                'fill-opacity': 0.1,
            },
        })
        map.addLayer({
            id: 'line-area-stroke' + layerId,
            type: 'line',
            source: 'line-area' + layerId,
            paint: {
                'line-color': '#ff0000',
                'line-width': 2,
                'line-opacity': 0.65,
            },
        })
        map.addLayer({
            id: 'points-area' + layerId,
            type: 'circle',
            source: 'points-area' + layerId,
            paint: {
                'circle-color': '#ffffff',
                'circle-radius': 3,
                'circle-stroke-width': 2,
                'circle-stroke-color': '#ff0000',
            },
        })
        map.addLayer({
            id: 'point-move' + layerId,
            type: 'circle',
            source: 'point-move' + layerId,
            paint: {
                'circle-color': '#ffffff',
                'circle-radius': 3,
                'circle-stroke-width': 2,
                'circle-stroke-color': '#ff0000',
            },
        })
        
        this.setDistance = () => {
            isMeasure = false
            const json = {
                type: 'FeatureCollection',
                features: [],
            }
            map.getSource('point-move' + layerId).setData(json)
            map.getSource('line-move' + layerId).setData(json)
            return isMeasure
        }

        /**
         * 添加点
         * @param {*} _e
         */
        function addPointforJSON(_e) {
            if (isMeasure) {
                const point = {
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: [_e.lngLat.lng, _e.lngLat.lat],
                    },
                    properties: {
                        id: String(new Date().getTime()),
                    },
                }
                jsonPoint.features.push(point)
                map.getSource('points-area' + layerId).setData(jsonPoint)
                addMeasureRes(jsonPoint)
            }
        }

        /**
         * 添加dom
         * @param {*} jsonPoint 点集
         */
        function addMeasureRes(jsonPoint) {
            if (jsonPoint.features.length > 0) {
                removedom()
                const pointList = []
                for (let i = 0; i < jsonPoint.features.length; i++) {
                    const coords = jsonPoint.features[i].geometry.coordinates
                    pointList.push(coords)

                    const close = document.createElement('div')
                    close.setAttribute('class', `measure-result ${layerId} close`)
                    close.onclick = (__e) => {
                        __e.stopPropagation()
                        removePoint(coords)
                    }
                    if ((jsonPoint.features.length === i + 1) & !isMeasure) {
                        const clear = document.createElement('div')
                        clear.setAttribute('class', `measure-result ${layerId} clear`)
                        clear.onclick = (__e) => {
                            __e.stopPropagation()
                            removeLayer()
                        }

                        const edit = document.createElement('div')
                        edit.setAttribute('class', `measure-result ${layerId} edit`)
                        edit.onclick = (__e) => {
                            // __e.stopPropagation()
                            // editFeature()
                            editFeature(jsonPoint)
                        }

                        const element = document.createElement('div')
                        element.setAttribute('class', 'measure-result ' + layerId)
                        const option = {
                            element: element,
                            anchor: 'left',
                            offset: [0, 0],
                        }
                        element.innerHTML = getArea(pointList)
                        element.appendChild(edit)
                        element.appendChild(clear)
                        element.appendChild(close)
                        new mapboxgl.Marker(option).setLngLat(coords).addTo(map)
                    } else {
                        const option = {
                            element: close,
                            anchor: 'left',
                            offset: [5, -15],
                        }
                        new mapboxgl.Marker(option).setLngLat(coords).addTo(map)
                    }
                }
            }
        }

        /**
         * 计算面积
         * @param {*} pointList
         * @returns
         */
        function getArea(pointList) {
            pointList.push(pointList[0])
            const polygon = turf.polygon([pointList])
            let area = turf.area(polygon)
            if (area < 1000) {
                area = Math.round(area) + 'm²'
            } else {
                area = (area / 1000000).toFixed(2) + 'km²'
            }
            return area
        }

        /**
         * 移除点
         * @param {*} coords 点坐标
         */
        function removePoint(coords) {
            if (jsonPoint.features.length > 0) {
                if (jsonPoint.features.length === 3) {
                    jsonPoint.features = []
                    jsonLine.features = []
                    map.getSource('points-area' + layerId).setData(jsonPoint)
                    map.getSource('line-area' + layerId).setData(jsonLine)
                    removedom()
                } else {
                    for (let i = 0; i < jsonPoint.features.length; i++) {
                        if (
                            (jsonPoint.features[i].geometry.coordinates[0] === coords[0]) &
                            (jsonPoint.features[i].geometry.coordinates[1] === coords[1])
                        ) {
                            jsonPoint.features.splice(i, 1)
                        }
                    }
                    addMeasureRes(jsonPoint)
                    map.getSource('points-area' + layerId).setData(jsonPoint)

                    const pointList = []
                    for (let i = 0; i < jsonPoint.features.length; i++) {
                        const coord = jsonPoint.features[i].geometry.coordinates
                        pointList.push(coord)
                    }
                    const pts = pointList.concat([pointList[0]])
                    const jsona = {
                        type: 'Feature',
                        geometry: {
                            type: 'Polygon',
                            coordinates: [pts],
                        },
                    }
                    map.getSource('line-area' + layerId).setData(jsona)
                }
            }
        }

        function editFeature(jsonPoint) {
            const pointList = []
            for (let i = 0; i < jsonPoint.features.length; i++) {
                const coord = jsonPoint.features[i].geometry.coordinates
                pointList.push(coord)
            }
            const pts = pointList.concat([pointList[0]])
            const jsona = {
                type: 'Feature',
                geometry: {
                    type: 'Polygon',
                    coordinates: [pts],
                },
            }

            const draw = new MapboxDraw({
                displayControlsDefault: false,
                controls: {
                    polygon: false,
                    trash: false,
                },
                // defaultMode: 'draw_polygon',
            })
            map.addControl(draw)
            draw.add(jsona)
        }

        /**
         * 移除dom
         */
        function removedom() {
            const dom = document.getElementsByClassName('measure-result ' + layerId)
            const len = dom.length
            if (len) {
                for (let i = len - 1; i >= 0; i--) {
                    if (dom[i]) dom[i].remove()
                }
            }
        }

        /**
         * 移除图层
         */
        function removeLayer() {
            jsonPoint.features = []
            jsonLine.features = []
            map.getSource('points-area' + layerId).setData(jsonPoint)
            map.getSource('line-area' + layerId).setData(jsonLine)
            removedom()
        }

        /**
         * 鼠标move事件
         * @param {} _e
         */
        function mouseMove(_e) {
            if (isMeasure) {
                map.getCanvas().style.cursor = 'default'
                const coords = [_e.lngLat.lng, _e.lngLat.lat]
                const jsonp = {
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: coords,
                    },
                }
                map.getSource('point-move' + layerId).setData(jsonp)

                if (jsonPoint.features.length > 0) {
                    if (jsonPoint.features.length === 1) {
                        const prev = jsonPoint.features[jsonPoint.features.length - 1]
                        const jsonl = {
                            type: 'Feature',
                            geometry: {
                                type: 'LineString',
                                coordinates: [prev.geometry.coordinates, coords],
                            },
                        }
                        map.getSource('line-move' + layerId).setData(jsonl)
                    } else {
                        const json = {
                            type: 'FeatureCollection',
                            features: [],
                        }
                        map.getSource('line-move' + layerId).setData(json)

                        const pointList = []
                        for (let i = 0; i < jsonPoint.features.length; i++) {
                            const coord = jsonPoint.features[i].geometry.coordinates
                            pointList.push(coord)
                        }
                        pointList.push(coords)
                        const pts = pointList.concat([pointList[0]])
                        const jsona = {
                            type: 'Feature',
                            geometry: {
                                type: 'Polygon',
                                coordinates: [pts],
                            },
                        }
                        map.getSource('line-area' + layerId).setData(jsona)
                        ele.innerHTML = getArea(pointList)
                        tooltip.setLngLat(coords)
                    }
                }
            }
        }

        /**
         * 绘制完成
         * @param {*} _e
         */
        function finish(_e) {
            if (isMeasure) {
                isMeasure = false
                tooltip.remove()
                const coords = [_e.lngLat.lng, _e.lngLat.lat]
                removePoint(coords)
                const json = {
                    type: 'FeatureCollection',
                    features: [],
                }
                map.getSource('point-move' + layerId).setData(json)
                map.getSource('line-move' + layerId).setData(json)
            }
        }

        map.on('click', function (_e) {
            addPointforJSON(_e)
        })

        map.on('dblclick', function (_e) {
            finish(_e)
        })

        map.on('mousemove', function (_e) {
            mouseMove(_e)
        })
    }

    /**
     * 清除所有测量要素
     */
    clearMeasureAll() {
        const dom = document.getElementsByClassName('measure-result')
        const len = dom.length
        if (len) {
            for (let i = len - 1; i >= 0; i--) {
                if (dom[i]) dom[i].remove()
            }
        }
        if (this.layerDistanceList) {
            for (let i = 0; i < this.layerDistanceList.length; i++) {
                const layerid = this.layerDistanceList[i]
                try {
                    this.map.removeLayer('points' + layerid)
                    this.map.removeLayer('line' + layerid)
                    this.map.removeLayer('point-move' + layerid)
                    this.map.removeLayer('line-move' + layerid)
                } catch (error) {
                    console.log(error)
                }
            }
        }
        this.layerDistanceList = []
        if (this.layerAreaList) {
            for (let i = 0; i < this.layerAreaList.length; i++) {
                const layerid = this.layerAreaList[i]
                try {
                    this.map.removeLayer('points-area' + layerid)
                    this.map.removeLayer('line-area' + layerid)
                    this.map.removeLayer('line-area-stroke' + layerid)
                    this.map.removeLayer('point-move' + layerid)
                    this.map.removeLayer('line-move' + layerid)
                } catch (error) {
                    console.log(error)
                }
            }
        }
        this.layerAreaList = []
        this.map.doubleClickZoom.enable()
    }
}

3.measureIcon.css

.measure-move {
    background-color: white;
    border-radius: 3px;
    height: 16px;
    line-height: 16px;
    padding: 0 3px;
    font-size: 12px;
    box-shadow: 0 0 0 1px #ccc;
    float: right;
    cursor: default;
}

.measure-result {
    background-color: white;
    border-radius: 3px;
    height: 16px;
    line-height: 16px;
    padding: 0 3px;
    font-size: 12px;
    box-shadow: 0 0 0 1px #ccc;
    float: right;
    cursor: default;
}

.close {
    width: 3px;
    height: 14px;
    text-align: center;
    border-radius: 3px;
    padding-top: 0px;
    padding-right: 10px;
    box-shadow: 0 0 0 0px #ccc;
    cursor: pointer;
    background: url(../measureicon/close.png) no-repeat center;
    border: 1px solid rgba(100, 100, 100, 0)
}

.clear {
    width: 3px;
    height: 14px;
    text-align: center;
    border-radius: 3px;
    padding-right: 10px;
    box-shadow: 0 0 0 0px #ccc;
    cursor: pointer;
    float: right;
    background: url(../measureicon/delete.png) no-repeat center;
    border: 1px solid rgba(100, 100, 100, 0)
}

.edit {
    width: 3px;
    height: 14px;
    text-align: center;
    border-radius: 3px;
    padding-right: 10px;
    box-shadow: 0 0 0 0px #ccc;
    cursor: pointer;
    float: right;
    background: url(../measureicon/edit.png) no-repeat center;
    border: 1px solid rgba(100, 100, 100, 0)
}

.close:hover {
    border: 1px solid rgba(52, 98, 152, 1);
}

.clear:hover {
    border: 1px solid rgba(52, 98, 152, 1);
}

.edit:hover {
    border: 1px solid rgba(52, 98, 152, 1);
}

本文链接：https://blog.csdn.net/weixin_42562567/article/details/129099377

分享39个大数据可视化工具（数据分析必备）_demonhunter211的博客-爱代码爱编程_数据可视化工具软件

2017-12-07 分类: web

数据可视化无处不在，而且比以前任何时候都重要。无论是在行政演示中为数据点创建一个可视化进程，还是用可视化概念来细分客户，数据可视化都显得尤为重要。以前的工具的基本不能处理大数据。本文将推荐39个可用于处理大数据的可视化工具（排名不分先后）。其中许多工具是开源的，能够共同使用或嵌入已经设计好的应用程序中使用，例如Java，JSON，SVG，Python，H

39个大数据可视化工具数据研究必备_36大数据的博客-爱代码爱编程

2017-12-07 分类: uncategorized

数据可视化无处不在，而且比以前任何时候都重要。无论是在行政演示中为数据点创建一个可视化进程，还是用可视化概念来细分客户，数据可视化都显得尤为重要。以前的工具的基本不能处理大数据。本文将推荐39个可用于处理大数据的可视化工具（排名不分先后）。其中许多工具是开源的，能够共同使用或嵌入已经设计好的应用程序中使用，例如Java，JSON，SVG，Pyt

39个大数据可视化工具 | 数据研究必备_大数据周刊的博客-爱代码爱编程

2018-01-28 分类: uncategorized

数据可视化无处不在，而且比以前任何时候都重要。无论是在行政演示中为数据点创建一个可视化进程，还是用可视化概念来细分客户，数据可视化都显得尤为重要。以前的工具的基本不能处理大数据。本文将推荐39个可用于处理大数据的可视化工具（排名不分先后）。其中许多工具是开源的，能够共同使用或嵌入已经设计好的应用程序中使用，例如Java，JSO

39个大数据可视化工具_weixin_34306593的博客-爱代码爱编程

2017-07-03 分类: 数据库 python 大数据

39个大数据可视化工具Intetix Foundation（英明泰思基金会）由从事数据科学、非营利组织和公共政策研究的中国学者发起成立，致力于通过数据科学改善人类社会和自然环境。通过联络、动员中美最顶尖的数据科学家和社会科学家，以及分布在全球的志愿者，我们创造性地践行着我们的使命：为美好生活洞见数据价值。原文链接：39 Data Visuali

mapbox词汇表中文文档(查找mapbox相关的术语及其定义)_weixin_33920401的博客-爱代码爱编程

2018-11-07 分类: 游戏移动开发 json

前言 Mapbox词汇表英文文档本文词汇表按照字母顺序排序 A access token (访问令牌) 要使用 Mapbox 的任何工具，API 或 SDK ，您需要一个 Mapbox access token。Mapbox使用access token将 API 资源请求与您的帐户相关联。您可以在 access t

coding and paper letter（二十六）_weixin_34375233的博客-爱代码爱编程

2018-09-26 分类: python 大数据 r语言

2019独角兽企业重金招聘Python工程师标准>>> 资源整理。 1 Coding: 1.开源项目PyModisAtm，使用Python下载Modis大气数据的例程。 PyModisAtm 2.Python库rastercube，用于在Hadoop文件系统（HDFS）上存储大型地理栅格数据集。

数据可视化工具_calorie卡卡的博客-爱代码爱编程

2019-07-03 分类: 数仓 spark 大数据可视化

数据可视化无处不在，而且比以前任何时候都重要。无论是在行政演示中为数据点创建一个可视化进程，还是用可视化概念来细分客户，数据可视化都显得尤为重要。以前的工具的基本不能处理大数据。无论你是需要对数据进行分析并且决定用最好的方式

iOS开发全套资源，从入门到全栈IOS工程师-爱代码爱编程

2020-09-14 标签: ios分类: 移动开发 iOS开发程序员

内容介绍：本内容涵盖框架、组件、测试、Apple Store、SDK、XCode、网站、书籍等。发起者来自vsouza，由jobbole提供中文编译。文章以下内容主要是分享面经和个人的学习建议，内容涉及到很多PDF文档（面试题库、学习笔记、实战文档、脑图等），由于文章有限，需要这些文档的，直接（点击我）免费领取入门 Road Map i

Coding and Paper Letter（八十五）-爱代码爱编程

2020-12-18 分类: 科研学术 awesome

新一期资源整理博客。文章目录 1 Coding:2 Paper: 1 Coding: 1.阿根廷地质协会（AGA）于2020年8月和9月提供的“地理信息学应用于多专题制图”课程的虚拟课程。 AGA Geoinformatica 2020 2.R语言包glmmTMB，基于Template Model Builder拟合广义线性混合效应模

了不起的GIS：GIS相关软件、框架、代码、资源等的合集-爱代码爱编程

2020-12-20 分类: GIS 遥感地理

本文的原文地址是 Awesome GIS，是由 sshuair 同学维护的GIS资源列表。该文件执行 MIT 开源协议，以下是其截至 2020年12月20日的备份和翻译。十分感谢 sshuair 同学整理的资源。 Awesome GIS 是一个地理空间相关资源的集合，包括制图工具、空间分析工具、开发工具、数据、会议和组织、新闻机构、开放课程、一些精美的

MapBox加载不同风格的地图-爱代码爱编程

2021-03-12 分类: mapbox

初始化MapBox地图： var map = new mapboxgl.Map({ container: 'map', zoom: 3, center: [105, 34], //此处更改地图风格 style: 'mapbox://styles

Mapbox加载天地图CGCS2000矢量瓦片地图服务-爱代码爱编程

2021-06-16 分类: css mapbox cgcs2000

1.背景最近在做天地图的项目，要基于MapBox添加CGCS2000矢量切片数据，但是 Mapbox 只支持web 墨卡托（3857）坐标系的数据。Github有专业用户修改了mapbox-gl的相关代码，支持CGCS2000的切片数据加载，并且修改了相关的mapbox-gl的配套代码，详情请见github网址。https://github.com/c