<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="WebControl_DNet.index" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>WebGis二次開發包實例</title> <style> .ol-zoom .ol-zoom-out { margin-top: 204px; } .ol-zoomslider { background-color: transparent; top: 2.3em; } .ol-touch .ol-zoom .ol-zoom-out { margin-top: 212px; } .ol-touch .ol-zoomslider { top: 2.75em; } .ol-zoom-in.ol-has-tooltip:hover [role=tooltip], .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] { top: 3px; } .ol-zoom-out.ol-has-tooltip:hover [role=tooltip], .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] { top: 232px; } </style> <!--引入jquery框架--> <script type="text/javascript" src="js/jquery-easyui-1.4.2/jquery.min.js"></script> <!--引入easyui前端開發包--> <script type="text/javascript" src="js/jquery-easyui-1.4.2/jquery.easyui.min.js"></script> <script type='text/javascript' src='js/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js'></script> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.2/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.2/themes/icon.css"> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.2/themes/color.css"> <!--引入Openlayers地理信息系統開發包--> <script type="text/javascript" src="js/Openlayers3.16.0/ol.js"></script> <link rel="stylesheet" type="text/css" href="js/Openlayers3.16.0/ol.css"> <!--引入地圖列表擴展包--> <script type="text/javascript" src="js/Openlayers3.16.0/plugins/maplist.js"></script> <!--引入測量控件擴展包--> <script type="text/javascript" src="js/Openlayers3.16.0/plugins/measure.js"></script> <link rel="stylesheet" type="text/css" href="js/Openlayers3.16.0/plugins/measure.css"> <!--引入點對象包--> <script type="text/javascript" src="js/Openlayers3.16.0/plugins/pointobject.js"></script> <!--引入popup提示樣式--> <link rel="stylesheet" type="text/css" href="js/Openlayers3.16.0/plugins/popup.css"> <!--引入折線對象包--> <script type="text/javascript" src="js/Openlayers3.16.0/plugins/lineobject.js"></script> <!--引入貝塞爾曲線包--> <script type="text/javascript" src="js/Openlayers3.16.0/plugins/beziercurve.js"></script> <!--引入箭頭線包--> <script type="text/javascript" src="js/Openlayers3.16.0/plugins/arrowline.js"></script> <!--引入多邊形包--> <script type="text/javascript" src="js/Openlayers3.16.0/plugins/polygonobject.js"></script> <!--引入位置變換或拖動包--> <script type="text/javascript" src="js/Openlayers3.16.0/plugins/drag.js"></script> <script> /******************定義地圖全局變量***************/ var map; //定義地圖對象 var proj = 'EPSG:4326'; //定義wgs84地圖坐標系 var proj_m = 'EPSG:3857'; //定義墨卡托地圖坐標系 var mapLayer, mapLayerlabel; //定義圖層對象 var source_measure, vector_measure; //定義全局測量控件源和層 var source_point, vector_point; //定義全局點對象源和層 var popup; //定義全局變量popup var source_zx, vector_zx; //定義全局折線對象源和層 var l; //定義一根全局折線 var source_bezier, vector_bezier; //定義全局貝塞爾曲線對象源和層 var source_arrow, vector_arrow; //定義全局箭頭線對象源和層 var source_polygon, vector_polygon; //定義全局多邊形對象源和層 var source_circle, vector_circle; //定義全局多邊形對象源和層 var source_region, vector_region; //定義全局多邊形對象源和層 var source_draw, vector_draw; //定義全局鼠標繪制對象源和層 var mapDragInteraction; //定義拖動交互功能 /******************地圖初始化函數***************/ function initMap() { mapDragInteraction = new app.Drag(); //初始化map對象 map = new ol.Map({ target: 'map', projection: proj, interactions: ol.interaction.defaults().extend([mapDragInteraction]), view: new ol.View({ center: ol.proj.transform([101.46912, 36.24274], proj, proj_m), zoom: 5 }) }); //初始化地圖圖層 mapLayer = new ol.layer.Tile({ source: source_google, projection: proj }); //初始化標簽圖層 mapLayerlabel = new ol.layer.Tile({ source: null, projection: proj }); //將圖層加載到地圖對象 map.addLayer(mapLayer); map.addLayer(mapLayerlabel); //導航控件 map.addControl(new ol.control.ZoomSlider()); //鼠標位置控件 map.addControl(new ol.control.MousePosition({ projection: proj, coordinateFormat: function (coordinate) { var zoom = map.getView().getZoom(); return '地圖級別:' + zoom + ", " + ol.coordinate.format(coordinate, '經度:{x}°, 緯度: {y}°', 10); } })); //比例尺控件 map.addControl(new ol.control.ScaleLine()); //全屏顯示控件 map.addControl(new ol.control.FullScreen()); //鷹眼圖控件 map.addControl(new ol.control.OverviewMap({ tipLabel: "鷹眼圖" })); /*******************在地圖初始化函數中初始化測量控件層************************/ source_measure = new ol.source.Vector(); vector_measure = new ol.layer.Vector({ source: source_measure, style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 0, 0, 0.1)' }), stroke: new ol.style.Stroke({ color: '#ff8080', width: 2 }) }) }); map.addLayer(vector_measure); /*******************在地圖初始化函數中初始化點對象標注層************************/ source_point = new ol.source.Vector(); vector_point = new ol.layer.Vector({ source: source_point }); map.addLayer(vector_point); /*******************在地圖初始化函數中初始化折線對象標注層************************/ source_zx = new ol.source.Vector(); vector_zx = new ol.layer.Vector({ source: source_zx }); map.addLayer(vector_zx); /*******************在地圖初始化函數中初始化貝塞爾曲線標注層************************/ source_bezier = new ol.source.Vector(); vector_bezier = new ol.layer.Vector({ source: source_bezier }); map.addLayer(vector_bezier); /*******************在地圖初始化函數中初始化箭頭線標注層************************/ source_arrow = new ol.source.Vector(); vector_arrow = new ol.layer.Vector({ source: source_arrow }); map.addLayer(vector_arrow); /*******************在地圖初始化函數中初始化多邊形面標注層************************/ source_polygon = new ol.source.Vector(); vector_polygon = new ol.layer.Vector({ source: source_polygon }); map.addLayer(vector_polygon); /*******************在地圖初始化函數中初始化圓標注層************************/ source_circle = new ol.source.Vector(); vector_circle = new ol.layer.Vector({ source: source_circle }); map.addLayer(vector_circle); /*******************在地圖初始化函數中初始化多邊形面標注層************************/ source_region = new ol.source.Vector(); vector_region = new ol.layer.Vector({ source: source_region }); map.addLayer(vector_region); /*******************在地圖初始化函數中初始化鼠標繪制標注層************************/ source_draw = new ol.source.Vector(); vector_draw = new ol.layer.Vector({ source: source_draw }); map.addLayer(vector_draw); /************************在地圖初始化時添加popup標記******************************/ var container = document.getElementById('popup'); var content = document.getElementById('popup-content'); var closer = document.getElementById('popup-closer'); popup = new ol.Overlay(/** @type {olx.OverlayOptions} */({ element: container, autoPan: true, autoPanAnimation: { duration: 250 }, offset: [0, -32] })); map.addOverlay(popup); //為popup上的close按鈕添加關閉事件 closer.onclick = function () { popup.setPosition(undefined); closer.blur(); return false; } /*******************在圖中監聽pointermove事件************************/ map.on('pointermove', pointerMoveHandler); //在measure.js中實現pointerMoveHandler函數 map.on('pointermove', function (e) { if (e.dragging) { popup.setPosition(undefined); closer.blur(); return; } }); //添加地圖單擊事件 map.on('singleclick', function (evt) { var feature = map.forEachFeatureAtPixel(evt.pixel, function (f) { return f; }); if (feature && feature.get("id") != null && feature.get("lx") == "Point") { popup.setPosition(feature.getGeometry().getCoordinates()); var strHtml = '<div style="width: 420px;height: 260px;">'; strHtml += '<div style="width: 100%;height: 50px;font-family:幼圓;font-size: 24pt;line-height: 50px">' + feature.getStyle().getText().getText() + '</div>'; strHtml += '<div style="width: 100%;height: 150px;"> '; strHtml += '<div style="width: 150px;height: 150px;float: left;"><img src="images/nodata.png" style="width: 100%;height: 100%;" /></div>'; strHtml += '<div style="float: left;width: 230px;height: 110px;padding: 20px;font-size:12pt;">簡述：這是一個點對象的測試示例，你可以根據需要定制出更多的彈出框版式。</div>'; strHtml += '</div>'; var jwd = ol.proj.transform([feature.get("lon"), feature.get("lat")], 'EPSG:3857', 'EPSG:4326'); strHtml += '<div style="width: 100%;height: 60px; padding: 10px;color: gray;font-size: 11pt;font-family:幼圓;line-height: 25px;">'; strHtml += '<div style="float: left;width: 48%;border-bottom: 1px gray dotted;"><div style="float: left;width: 80px;text-align: left">經度：</div><div style="float: right;width: 120px;text-align: right">' + parseInt(jwd[0] * 100000000) / 100000000 + '°</div></div>'; strHtml += '<div style="float: right;width: 48%;border-bottom: 1px gray dotted;"><div style="float: left;width: 80px;text-align: left">緯度：</div><div style="float: right;width: 120px;text-align: right">' + parseInt(jwd[1] * 100000000) / 100000000 + '°</div></div>'; strHtml += '<div style="float: left;width: 48%;border-bottom: 1px gray dotted;"><div style="float: left;width: 80px;text-align: left">地理位置：</div><div style="float: right;width: 120px;text-align: right">測試位置</div></div>'; strHtml += '<div style="float: right;width: 48%;border-bottom: 1px gray dotted;"><div style="float: left;width: 80px;text-align: left">聯系電話：</div><div style="float: right;width: 120px;text-align: right">185********</div></div>'; strHtml += '</div>'; strHtml += '</div>'; content.innerHTML = strHtml; setPointPropertygrid(feature); } else { popup.setPosition(undefined); closer.blur(); } }); } /******************地圖切換方法***************/ function changeBaseMap(sourcelist) { var cnt = sourcelist.length; if (1 == cnt) { mapLayer.setSource(sourcelist[0]); mapLayerlabel.setSource(null); } else if (2 == cnt) { mapLayer.setSource(sourcelist[0]); mapLayerlabel.setSource(sourcelist[1]); } } /******************測量控件切換方法***************/ function startControl(control, self) { if (self.attr("class").indexOf("l-btn-plain-selected") >= 0) { $(".easyui-linkbutton").linkbutton("unselect"); self.linkbutton("select"); removeMeasure(source_measure); if ("line" == control || "area" == control) { addMeasure(control, source_measure); } else if ("rectSelect" == control) { addDrawOnMap("Box"); drawonmap.on('drawend', function (evt) { var extent = evt.feature.getGeometry().getExtent() //得到選中的區域 var leftdownPoint = ol.proj.transform([extent[0], extent[1]], proj_m, proj); var rightupPoint = ol.proj.transform([extent[2], extent[3]], proj_m, proj); alert("左下坐標：" + leftdownPoint + "\n" + "右上坐標：" + rightupPoint); }); } else if ("circleSelect" == control) { addDrawOnMap("Circle"); drawonmap.on('drawend', function (evt) { var center = ol.proj.transform(evt.feature.getGeometry().getCenter(), proj_m, proj); var radius = evt.feature.getGeometry().getRadius(); alert("圓心坐標：" + center + "\n" + "半徑：" + radius); }); } } else { self.linkbutton("unselect"); removeMeasure(source_measure); clearDrawOnMap(); } } /*************************計算兩點間的距離，p1,p2坐標為wgs84坐標******************************/ function getDistance(p1, p2) { var wgs84Sphere = new ol.Sphere(6378137); return wgs84Sphere.haversineDistance(p1, p2); } /******************在地圖上標記一個點對象***************/ //隨機生成當前范圍內的一個經緯度坐標，用於在地圖上標點 function randomPointJWD() { var topleftPoint = map.getCoordinateFromPixel([10, 10]); var centerPoint = map.getView().getCenter(); var bottomrightPoint = [centerPoint[0] + (centerPoint[0] - topleftPoint[0]), centerPoint[1] + (centerPoint[1] - topleftPoint[1])]; var jd = topleftPoint[0] + (bottomrightPoint[0] - topleftPoint[0]) * Math.random(); var wd = bottomrightPoint[1] + (topleftPoint[1] - bottomrightPoint[1]) * Math.random(); return [jd, wd]; } //設置點對象屬性值 function setPointPropertygrid(point) { var d = $('#pg_point').propertygrid("getData"); d.rows[0].value = point.get('id'); d.rows[1].value = point.get('lx'); var p = ol.proj.transform([point.get('lon'), point.get('lat')], proj_m, proj); d.rows[2].value = Math.floor(p[0] * 100000000) / 100000000; d.rows[3].value = Math.floor(p[1] * 100000000) / 100000000; d.rows[4].value = point.getStyle().getImage().getOpacity(); d.rows[5].value = point.getStyle().getImage().getScale(); d.rows[6].value = point.getStyle().getImage().getRotateWithView(); d.rows[7].value = point.getStyle().getImage().getRotation(); d.rows[8].value = point.getStyle().getImage().getSrc(); d.rows[9].value = point.getStyle().getText().getTextAlign(); d.rows[10].value = point.getStyle().getText().getTextBaseline(); d.rows[11].value = point.getStyle().getText().getFont(); d.rows[12].value = point.getStyle().getText().getText(); d.rows[13].value = point.getStyle().getText().getFill().getColor(); for (var i = 0; i < d.total; i++) { $('#pg_point').propertygrid("refreshRow", i); } } //添加一個點 var point_sl = 0; //layer:{ol.source.Vector}:需要添加點對象的圖層 //label:{string}:點對象名稱 //iconname:{string}:點對象的圖標名稱 function addPoint(layer, label, iconname) { var p = randomPointJWD(); var style = createStyle(1, 1, false, 0, "images/imgpoints/" + iconname, 'center', 'bottom', 'bold 12px 幼圓', label + point_sl, '#aa3300'); var p = createPoint("point" + point_sl, "Point", p[0], p[1], style); layer.addFeature(p); setPointPropertygrid(p); point_sl++; } //更新點對象屬性值 //layer:{ol.source.Vector}:需要更新點對象的圖層 function updatePoint(layer) { var d = $('#pg_point').propertygrid("getData"); var f = layer.getFeatureById(d.rows[0].value); //通過id在點圖層上找到相應的Feature對象 var style = createStyle(d.rows[4].value, d.rows[5].value, d.rows[6].value, d.rows[7].value, d.rows[8].value, d.rows[9].value, d.rows[10].value, d.rows[11].value, d.rows[12].value, d.rows[13].value); var jd = parseInt(d.rows[2].value * 100000000) / 100000000; var wd = parseInt(d.rows[3].value * 100000000) / 100000000; var jwd = ol.proj.transform([jd, wd], proj, proj_m); var p = createPoint(f.get("id"), f.get("lx"), jwd[0], jwd[1], style); //根據新的屬性重新構造一個點對象 layer.removeFeature(f); //刪除老的點對象 layer.addFeature(p); //在圖層上添加點對象 } /******************在地圖上標記一個折線對象***************/ var timer_zx; var zx_sl = 1; function startDrawLine() { if (null == l) { var style = createLineStyle("black", 2, 'round', 'round'); l = createLine("zxtest", "zx", [], style); source_zx.addFeature(l); } var coord; timer_zx = window.setInterval(function () { coord = randomPointJWD(); l.getGeometry().appendCoordinate(coord); $("#zx_croodinates").html($("#zx_croodinates").html() + zx_sl++ + "." + ol.proj.transform(coord, proj_m, proj) + "<br>"); }, 1000); } function stopDrawLine() { window.clearInterval(timer_zx); } function clearDrawLine() { stopDrawLine(); source_zx.removeFeature(l); l = null; $("#zx_croodinates").html(""); zx_sl = 1; } /**************************繪制貝塞爾曲線*****************************/ function drawBezierCurve(n) { var arrPoints = []; for (var i = 0; i <= n; i++) { arrPoints.push(randomPointJWD()); } var arrbline = createBezierCurvePoints(n, arrPoints); var style = createLineStyle("#ff0080", 2, 'round', 'round'); var f = createLine("bezier_nj" + Math.random(), "bezier", arrbline, style); source_bezier.addFeature(f); } function clearBezierCurve() { source_bezier.clear(); } /**************************繪制箭頭線*****************************/ var arrow_sl = 0; function drawArrowLine() { var arrarrow = createArrowPoints(map.getCoordinateFromPixel([300 + arrow_sl * 10, 350 + arrow_sl * 10]), map.getCoordinateFromPixel([500 + arrow_sl * 10, 500 + arrow_sl * 10]), map.getCoordinateFromPixel([700 + arrow_sl * 10, 300 + arrow_sl * 10])); var style = createLineStyle("#ff8000", 2, 'round', 'round'); var f = createLine("arrow" + Math.random(), "arrow", arrarrow, style); source_arrow.addFeature(f); arrow_sl++; } function clearArrowLine() { source_arrow.clear(); } /**************************繪制多邊形區域*****************************/ function randomScreenPixel(r) { var centerSceenPixel = map.getPixelFromCoordinate(map.getView().getCenter()); //獲取地圖中心點的屏幕坐標 var screenX = Math.floor(r + (centerSceenPixel[0] * 2 - 2 * r) * Math.random()); var screenY = Math.floor(r + (centerSceenPixel[1] * 2 - 2 * r) * Math.random()); return [screenX, screenY]; } function drawRegularPolygon(n) { var r = 100; //定義正多邊形外接圓的半徑，單位是像素 var centerScreenPolygon = randomScreenPixel(r); //隨機生成多邊形外接圓圓心點像素坐標 var arrPoints = new Array(); //得到正多邊形各個端點的像素坐標 var cpx, cpy; for (var i = 0; i < n; i++) { cpx = Math.floor(r * Math.cos(i * 2 * Math.PI / n)) + centerScreenPolygon[0]; cpy = Math.floor(r * Math.sin(i * 2 * Math.PI / n)) + centerScreenPolygon[1]; arrPoints.push(map.getCoordinateFromPixel([cpx, cpy])); } arrPoints.push(arrPoints[0]); var style = createPolygonStyle("#ff0080", 2, 'rgba(0, 255, 0, 0.2)'); var f = createPolygon("polygon" + Math.random(), "polygon", [arrPoints], style); source_polygon.addFeature(f); } function clearRegularPolygon() { source_polygon.clear(); } /**************************繪制圓形區域*****************************/ function drawCircle() { var center = randomPointJWD(); var style = createPolygonStyle("#000080", 2, 'rgba(0, 0, 255, 0.2)'); var f = createCircle("circle" + Math.random(), "circle", center, parseInt($("#txt_radius").textbox("getText")), style); source_circle.addFeature(f); } function clearCircle() { source_circle.clear(); } /**************************在屏幕中間繪制集結地域*****************************/ var region_sl = 0; function drawRegion() { var p1 = map.getCoordinateFromPixel([500 + region_sl * 10, 300 + region_sl * 10]); var p2 = map.getCoordinateFromPixel([660 + region_sl * 10, 250 + region_sl * 10]); var p3 = map.getCoordinateFromPixel([700 + region_sl * 10, 400 + region_sl * 10]); var style = createPolygonStyle("#800080", 2, 'rgba(200, 0, 255, 0.1)'); var arrPoints = createRegionPoints(p1, p2, p3); var f = createPolygon("region" + Math.random(), "region", [arrPoints], style); source_region.addFeature(f); region_sl++; } function clearRegion() { source_region.clear(); } /**************************用鼠標繪制各種圖形*****************************/ var drawonmap; // global so we can remove it later function addDrawOnMap(type) { //The geometry type. One of 'Point', 'LineString', 'LinearRing', 'Polygon', 'MultiPoint', 'MultiLineString', 'MultiPolygon', 'GeometryCollection', 'Circle'. if (drawonmap) { map.removeInteraction(drawonmap); } if (type !== 'None') { var geometryFunction, maxPoints; if (type === 'Square') { type = 'Circle'; geometryFunction = ol.interaction.Draw.createRegularPolygon(4); } else if (type === 'Box') { type = 'LineString'; maxPoints = 2; geometryFunction = function (coordinates, geometry) { if (!geometry) { geometry = new ol.geom.Polygon(null); } var start = coordinates[0]; var end = coordinates[1]; geometry.setCoordinates([ [start, [start[0], end[1]], end, [end[0], start[1]], start] ]); return geometry; }; } var style = createPolygonStyle("#808080", 2, 'rgba(200, 0, 255, 0.1)'); drawonmap = new ol.interaction.Draw({ source: source_draw, style: style, type: /** @type {ol.geom.GeometryType} */(type), geometryFunction: geometryFunction, maxPoints: maxPoints }); map.addInteraction(drawonmap); } } function clearDrawOnMap() { source_draw.clear(); addDrawOnMap("None"); } /*****************************開啟或關閉圖上feature的拖動函數*******************************/ function dragChange(flag) { if (flag) { map.addInteraction(mapDragInteraction); } else { map.removeInteraction(mapDragInteraction); } } </script> </head> <body onload="initMap()" class="easyui-layout" style="margin: 0;padding: 0;"> <div data-options="region:'north'" style="height:100px;overflow: hidden;background-image: url('images/bg_title.png');"> <img src="images/toptitle.png" style="width:1050px;height: 80px;margin-top: 10px;margin-left: 30px;" /> </div> <div data-options="region:'center'" class="easyui-layout" style="border: none" > <div data-options="region:'north'" style="height:35px;overflow: hidden;background-color: lightyellow"> <div style="float:left;padding-top:3px;padding-left: 10px;border:none;font-size: 10pt;"> <a id="btn_cljl" href="javascript:startControl('line',$('#btn_cljl'))" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-cj',toggle:true">測量距離</a> <a id="btn_clmj" href="javascript:startControl('area',$('#btn_clmj'))" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-cmj',toggle:true">測量面積</a>| <a id="btn_jxxz" href="javascript:startControl('rectSelect',$('#btn_jxxz'))" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-jxxz',toggle:true">矩形選擇</a> <a id="btn_yxxz" href="javascript:startControl('circleSelect',$('#btn_yxxz'))" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-yxxz',toggle:true">圓形選擇</a>| <input id="chk_point_drag" name="chk_point_drag" type="checkbox" checked="true" onchange="dragChange(this.checked)">可拖動 | <a href="#" class="easyui-menubutton" data-options="plain:true,iconCls:'icon-dzdt',menu:'#menu_maplist'">在線地圖</a> <a href="#" class="easyui-menubutton" data-options="plain:true,iconCls:'icon-wxdt',menu:'#menu_maplist_offline'">離線地圖</a> <a id="export-png" href="#" download="map.png" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-print'">地圖導出</a>| <a href="javascript:closeWindow();" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-no'">關閉</a> </div> <div id="div_measureoutput" style="float:right;padding-right: 10px;border:none ;font-size: 12pt;line-height: 35px;text-align: right;width: 230px;height: 35px;"></div> </div> <div data-options="region:'center'" class="easyui-layout"> <div data-options="region:'west',collapsible:true" title="標圖面板" style="width:270px;overflow: hidden;"> <div class="easyui-accordion" style="width:100%;height:100%;"> <div title="點對象" data-options="iconCls:'icon-addpoint'" style="padding:10px;"> <div style="height:35px;width: 100%; "> <a class="easyui-menubutton c8" data-options="menu:'#menu_pointlist',iconCls:'icon-addpoint'">新增點對象</a> <a class="easyui-linkbutton" href="javascript:updatePoint(source_point, 'pg_point')" data-options="iconCls:'icon-reload'">刷新當前點</a> </div> <div style="width:100%;"> <table id="pg_point" class="easyui-propertygrid" data-options=" data: {'total':14,'rows':[ {'name':'ID','value':'','group':'圖形'}, {'name':'類型','value':'Point','group':'圖形'}, {'name':'經度','value':'','group':'圖形','editor':{type:'numberbox',options:{precision:8}}}, {'name':'緯度','value':'','group':'圖形','editor':{type:'numberbox',options:{precision:8}}}, {'name':'透明度','value':'1','group':'圖形','editor':{type:'numberbox',options:{precision:2}}}, {'name':'縮放比例','value':'1','group':'圖形','editor':{type:'numberbox',options:{precision:2}}}, {'name':'跟隨地圖旋轉','value':'false','group':'圖形','editor':{type:'combobox',options:{valueField:'id',textField:'text',editable:false,panelHeight:'auto',data:[{'id':'true','text':'true'},{'id':'false','text':'false'}]}}}, {'name':'旋轉角度','value':'0','group':'圖形','editor':{type:'numberbox',options:{precision:2}}}, {'name':'圖片地址','value':'','group':'圖形','editor':'text'}, {'name':'水平位置','value':'left','group':'文字','editor':{type:'combobox',options:{valueField:'id',textField:'text',editable:false,panelHeight:'auto',data:[{'id':'left','text':'left'},{'id':'right','text':'right'},{'id':'center','text':'center'},{'id':'end','text':'end'},{'id':'start','text':'start'}]}}}, {'name':'垂直位置','value':'bottom','group':'文字','editor':{type:'combobox',options:{valueField:'id',textField:'text',editable:false,panelHeight:'auto',data:[{'id':'bottom','text':'bottom'},{'id':'top','text':'top'},{'id':'middle','text':'middle'},{'id':'alphabetic','text':'alphabetic'},{'id':'hanging','text':'hanging'},{'id':'ideographic','text':'ideographic'}]}}}, {'name':'字體','value':'bold 12px 幼圓','group':'文字','editor':'text'}, {'name':'內容','value':'','group':'文字','editor':'text'}, {'name':'顏色','value':'#ff0000','group':'文字','editor':'text'} ]}, method: 'get', showGroup: true, scrollbarSize: 0, showHeader:false, columns: [[ {field:'name',title:'MyName',sortable:false}, {field:'value',title:'MyValue',width:170,resizable:false,formatter:function(value){ var s='<div>'; s += '<div style=\'float:right;width:18px;height:18px;background:'+value+'\'> </div>'; s += value; s += '<div style=\'clear:both\'</div>'; s += '</div>'; return s; } } ]] "> </table> </div> </div> <div title="折線" data-options="iconCls:'icon-line_zx'" style="padding:10px;"> <div style="height:30px;width: 100%;font-family: 幼圓;font-size: 12pt;text-align: center"> 畫連續折線 </div> <div style="height:30px; width:100%;text-align: center"> <a class="easyui-linkbutton" href="javascript:startDrawLine()" data-options="iconCls:'icon-playstart'">開始</a> <a class="easyui-linkbutton" href="javascript:stopDrawLine()" data-options="iconCls:'icon-playstop'">停止</a> <a class="easyui-linkbutton" href="javascript:clearDrawLine()" data-options="iconCls:'icon-playrefresh'">清除</a> </div> <div id="zx_croodinates" style="height:80%;width: 100%;font-family: 幼圓;font-size: 12pt;text-align: center"> </div> </div> <div title="貝塞爾曲線" data-options="iconCls:'icon-line_bezier'" style="padding:10px;"> <div style="height: 30px; width:100%;text-align: center"> <a id="bsl1" class="easyui-linkbutton" href="javascript:drawBezierCurve(2)">隨機畫二階曲線</a> </div> <div style="height: 140px; width:100%;text-align: center"> <img src="images/bezier/2jbezier.gif" /><br> B(t)=(1-t)<sup>2</sup>P<sub>0</sub>+2t(1-t)P<sub>1</sub>+t<sup>2</sup>P<sub>2</sub>,t∈[0,1] </div> <div style="height: 30px; width:100%;text-align: center"> <a id="bsl2" class="easyui-linkbutton" href="javascript:drawBezierCurve(3)">隨機畫三階曲線</a> </div> <div style="height: 150px; width:100%;text-align: center"> <img src="images/bezier/3jbezier.gif"/><br> B(t)=(1-t)<sup>3</sup>P<sub>0</sub>+3t(1-t)<sup>2</sup>P<sub>1</sub>+3t<sup>2</sup>(1-t)P<sub>2</sub>+t<sup>3</sup>P<sub>3</sub>,t∈[0,1] </div> <div style="height: 30px; width:100%;text-align: center"> <a class="easyui-linkbutton" href="javascript:clearBezierCurve()" data-options="iconCls:'icon-playrefresh'">清除</a> </div> <div style="height: 150px; width:100%;text-align: center"> <img src="images/bezier/njform.png" style="width:250px;height:181px"/><br> </div> </div> <div title="在屏幕中央畫一個矢量箭頭" data-options="iconCls:'icon-line_arrow'" style="padding:10px;text-align: center"> <div style="height: 30px; width:100%;text-align: center"> <a class="easyui-linkbutton" href="javascript:drawArrowLine()">畫箭頭線</a> <a class="easyui-linkbutton" href="javascript:clearArrowLine()" data-options="iconCls:'icon-playrefresh'">清除</a> </div> <div style="height: 150px; width:100%;text-align: center"> <img src="images/arrow/arrow.png" style="width:250px;height:181px"/><br> </div> </div> <div title="多邊形" data-options="iconCls:'icon-line_zx'" style="padding:10px;"> <div style="height:30px;width: 100%;font-family: 幼圓;font-size: 12pt;text-align: center"> 隨機生成點畫多邊形 </div> <div style="height:30px; width:100%;text-align: center"> <select id="cc_polygon" class="easyui-combobox" data-options="valueField:'id',textField:'text',editable:false,panelHeight:'auto',data:[{'id':3,'text':'三邊形','selected':true},{'id':4,'text':'四邊形'},{'id':5,'text':'五邊形'},{'id':6,'text':'六邊形'},{'id':7,'text':'七邊形'},{'id':8,'text':'八邊形'},{'id':9,'text':'九邊形'},{'id':10,'text':'十邊形'}]" style="width:70px;"></select> <a class="easyui-linkbutton" href="javascript:drawRegularPolygon($('#cc_polygon').combobox('getValue'))" data-options="iconCls:'icon-playstart'">隨機畫一個</a> <a class="easyui-linkbutton" href="javascript:clearRegularPolygon()" data-options="iconCls:'icon-playrefresh'">清除</a> </div> </div> <div title="圓" data-options="iconCls:'icon-line_qyx'" style="padding:10px;"> <div style="height:30px;width: 100%;font-family: 幼圓;font-size: 12pt;text-align: center"> 隨機畫一個圓 </div> <div style="height:30px;width: 100%;font-family: 幼圓;font-size: 12pt;text-align: center"> 半徑：<input id="txt_radius" class="easyui-textbox" style="width:100px"> </div> <div style="height: 30px; width:100%;text-align: center"> <a class="easyui-linkbutton" href="javascript:drawCircle()" data-options="iconCls:'icon-playstart'">畫一個圓</a> <a class="easyui-linkbutton" href="javascript:clearCircle()" data-options="iconCls:'icon-playrefresh'">清除</a> </div> </div> <div title="在屏幕中央畫一個集結地域" data-options="iconCls:'icon-line_qyx'" style="padding:10px;"> <div style="height: 30px; width:100%;text-align: center"> <a class="easyui-linkbutton" href="javascript:drawRegion()" data-options="iconCls:'icon-playstart'">畫集結地域</a> <a class="easyui-linkbutton" href="javascript:clearRegion()" data-options="iconCls:'icon-playrefresh'">清除</a> </div> <div style="height: 150px; width:100%;text-align: center"> <img src="images/region/region.png" style="width:250px;height:181px"/><br> </div> </div> <div title="用鼠標繪制圖形" data-options="iconCls:'icon-line_qyx'" style="padding:10px;"> <div style="height: 30px; width:100%;text-align: center"> <a class="easyui-linkbutton" href="javascript:addDrawOnMap('Point')">畫點</a> <a class="easyui-linkbutton" href="javascript:addDrawOnMap('LineString')">畫折線</a> <a class="easyui-linkbutton" href="javascript:addDrawOnMap('Polygon')">畫多邊形</a> <a class="easyui-linkbutton" href="javascript:addDrawOnMap('Circle')">畫圓形</a> <a class="easyui-linkbutton" href="javascript:addDrawOnMap('Square')">畫正方形</a> <a class="easyui-linkbutton" href="javascript:addDrawOnMap('Box')">畫矩形</a> <a class="easyui-linkbutton" href="javascript:clearDrawOnMap()" data-options="iconCls:'icon-playrefresh'">清除</a> </div> </div> </div> </div> <div data-options="region:'center'"> <div style= "overflow: hidden;width:100%;height: 100%;" id="map"> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <div id="popup-content"></div> </div> </div> </div> </div> </div> <div id="menu_pointlist" style="width:150px;"> <div data-options="iconCls:'icon-point_jc'" onclick="addPoint(source_point, '機場', 'jc.png')">機場</div> <div data-options="iconCls:'icon-point_gk'" onclick="addPoint(source_point, '港口', 'gk.png')">港口</div> <div data-options="iconCls:'icon-point_ck'" onclick="addPoint(source_point, '倉庫', 'ck.png')">倉庫</div> <div data-options="iconCls:'icon-point_yz'" onclick="addPoint(source_point, '加油站', 'yz.png')">加油站</div> <div class="menu-sep"></div> <div data-options="iconCls:'icon-point_zlsc'" onclick="addPoint(source_point, '自來水廠', 'zlsc.png')">自來水廠</div> <div data-options="iconCls:'icon-point_qy'" onclick="addPoint(source_point, '企業', 'qy.png')">企業</div> <div data-options="iconCls:'icon-point_cl'" onclick="addPoint(source_point, '車輛', 'cl.png')">車輛</div> <div class="menu-sep"></div> <div data-options="iconCls:'icon-point_bg'" onclick="addPoint(source_point, '賓館', 'bg.png')">賓館</div> <div data-options="iconCls:'icon-point_cy'" onclick="addPoint(source_point, '餐飲', 'cy.png')">餐飲</div> <div data-options="iconCls:'icon-point_tcc'" onclick="addPoint(source_point, '高速收費站', 'tcc.png')">高速收費站</div> <div data-options="iconCls:'icon-point_jyz'" onclick="addPoint(source_point, '加油站', 'jyz.png')">加油站</div> <div data-options="iconCls:'icon-point_jtd'" onclick="addPoint(source_point, '交通燈', 'jtd.png')">交通燈</div> <div data-options="iconCls:'icon-point_yh'" onclick="addPoint(source_point, '銀行', 'yh.png')">銀行</div> <div data-options="iconCls:'icon-point_yy'" onclick="addPoint(source_point, '醫院', 'yy.png')">醫院</div> <div data-options="iconCls:'icon-point_poi'" onclick="addPoint(source_point, '興趣點', 'poi.png')">興趣點</div> </div> <div id="menu_maplist" style="width:150px;"> <div onclick="changeBaseMap([source_google])">Google電子地圖</div> <div onclick="changeBaseMap([source_googledx])">Google地形圖</div> <div onclick="changeBaseMap([source_googlesat])">Google衛星地圖</div> <div class="menu-sep"></div> <div onclick="changeBaseMap([source_qq])">騰訊soso電子地圖</div> <div onclick="changeBaseMap([source_qqdx, source_qqdxlabel])">騰訊soso地形圖</div> <div onclick="changeBaseMap([source_qqsat, source_qqsatlabel])">騰訊soso衛星地圖</div> <div class="menu-sep"></div> <div onclick="changeBaseMap([source_baidu])">百度電子地圖</div> <div onclick="changeBaseMap([source_baidusat, source_baidusatlabel])">百度衛星地圖</div> <div class="menu-sep"></div> <div onclick="changeBaseMap([source_gaode])">高德電子地圖</div> <div onclick="changeBaseMap([source_gaodesat, source_gaodesatlabel])">高德衛星地圖</div> <div class="menu-sep"></div> <div onclick="changeBaseMap([source_tiandi, source_tiandilabel])">天地電子地圖</div> <div onclick="changeBaseMap([source_tiandisat, source_tiandilabel])">天地衛星地圖</div> </div> <div id="menu_maplist_offline" style="width:150px;"> <div onclick="changeBaseMap([source_arcgis_offline])">arcgis瓦片電子地圖</div> <div onclick="changeBaseMap([source_arcgissat_offline])">arcgis瓦片衛星地圖</div> <div class="menu-sep"></div> <div onclick="changeBaseMap([source_sqlite_offline])">Sqlite數據庫電子地圖</div> <div onclick="changeBaseMap([source_sqlitesat_offline])">Sqlite數據庫衛星地圖 </div> </div> <div id="win_tip" class="easyui-window" title="提示" style="width:700px;height:400px;overflow: hidden" data-options="iconCls:'icon-info',modal:true,collapsible:false,minimizable:false,maximizable:false,resizable:false,closed:true"> <div style="width: 100%;height: 30px;text-align: center;line-height: 30px;color: red;font-size: 12pt">當前瀏覽器可能不支持地圖的導出功能，各類瀏覽器支持情況請看下圖所示。</div> <img src="images/browser.jpg" style="width:100%;height: 330px" /> </div> </body> </html>
