利用するjs Openlayersにwmsサービスをロード

5493 ワード

どのバージョンからか分からないが、openlayersのファイルリファレンスはimportのセットで始まり、本当に簡単に見るのが難しいので、jsファイルを引用して、私はどのように引用しても間違っていて、まるで酔っ払っていて、私もこれを研究していませんが、これはトレンドに違いありません.Es 6には今jqueryもあります.importもその一つですから、これを勉強するのは必至です.あまり言わないで、私のようなシロたちを案内します.私たちは始めます.書類引用:
<link href="https://cdn.bootcss.com/openlayers/4.6.5/ol.css" rel="stylesheet">
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://cdn.bootcss.com/openlayers/4.6.5/ol.js"></script>
   

これは直接引用するファイルで、公式サイトはとても便利で、自分で下に降りて中の変数の具体的なコードを見ることができます:
var map = new ol.Map({
         layers: [
             new ol.layer.Tile({//    
                 source: new ol.source.WMTS({
                   
                    
                 }),
             }),
             new ol.layer.Tile({//    
                 source: new ol.source.WMTS({
                  
             }),
             new ol.layer.Tile({
                 source: new ol.source.TileWMS({
                     url: 'http://120.27.61.222:8016/geoserver/tdw_testdata/wms',
                     params: { 'LAYERS': 'tdw_testdata:poilayers' },
                     serverType: 'geoserver',
                     crossOrigin: 'anonymous'
                 })
             })
         ]

3番目のレイヤーはwmsレイヤーで、前の2つはwtmsの下図を追加して、下図の追加はネット上でたくさんあって、検索して見ることができます.wmsサービスこれは私がolを見ることです.jsファイルに他のレイヤーを追加する方法を理解し、必要な情報を説明します.
  • まずurlです.geoserverに公開されたレイヤーです.接続はwmsにコピーされます.
  • params、つまりあなたのデータの属性と名前、彼のワークスペースも
  • に入力します
  • servertypeとcrossOriginの2つのデフォルトは私のと同じです
  • 何かできないコメントがあれば言ってください.他の手順のチュートリアルが必要なら、言ってもいいです.