|
|
@@ -0,0 +1,228 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>Openlayers要素服务加载</title>
|
|
|
+ <link rel="stylesheet"
|
|
|
+ href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css">
|
|
|
+ <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
|
|
|
+ <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
|
|
|
+ <script src="../js/Tianditu.js"></script>
|
|
|
+ <style type="text/css">
|
|
|
+ #map {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .selected-panel {
|
|
|
+ position: absolute;
|
|
|
+ right: 0px;
|
|
|
+ width: 230px;
|
|
|
+ height: 65px;
|
|
|
+ background: #ffffff;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="selected-panel">
|
|
|
+ <div style="padding: 20px;">
|
|
|
+ <label for="">选择要素类型：</label>
|
|
|
+ <select name="" id="typeSelect">
|
|
|
+ <option value="点要素">点要素</option>
|
|
|
+ <option value="线要素">线要素</option>
|
|
|
+ <option value="面要素">面要素</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="map" class="map"></div>
|
|
|
+ <script>
|
|
|
+ var layerUrl = {
|
|
|
+ gdLayerUrl: "/gmap/gateway/geostar/GD_2018DLG/wmts",
|
|
|
+ gdAnnoLayerUrl: "/gmap/gateway/geostar/GD_2018DLGZJ/wmts",
|
|
|
+ polygonWfsUrl: "/gmap/gateway/geostar/GZSXJXZQHM_wfs/wfs",//面要素
|
|
|
+ pointWfsUrl: "/gmap/gateway/geostar/GD_SJJYZ/wfs",//点要素
|
|
|
+ lineWfsUrl: "/gmap/gateway/geostar/JTYST_GSGL2019/wfs" //线要素
|
|
|
+ }
|
|
|
+ var projection = new ol.proj.Projection({
|
|
|
+ code: 'EPSG:4490',
|
|
|
+ units: 'degrees'
|
|
|
+ });
|
|
|
+ var projectionExtent = [-180, -90, 180, 90];
|
|
|
+ var size = ol.extent.getWidth(projectionExtent) / 256;
|
|
|
+ var resolutions = [];
|
|
|
+ for (var z = 2; z < 19; ++z) {
|
|
|
+ resolutions[z] = size / Math.pow(2, z);
|
|
|
+ }
|
|
|
+ var vectorSource = new ol.source.Vector();
|
|
|
+ var vectorLayer = new ol.layer.Vector({
|
|
|
+ source: vectorSource
|
|
|
+ });
|
|
|
+
|
|
|
+ var map = new ol.Map({
|
|
|
+ layers: [
|
|
|
+ new ol.layer.Tile({
|
|
|
+ source: getWMTSLayer(layerUrl.gdLayerUrl)
|
|
|
+ }),
|
|
|
+ new ol.layer.Tile({
|
|
|
+ source: getWMTSLayer(layerUrl.gdAnnoLayerUrl)
|
|
|
+ }),
|
|
|
+ vectorLayer
|
|
|
+
|
|
|
+ ],
|
|
|
+ target: "map",
|
|
|
+ view: new ol.View({
|
|
|
+ center: [113.679943564, 22.559617265],
|
|
|
+ projection: projection,
|
|
|
+ zoom: 8,
|
|
|
+ maxZoom: 17,
|
|
|
+ minZoom: 1
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+ function getWMTSLayer(serviceUrl) {
|
|
|
+ var xml = getCapabilities(serviceUrl);
|
|
|
+ var format = new ol.format.WMTSCapabilities();
|
|
|
+ var geojson = format.read(xml.documentElement);
|
|
|
+ var data = geojson.Contents.Layer[0];
|
|
|
+ var layerParam = {
|
|
|
+ layerName: data.Abstract,
|
|
|
+ styleName: data.Style[0].Identifier,
|
|
|
+ tilematrixset: data.TileMatrixSetLink[0].TileMatrixSet,
|
|
|
+ format: data.Format[0]
|
|
|
+ };
|
|
|
+ var source = new ol.source.WMTS({
|
|
|
+ url: serviceUrl,
|
|
|
+ layer: layerParam.layerName,
|
|
|
+ style: layerParam.styleName,
|
|
|
+ matrixSet: layerParam.tilematrixset,
|
|
|
+ format: layerParam.format,
|
|
|
+ wrapX: true,
|
|
|
+ tileGrid: new ol.tilegrid.WMTS({
|
|
|
+ origin: ol.extent.getTopLeft(projectionExtent),
|
|
|
+ resolutions: resolutions,
|
|
|
+ matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
|
|
|
+ })
|
|
|
+ });
|
|
|
+ return source;
|
|
|
+ }
|
|
|
+
|
|
|
+ var fill = new ol.style.Fill({
|
|
|
+ color: 'rgba(255,0,0,0.4)'
|
|
|
+ });
|
|
|
+ var image = new ol.style.Circle({
|
|
|
+ radius: 5,
|
|
|
+ fill: fill,
|
|
|
+ stroke: new ol.style.Stroke({ color: 'red', width: 3 }),
|
|
|
+ });
|
|
|
+ var format = new ol.format.GML2();
|
|
|
+ var pointQueryXml = '<wfs:GetFeature xmlns:wfs="http://www.opengis.net/wfs" service="WFS" version="1.0.0" maxFeatures="999999" ' +
|
|
|
+ 'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
|
|
|
+ 'xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-transaction.xsd">' +
|
|
|
+ '<wfs:Query typeName="广东省际检疫站" userecent="true" /></wfs:GetFeature>';
|
|
|
+ queryWfsLayer(pointQueryXml, layerUrl.pointWfsUrl, function (result) {
|
|
|
+ var features = format.readFeatures(result);
|
|
|
+ vectorSource.addFeatures(features);
|
|
|
+ vectorLayer.setStyle(new ol.style.Style({
|
|
|
+ image: image,
|
|
|
+ }));
|
|
|
+ });
|
|
|
+ //获取地图服务图层信息
|
|
|
+ function getCapabilities(serviceUrl) {
|
|
|
+ var xml;
|
|
|
+ $.ajax({
|
|
|
+ type: "get",
|
|
|
+ url: serviceUrl + "?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities",
|
|
|
+ async: false,
|
|
|
+ success: function (result) {
|
|
|
+ xml = result;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return xml;
|
|
|
+ }
|
|
|
+
|
|
|
+ $(document).on("change", "#typeSelect", function () {
|
|
|
+ var wfsType = $("#typeSelect").val();
|
|
|
+ if (wfsType == "点要素") {
|
|
|
+ queryWfsLayer(pointQueryXml, layerUrl.pointWfsUrl, function (result) {
|
|
|
+ var features = format.readFeatures(result);
|
|
|
+ vectorSource.addFeatures(features);
|
|
|
+ vectorLayer.setStyle(new ol.style.Style({
|
|
|
+ image: image,
|
|
|
+ }));
|
|
|
+ });
|
|
|
+ } else if (wfsType == "线要素") {
|
|
|
+ // var featureRequest = new ol.format.WFS().writeGetFeature({
|
|
|
+ // srsName: 'EPSG:4490',
|
|
|
+ // featureTypes: ['JTYST_GSGL2019'],
|
|
|
+ // filter: ol.format.filter.like('XZQH', '4401*')
|
|
|
+ // });
|
|
|
+ var polylineQueryXml = '<wfs:GetFeature xmlns:wfs="http://www.opengis.net/wfs" service="WFS" version="1.0.0" maxFeatures="999999" ' +
|
|
|
+ 'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-transaction.xsd">' +
|
|
|
+ '<wfs:Query typeName="JTYST_GSGL2019" srsName="EPSG:4490">' +
|
|
|
+ '<Filter xmlns="http://www.opengis.net/ogc">' +
|
|
|
+ '<PropertyIsLike wildCard="*" singleChar="." escapeChar="!">' +
|
|
|
+ '<PropertyName>XZQH</PropertyName>' +
|
|
|
+ '<Literal>4401*</Literal>' +
|
|
|
+ '</PropertyIsLike>' +
|
|
|
+ '</Filter>' +
|
|
|
+ '</wfs:Query>' +
|
|
|
+ '</wfs:GetFeature>';
|
|
|
+ queryWfsLayer(polylineQueryXml, layerUrl.lineWfsUrl, function (result) {
|
|
|
+ var features = format.readFeatures(result);
|
|
|
+ vectorSource.addFeatures(features);
|
|
|
+ vectorLayer.setStyle(
|
|
|
+ new ol.style.Style({
|
|
|
+ stroke: new ol.style.Stroke({
|
|
|
+ color: 'red',
|
|
|
+ width: 4,
|
|
|
+ }),
|
|
|
+ })
|
|
|
+ );
|
|
|
+ });
|
|
|
+ } else if (wfsType == "面要素") {
|
|
|
+ var polygonQueryXml = '<wfs:GetFeature xmlns:wfs="http://www.opengis.net/wfs" service="WFS" version="1.0.0" maxFeatures="999999" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-transaction.xsd">' +
|
|
|
+ '<wfs:Query typeName="GZSXJXZQHM" srsName="EPSG:4490">' +
|
|
|
+ '<Filter xmlns="http://www.opengis.net/ogc">' +
|
|
|
+ '<PropertyIsLike wildCard="*" singleChar="." escapeChar="!">' +
|
|
|
+ '<PropertyName>XZQDM</PropertyName>' +
|
|
|
+ '<Literal>4401*</Literal>' +
|
|
|
+ '</PropertyIsLike>' +
|
|
|
+ '</Filter>' +
|
|
|
+ '</wfs:Query>' +
|
|
|
+ '</wfs:GetFeature>';
|
|
|
+ queryWfsLayer(polygonQueryXml, layerUrl.polygonWfsUrl, function (result) {
|
|
|
+ var features = format.readFeatures(result);
|
|
|
+ vectorSource.addFeatures(features);
|
|
|
+ vectorLayer.setStyle(new ol.style.Style({
|
|
|
+ stroke: new ol.style.Stroke({
|
|
|
+ color: 'blue',
|
|
|
+ width: 2,
|
|
|
+ }),
|
|
|
+ fill: fill,
|
|
|
+ }));
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ function queryWfsLayer(queryXml, serviceUrl, callback) {
|
|
|
+ $.ajax({
|
|
|
+ type: "post",
|
|
|
+ url: serviceUrl,
|
|
|
+ //data: new XMLSerializer().serializeToString(featureRequest),
|
|
|
+ data: queryXml,
|
|
|
+ async: false,
|
|
|
+ success: function (result) {
|
|
|
+ callback(result);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
wuweihao
