做一个属于自己的坐标系的高德地图（GIS）

第一步:创建node环境；

第二步：创建一个html文件

第三步：引入高德的样式和行为依赖

第四步：创建容器让地图挂载在上边

<div id="map">
    </div>

第五步：先把地图渲染出来

 const gaode = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });
        const map = new ol.Map({
            //挂载到map上
            target: "map",
            // 设置图层  一个地图有多个图层
            layers: [
                gaode
            ],

            view: new ol.View({
                // 经纬度
                center: [114.30, 30.50],
                // 放大的级别
                zoom: 12,
                // 坐标
                projection: 'EPSG:4326'
            })

        })

第六步：创建一个属于自己的坐标系的GEOJSON数据

 var data = {
            // 固定写法
            type: "FeatureCollection",
            // 这是一个属性
            features: [
                {
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: [114.30, 30.50]
                    }
                }
            ]
        }

第七步：将自己数据放在数据源中进行使用

var source = new ol.source.Vector({
            features: new ol.format.GeoJSON().readFeatures(data)
        })

第八步：设置图层  我们需要表现出来

var layer = new ol.layer.Vector({
            source
        })

第九步：设置我们JSON数据的一个样式，一定需要样式搞到图层上

let style = new ol.style.Style({
            image: new ol.style.Circle({
                // 单位为deg
                radius: 10,
                // 填充东西
                fill: new ol.style.Fill({
                    color: '#ff2d51'
                }),
                // 描边
                stroke: new ol.style.Stroke(
                    {
                        width: 2,
                        color: "#000"
                    }
                )
            })
        })

        layer.setStyle(style);

第十步：map增加一个图层

map.addLayer(layer)

打开网页既可以看到一个属于自己的小红点