add echarts

PlateAss · Jun 29, 2022 · dfea474 · dfea474
1 parent 1f77028
commit dfea474
Show file tree

Hide file tree

Showing 9 changed files with 441 additions and 4 deletions.
diff --git a/echarts.html b/echarts.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>上海市</title>
+    <script src="echarts.min.js"></script>
+    <script src="jquery-3.6.0.min.js"></script>
+    <style>
+        html,body,#main{
+            padding: 0px;
+            margin: 0px;
+            height: 100%;
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body>
+<div id="main"></div>
+<script type="text/javascript">
+    $.getJSON("上海市.json",function(map){
+ var myChart = echarts.init(document.getElementById('main'));
+ echarts.registerMap("luoyang",map);
+ var option = {
+            series : [ {
+                map : "luoyang",
+                type : "map",
+                aspectScale: 1.0,
+                selectedMode: 'single',//选择类型,
+                hoverable:false,//鼠标经过高亮
+                roam: true,//鼠标滚轮缩放
+                itemStyle: {
+                    normal: {
+                        borderWidth:1,
+                        borderColor:'#0000FF',//区域边框色
+                        areaColor: '#9FDAB9',//区域背景色
+                        label: {
+                            show: true,
+                            textStyle: {
+                                color: '#6495ED',//文字颜色
+                                fontSize:12      //文字大小
+                            }
+                        }
+                    },
+                    emphasis: {                 // 选中样式
+                        borderWidth:1,
+                        borderColor:'#00ffff',
+                        color: '#ffffff',
+                        label: {
+                            show: true,
+                            textStyle: {
+                                color: '#ff0000'
+                            }
+                        }
+                    }
+                }
+            } ]
+        };
+        myChart.setOption(option);
+    });
+</script>
+</body>
+</html>
diff --git a/echarts.min.js b/echarts.min.js
diff --git a/gaode.html b/gaode.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <title>行政区边界查询</title>
+    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> 
+    <style>
+        html,body,#container{
+            margin:0;
+            height:100%;
+        }
+        .input-item-text{
+            width:7rem;
+        }
+    </style>
+</head>
+<body>
+<div id="container"></div>
+<div class="input-card">
+    <label style='color:grey'>行政区边界查询</label>
+    <div class="input-item">
+            <div class="input-item-prepend">
+                <span class="input-item-text" >行政级别</span>
+            </div>
+            <select id="level">
+                <option value="district">district</option>
+                <option value="city">city</option>
+                <option value="province">province</option>
+            </select>
+
+    </div>
+    <div class="input-item">
+            <div class="input-item-prepend">
+                <span class="input-item-text" >名称/adcode</span>
+            </div>
+            <input id='district' type="text" value='朝阳区'>
+
+    </div>
+    <input id="draw" type="button" class="btn" value="查询" />
+</div>
+<script type="text/javascript">
+    window._AMapSecurityConfig = {
+        securityJsCode:'59326afd07c8905505c2df657cc149b1',
+    }
+</script>
+<script type="text/javascript" src="//webapi.amap.com/maps?v=2.0&key=ecaea229684e2977a647af2fb3fddddb&plugin=AMap.DistrictSearch"></script>
+<script type="text/javascript">
+    //初始化地图对象，加载地图
+    var map = new AMap.Map("container", {
+        center: [121.397428, 31.00923],//地图中心点
+        zoom: 10 //地图显示的缩放级别
+    });
+
+    var district = null;
+    var polygons=[];
+    function drawBounds() {
+        //加载行政区划插件
+        if(!district){
+            //实例化DistrictSearch
+            var opts = {
+                subdistrict: 0,   //获取边界不需要返回下级行政区
+                extensions: 'all',  //返回行政区边界坐标组等具体信息
+                level: 'district'  //查询行政级别为 市
+            };
+            district = new AMap.DistrictSearch(opts);
+        }
+        //行政区查询
+        district.setLevel(document.getElementById('level').value)
+        district.search(document.getElementById('district').value, function(status, result) {
+            map.remove(polygons)//清除上次结果
+            polygons = [];
+            var bounds = result.districtList[0].boundaries;
+            if (bounds) {
+                for (var i = 0, l = bounds.length; i < l; i++) {
+                    //生成行政区划polygon
+                    var polygon = new AMap.Polygon({
+                        strokeWeight: 1,
+                        path: bounds[i],
+                        fillOpacity: 0.4,
+                        fillColor: '#80d8ff',
+                        strokeColor: '#0091ea'
+                    });
+                    polygons.push(polygon);
+                }
+            }
+            map.add(polygons)
+            map.setFitView(polygons);//视口自适应
+        });
+    }
+    drawBounds();
+    document.getElementById('draw').onclick = drawBounds;
+    document.getElementById('district').onkeydown = function(e) {
+        if (e.keyCode === 13) {
+            drawBounds();
+            return false;
+        }
+        return true;
+    };
+</script>
+</body>
+</html>