地圖圈住

時間 2019-11-12

標籤地圖圈住简体版

原文原文鏈接

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>獲取地區輪廓線</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">
</script>
<style type="text/css">
body{font-size:13px;margin:10px}
#container{width:800px;height:500px;border:1px solid gray}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");javascript

var cityName = "太原市";
//function initMap(map, cityName) {
    var point = new BMap.Point(112.987402, 28.201509);    // 建立點座標 112.987402, 28.201509
    map.centerAndZoom(point, 8);                     // 初始化地圖,設置中心點座標和地圖級別。
    map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
    map.addControl(new BMap.OverviewMapControl());              //添加縮略地圖控件
    map.setCenter(cityName);     // 設置地圖顯示的城市此項是必須設置的
    map.enableScrollWheelZoom();
    map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_LARGE ,anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(40, 250)}));
    var bdary = new BMap.Boundary();
    bdary.get(cityName, function (rs) {       //獲取行政區域
        map.clearOverlays();        //清除地圖覆蓋物 css

        //添加遮罩層
        //思路：利用行政區劃點的集合與外圍自定義東南西北造成一個環形遮罩層
        //1.獲取選中行政區劃邊框點的集合 rs.boundaries[0]
        var strs = new Array();
        strs = rs.boundaries[0].split(";");
        var EN = "";    //行政區劃東北段點的集合
        var NW = ""; //行政區劃西北段點的集合
        var WS = ""; //行政區劃西南段點的集合
        var SE = ""; //行政區劃東南段點的集合
        var pt_e = strs[0]; //行政區劃最東邊點的經緯度
        var pt_n = strs[0]; //行政區劃最北邊點的經緯度
        var pt_w = strs[0]; //行政區劃最西邊點的經緯度
        var pt_s = strs[0]; //行政區劃最南邊點的經緯度
        var n1 = ""; //行政區劃最東邊點在點集合中的索引位置
        var n2 = ""; //行政區劃最北邊點在點集合中的索引位置
        var n3 = ""; //行政區劃最西邊點在點集合中的索引位置
        var n4 = ""; //行政區劃最南邊點在點集合中的索引位置html

        //2.循環行政區劃邊框點集合找出最東南西北四個點的經緯度以及索引位置
        for (var n = 0; n < strs.length; n++) {
            var pt_e_f = parseFloat(pt_e.split(",")[0]);
            var pt_n_f = parseFloat(pt_n.split(",")[1]);
            var pt_w_f = parseFloat(pt_w.split(",")[0]);
            var pt_s_f = parseFloat(pt_s.split(",")[1]);java

            var sPt = new Array();
            try {
                sPt = strs[n].split(",");
                var spt_j = parseFloat(sPt[0]);
                var spt_w = parseFloat(sPt[1]);
                if (pt_e_f < spt_j) {   //東
                    pt_e = strs[n];
                    pt_e_f = spt_j;
                    n1 = n;
                }
                if (pt_n_f < spt_w) { //北
                    pt_n_f = spt_w;
                    pt_n = strs[n];
                    n2 = n;
                }api

                if (pt_w_f > spt_j) {   //西
                    pt_w_f = spt_j;
                    pt_w = strs[n];
                    n3 = n;
                }
                if (pt_s_f > spt_w) {   //南
                    pt_s_f = spt_w;
                    pt_s = strs[n];
                    n4 = n;
                }
            }
            catch (err) {
                alert(err);
            }
        }
        //3.得出東北、西北、西南、東南四段行政區劃的邊框點的集合
        if (n1 < n2) {     //第一種狀況最東邊點在索引前面
            for (var o = n1; o <= n2; o++) {
                EN += strs[o] + ";"
            }
            for (var o = n2; o <= n3; o++) {
                NW += strs[o] + ";"
            }
            for (var o = n3; o <= n4; o++) {
                WS += strs[o] + ";"
            }
            for (var o = n4; o < strs.length; o++) {
                SE += strs[o] + ";"
            }
            for (var o = 0; o <= n1; o++) {
                SE += strs[o] + ";"
            }
        }
        else {   //第二種狀況最東邊點在索引後面
            for (var o = n1; o < strs.length; o++) {
                EN += strs[o] + ";"
            }
            for (var o = 0; o <= n2; o++) {
                EN += strs[o] + ";"
            }
            for (var o = n2; o <= n3; o++) {
                NW += strs[o] + ";"
            }
            for (var o = n3; o <= n4; o++) {
                WS += strs[o] + ";"
            }
            for (var o = n4; o <= n1; o++) {
                SE += strs[o] + ";"
            }
        }
        //4.自定義外圍邊框點的集合
        var E_JW = "170.672126, 39.623555;";            //東
        var EN_JW = "170.672126, 81.291804;";       //東北角
        var N_JW = "105.913641, 81.291804;";        //北
        var NW_JW = "-169.604276, 81.291804;";     //西北角
        var W_JW = "-169.604276, 38.244136;";       //西
        var WS_JW = "-169.604276, -68.045308;";     //西南角
        var S_JW = "114.15563, -68.045308;";            //南
        var SE_JW = "170.672126, -68.045308 ;";         //東南角
        //4.添加環形遮罩層
        var ply1 = new BMap.Polygon(EN + NW + WS + SE + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + EN_JW + E_JW, { strokeColor: "none", fillColor: "rgb(246,246,246)", strokeOpacity: 0 }); //創建多邊形覆蓋物
        map.addOverlay(ply1); //遮罩物是半透明的，若是須要純色能夠多添加幾層

        var ply1 = new BMap.Polygon(EN + NW + WS + SE + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + EN_JW + E_JW, { strokeColor: "none", fillColor: "rgb(246,246,246)", strokeOpacity: 0 }); //創建多邊形覆蓋物
        map.addOverlay(ply1); //遮罩物是半透明的，若是須要純色能夠多添加幾層

        var ply1 = new BMap.Polygon(EN + NW + WS + SE + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + EN_JW + E_JW, { strokeColor: "none", fillColor: "rgb(246,246,246)", strokeOpacity: 0 }); //創建多邊形覆蓋物
        map.addOverlay(ply1); //遮罩物是半透明的，若是須要純色能夠多添加幾層

        //5. 給目標行政區劃添加邊框，其實就是給目標行政區劃添加一個沒有填充物的遮罩層
        var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#ff0000",fillColor: "" });
        map.addOverlay(ply);
        map.setViewport(ply.getPath());    //調整視野
        loadCityMapInfo(map);
    });ui

// return map;
//}
</script>xml

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。