完整範例程式碼
[info] 小提示：
程式碼連結：我是連結
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="pilotgaea-mapclient.js"></script>
</head>
<body>
<div id="MyControl" style="position: absolute; z-index: 1;">
<button id="measure-length">MeasureLength</button>
<button id="measure-area">MeasureArea</button>
<button id="clear">Clear</button>
<button id="change-color-by-distance">ChangeColorByDistance</button>
<button id="snap">Snap</button>
<button id="goto-taiwan">GotoTaiwan</button>
</div>
<div id="MyMap" style="width: 50%; height: 100%; position: absolute; top: 0; left: 0;"></div>
<div id="MyMap2" style="width: 50%; height: 100%; position: absolute; top: 0; left: 50%;"></div>
<script type="text/javascript">
var mapView = new CMapView("MyMap", 3857);
var mapDoc = new CMapDocument(3857);
var m = CMatrixSet.MakeByEPSG(3857);
var proxy = "https://mapserver.pilotgaea.com.tw/Oview.aspx?";
var host = "http://127.0.0.1:8080";
var Patterns = [];
var im = null;
Patterns[0] = "https://wmts.nlsc.gov.tw/wmts/EMAP/default/GoogleMapsCompatible/{TileZ}/{TileR}/{TileC}"
var im = mapDoc.NewTileMapLayerByMatrixSet("EMAP", Patterns, m, -1);
var wmtsUrl = "https://wmts.nlsc.gov.tw/wmts/CITY/default/GoogleMapsCompatible/{TileZ}/{TileR}/{TileC}";
var Patterns = [wmtsUrl];
var im = mapDoc.NewTileMapLayerByMatrixSet( "NLSCCity", Patterns, m, -1, proxy );
var layerName = "範例向量圖層";
var wmsId = mapDoc.NewWMSLayer( "Vector", proxy + host + "/wms?", [layerName], ENUM_IMAGE_FORMAT.PNG );
mapView.Bind(mapDoc, null);
document.querySelector("#measure-length").onclick = function () {
mapView.MeasureProperty.EPSG = 3857;
mapView.MeasureLength();
};
document.querySelector("#measure-area").onclick = function () {
mapView.MeasureProperty.EPSG = 3857;
mapView.MeasureArea();
};
document.querySelector("#clear").onclick = function () {
mapView.MeasureProperty.EPSG = 3857;
mapView.ClearMeasure();
};
var custom = mapDoc.NewVectorLayer("Custom");
var p = new GeoPoint(-2400000.0, 8000000.0);
var id = custom.NewPoint({ Point: p, FillColor: "rgb(0,0,255)", Radius: 5 });
var buffer = [];
buffer.push(new GeoPoint(-1600000.0, 9000000.0));
buffer.push(new GeoPoint(-1100000.0, 9000000.0));
buffer.push(new GeoPoint(-1100000.0, 8500000.0));
buffer.push(new GeoPoint(-1600000.0, 8500000.0));
var id = custom.NewPolygon( new GeoPolygon(buffer), "#FFFFFF", 3, "rgb(255,0,0)" );
var buffer = [];
buffer.push(new GeoPoint(2100000.0, 7000000.0));
buffer.push(new GeoPoint(2400000.0, 7500000.0));
buffer.push(new GeoPoint(1800000.0, 7500000.0));
buffer.push(new GeoPoint(2100000.0, 7000000.0));
var id = custom.NewPolyline(new GeoPolyline(buffer), "#00FF00", 5);
var p = new GeoPoint(-2100000.0, 7000000.0);
var id = custom.NewText(p, "PilotGaea");
function ChangeColor(custom, matchId, color) {
for (var i = 0; i < matchId.length; ++i) {
var param = custom.GetEntityParam(matchId[i]);
switch (param.Type) {
case "POINT":
custom.UpdateEntity(matchId[i], { FillColor: color });
break;
case "POLYLINE":
custom.UpdateEntity(matchId[i], { StrokeColor: color });
break;
case "POLYGON":
custom.UpdateEntity(matchId[i], { FillColor: color });
break;
case "TEXT":
param.TextStyle.FillColor = color;
custom.UpdateEntity(matchId[i], { TextStyle: param.TextStyle });
break;
}
}
}
document.querySelector("#MyMap canvas").onclick = function (evt) {
var p = new GeoPoint(evt.offsetX, evt.offsetY);
mapView.WindowToViewport(p);
var matchId = [];
matchId = custom.SelectEntityAtPoint(p);
ChangeColor(custom, matchId, "#FFFF00");
};
document.querySelector(
"#change-color-by-distance"
).onclick = function () {
var p = new GeoPoint(-2100000.0, 7000000.0);
var matchId = custom.SelectEntityByDistance(p, 2000000);
ChangeColor(custom, matchId, "#00FFFF");
};
var mapView2 = new CMapView("MyMap2", 3857);
var mapDoc2 = new CMapDocument(3857);
var Patterns = [];
Patterns[0] = "http://ecn.t0.tiles.virtualearth.net/tiles/h{QuadKey}?g=3649&n=z";
var im = mapDoc2.NewTileMapLayerByMatrixSet("BING_MAP", Patterns, m, -1);
mapView2.Bind(mapDoc2, null);
var running = false;
document.querySelector("#goto-taiwan").onclick = function () {
var viewport = new window.GeoBoundary({
west: 13227227.891763968,
south: 2370870.218176134,
east: 13712755.895431409,
north: 3017833.2255818667
});
mapView.Viewport = viewport;
};
mapView.AddEventListener("viewportchanged", (evt) => {
if (running) return;
running = true;
mapView2.Viewport = mapView.Viewport;
running = false;
});
mapView2.AddEventListener("viewportchanged", (evt) => {
if (running) return;
running = true;
mapView.Viewport = mapView2.Viewport;
running = false;
});
document.querySelector("#snap").onclick = function () {
var layerName = "Vector";
var pixel = 100;
var type = "node";
var radius = 10;
var fillColor = "rgba(255, 0, 0, 1)";
var strokeColor = "rgba(0, 255, 0, 1)";
mapView.SetSnapPointSetting(
layerName,
pixel,
type,
radius,
fillColor,
strokeColor,
proxy + "http://127.0.0.1:8080"
);
};
mapView.AddEventListener("onservernotify", function (result) {
for (var i = 0; i < result.length; ++i) {
var message = "[" + result[i].time + "]";
message += " ";
message += result[i].message;
alert(message);
}
});
mapView.SetOnServerNotify("127.0.0.1:8080", 30000);
</script>
</body>
</html>