leaflet笔记加载geojson数据在地图上画图行![image.png](https://p6-juejin.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>GeoJson显示示例</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <!--导入leaflet样式引用-->
    <link href="../../libs/leaflet/leaflet.css" rel="Stylesheet" type="text/css" />
    <!--导入leaflet脚本引用-->
    <script src="../../libs/leaflet/leaflet.js" type="text/javascript"></script>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        html, body, #leaf_map {
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/javascript">
        //使用严格模式
        "use strict";
        /**初始化地图显示
        */
        function init() {
            //地图容器
            var map = L.map('leaf_map', {
                //参考坐标系 默认不变
                crs: L.CRS.EPSG3857,
                //不添加属性说控件
                attributionControl: false,
                //显示中心
                center: [30.5217, 114.3948],
                //最小显示等级
                minZoom: 0,
                //最大显示等级
                maxZoom: 18,
                //当前显示等级
                zoom: 18
            });
            //加载天地图矢量图层 默认不变
            var vecLayer = L.tileLayer("http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=55b4d4eaef95384c946e9bd1b99c5610", { noWrap: true }).addTo(map);
            //加载天地图矢量注记图层 默认不变
            var cvaLayer = L.tileLayer("http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=55b4d4eaef95384c946e9bd1b99c5610", { noWrap: true }).addTo(map);

            //创建GeoJSON数据
            var data = [{
                "type": "Feature",
                "properties": { "party": "Republican", "name": "三角形" },
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[
                                     [114.39386, 30.52254],
                                     [114.39344, 30.52178],
                                     [114.39437, 30.52178],
                                     
                    ]]
                }
            },
                         {
                             "type": "Feature",
                             "properties": { "party": "Democrat", "name": "矩形" },
                             "geometry": {
                                 "type": "Polygon",
                                 "coordinates": [[
                                            [114.39466, 30.52254],
                                            [114.3956, 30.52254],
                                            [114.3956, 30.52178],
                                            [114.39466, 30.52178],
                                 ]]
                             }
                         }];
            //添加GeoJSON数据，在地图中显示
            L.geoJSON(data, {
                style: function (feature) {
                    //设置数据的颜色
                    switch (feature.properties.party) {
                        case 'Republican': return { color: "yellow" };//颜色 直接控制图行的内部和外部颜色
                        case 'Democrat': return { color: "#0000ff" };
                    }
                } //设置鼠标悬浮事件 //插入悬浮提示
            }).on('mouseover', function (e) {
                //解析选中数据的类型名
                var type = e.layer.feature.properties.name;
                //在鼠标悬浮位置添加Popup标注
                L.popup().setContent(type)
		   .setLatLng(e.latlng)
		   .openOn(map);
            }).addTo(map);
        }
    </script>
</head>
<body onload="init()">
    <div id="leaf_map">
    </div>
</body>
</html>
leaflet笔记 加载geojson数据 在地图上画图行

leaflet笔记加载geojson数据在地图上画图行
